Как свернуть форму: рабочие способы для сайта и приложений

Кнопка «свернуть форму» не срабатывает чаще всего из-за того, что обработчик сворачивания привязан не к тому элементу или скрипт не загрузился — проверьте консоль браузера на ошибки 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> остаётся видимым всегда и служит заголовком-кнопкой.

Ограничение метода — внешний вид стрелки-переключателя по умолчанию скромный, а анимация раскрытия отсутствует. Стрелку можно переопределить через CSS, скрыв стандартный маркер и добавив собственную иконку.

Сворачивание через JavaScript

Когда нужна плавная анимация или сложная логика, видимость формы переключают скриптом. Базовый приём — добавление и удаление CSS-класса, который управляет свойством display или max-height.

const toggleBtn = document.querySelector('.form-toggle');
const form = document.querySelector('.collapsible-form');

toggleBtn.addEventListener('click', () => {
form.classList.toggle('is-collapsed');
});

В CSS класс is-collapsed скрывает форму, а переход transition даёт плавность. Обратите внимание: анимировать свойство display нельзя, поэтому для плавного сворачивания используют max-height, opacity или transform.

⚠️ Внимание: если свёрнутая форма содержит обязательные поля с атрибутом required, браузер может заблокировать отправку, а сообщение об ошибке окажется внутри скрытого блока — пользователь не поймёт, почему ничего не происходит. Либо разворачивайте форму скриптом при ошибке валидации, либо не скрывайте обязательные поля.

Почему форма не сворачивается: диагностика

Разберём типичные симптомы и их вероятные причины. Начинайте проверку с консоли разработчика браузера — она открывается клавишей F12 в большинстве браузеров.

Симптом	Вероятная причина	Что проверить
Страница перезагружается при клике	Кнопка отправляет форму	Атрибут type кнопки должен быть button
Ничего не происходит	Ошибка в скрипте или неверный селектор	Консоль на наличие ошибок, правильность классов
Форма исчезает без анимации	Используется display: none	Заменить на max-height или opacity с transition
Сворачивание работает, но «дёргается»	Анимация height: auto	Задать конкретное max-height или использовать grid-template-rows
Не работает только на телефоне	Конфликт обработчиков touch/click	Проверить события и отключить дублирующие обработчики

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

Сворачивание формы в конструкторах сайтов

В визуальных конструкторах и CMS сворачиваемые блоки обычно называются «аккордеон», «спойлер» или «раскрывающийся блок». Название и расположение настройки зависят от конкретной платформы, поэтому точный путь в меню стоит уточнять в документации вашего конструктора — универсальной инструкции здесь нет.

Общий принцип одинаков: вы добавляете блок-аккордеон, переносите в него форму и задаёте заголовок, который останется видимым в свёрнутом состоянии. Если нужного блока нет в стандартном наборе, многие платформы позволяют вставить произвольный HTML-код — туда подойдёт вариант с <details> из второго раздела.

Что делать, если конструктор не даёт вставить форму внутрь аккордеона

Некоторые платформы запрещают вкладывать формы в интерактивные блоки. Обходной путь — разместить рядом кнопку «Заполнить форму», которая открывает форму во всплывающем окне (попапе). Функционально это решает ту же задачу: форма не занимает место на странице, пока не нужна.

Доступность и удобство свёрнутой формы

Сворачивание влияет не только на внешний вид, но и на доступность. Пользователи с клавиатурной навигацией и скринридерами должны понимать, что блок раскрывается, и иметь возможность это сделать без мыши.

Элемент <details> решает эту задачу из коробки: он фокусируется с клавиатуры и сообщает своё состояние вспомогательным технологиям. При собственной реализации на JavaScript потребуется вручную добавить кнопке атрибут aria-expanded и переключать его значение вместе со состоянием формы.

⚠️ Внимание: не скрывайте форму через один лишь opacity: 0 или сдвиг за экран — такая форма остаётся доступной для фокуса с клавиатуры, и пользователь попадёт в невидимые поля. Для полного скрытия комбинируйте визуальное скрытие с visibility: hidden или hidden.

Сохранение состояния формы между страницами

По умолчанию после перехода на другую страницу или перезагрузки форма вернётся в исходное состояние. Если пользователь развернул фильтр, настроил его и перешёл по ссылке, при возврате всё снова окажется свёрнутым — это раздражает.

Состояние можно запоминать в localStorage: при каждом переключении скрипт сохраняет флаг, а при загрузке страницы читает его и восстанавливает вид формы. Ключевой нюанс: сохранять нужно именно факт свёрнутости, а не данные полей — данные формы хранить в localStorage без необходимости не стоит, особенно если там персональная информация.

Для форм-фильтров альтернатива — отражать состояние в адресной строке через параметры URL. Тогда ссылку на страницу с развёрнутым фильтром можно сохранить или передать другому человеку.

Частые вопросы

Можно ли свернуть форму только на мобильной версии, а на компьютере показывать развёрнутой?

Да. Для варианта с CSS состояние переключается медиазапросом: на широких экранах форма видима всегда, на узких управляется кнопкой. Для варианта с <details> атрибут open можно добавлять скриптом в зависимости от ширины окна при загрузке страницы.

Почему анимация сворачивания дёргается или не работает?

Чаще всего анимируется свойство, которое не поддерживает плавные переходы — например, display или height: auto. Рабочие варианты: переход по max-height с запасным большим значением либо современный приём с grid-template-rows от 0fr к 1fr.

Отправятся ли данные, если форма свёрнута?

Скрытие через CSS не мешает отправке — поля участвуют в submit. А вот элемент с атрибутом disabled или форма внутри закрытого <details> ведут себя иначе: поля в закрытом details отправляются, а вот disabled-поля — нет. Это стоит учитывать при валидации на стороне сервера.

Как сделать, чтобы стрелка у details смотрела в другую сторону?

Стандартный маркер скрывается через CSS (псевдоэлемент маркера у summary), после чего добавляется собственная иконка — например, символ или фоновое изображение, поворачиваемое при открытом состоянии через селектор details[open] summary.

Что выбрать для простого лендинга без программиста?

Начните с <details> и <summary> — это работает без скриптов, доступно с клавиатуры и поддерживается современными браузерами. Если лендинг собран в конструкторе, ищите блок «аккордеон» или «спойлер» в его библиотеке элементов.