Кнопка «свернуть форму» не срабатывает чаще всего из-за того, что обработчик сворачивания привязан не к тому элементу или скрипт не загрузился — проверьте консоль браузера на ошибки JavaScript до того, как менять разметку. Если форма на сайте должна сворачиваться по клику, но вместо этого страница перезагружается, почти наверняка кнопка имеет тип submit и отправляет форму вместо сворачивания.

В этой статье разберём, как реализовать сворачивание формы разными способами: встроенными средствами HTML без скриптов, через CSS и через JavaScript. Отдельно рассмотрим типичные ошибки, из-за которых форма не сворачивается, и как их диагностировать. Материал подойдёт и тем, кто настраивает готовый конструктор сайтов, и тем, кто пишет разметку вручную.

Что значит «свернуть форму» и когда это нужно

Под сворачиванием формы обычно понимают скрытие её полей с сохранением видимым заголовка или кнопки, по которой форму можно развернуть обратно. Это стандартный приём для длинных анкет, фильтров каталога, форм обратной связи в мобильной версии сайта.

Реализуется сворачивание тремя базовыми подходами:

  • 🔽 Нативный HTML — теги <details> и <summary>, работают без единой строки скрипта;
  • 🎨 CSS-подход — переключение класса или использование чекбокса-переключателя;
  • ⚙️ JavaScript — полный контроль над анимацией, состоянием и логикой;
  • 🧩 Готовые компоненты — аккордеоны в UI-библиотеках и конструкторах сайтов.

Выбор зависит от задачи. Для простого «показать/скрыть» достаточно первого варианта. Если нужна плавная анимация высоты и запоминание состояния между страницами — без скрипта не обойтись.

Сворачивание формы без скриптов: details и summary

Самый надёжный способ — обернуть форму в элемент <details>. Браузер сам отрисует переключатель и будет управлять видимостью содержимого. Разметка выглядит так:

<details>

<summary>Форма обратной связи</summary>

<form action="/send" method="post">

<input type="text" name="name" placeholder="Ваше имя">

<button type="submit">Отправить</button>

</form>

</details>

По умолчанию блок свёрнут; чтобы форма была изначально развёрнута, добавьте атрибут open к тегу details. Текст внутри <summary> остаётся видимым всегда и служит заголовком-кнопкой.

💡

Элемент details поддерживается всеми современными браузерами и работает даже при отключённом JavaScript — это самый отказоустойчивый вариант сворачивания.