Как закрыть попап только после успешной отправки формы
Нажатие на кнопку ещё не означает, что заявка принята: поле может не пройти проверку, сеть — оборваться, а приёмщик — вернуть ошибку. Если закрыть попап в момент клика, посетитель потеряет введённые данные и увидит пустую страницу. Надёжная точка у Тильды уже есть — событие `tildaform:aftersuccess`, которое приходит после ответа сервера и до окончательной обработки сообщения об успехе.
Короткий ответ
Закрывайте окно по tildaform:aftersuccess, а не по клику и не по таймеру.
Обрабатывайте только форму внутри нужного попапа. При tildaform:aftererror окно
должно остаться открытым вместе с понятной ошибкой.
Три момента, которые легко перепутать
| Момент | Что известно | Можно закрывать окно |
|---|---|---|
| Нажали кнопку | посетитель хочет отправить | нет |
beforesend | Тильда начала свой сценарий | нет |
aftersuccess | сервер подтвердил заявку | да |
aftererror | отправка не завершилась | нет |
Именно поэтому задержка «закрыть через две секунды» ненадёжна. На быстрой сети она заставляет ждать, на медленной закрывает форму раньше ответа, а при ошибке скрывает саму ошибку.
Сначала проверьте штатный сценарий
До пользовательского кода откройте настройки формы и ответьте на четыре вопроса:
- Какой текст показан после отправки?
- Есть ли переход на страницу благодарности?
- Указан ли собственный callback?
- Является ли форма частью корзины или оплаты?
У Тильды есть родной success-box, переход и событие успеха. Подробный порядок с
переменными {{form.Name}} и номером заявки разобран в статье
«Что показать после отправки формы».
Для многих проектов достаточно штатного текста «Заявка отправлена» внутри окна и понятной кнопки закрытия. Автоматическое закрытие нужно, когда следующим шагом должна стать корзина, оплата или другой экран.
Опасный случай: форма корзины
Форма в корзине не равна обычной форме обратной связи. У неё уже может быть системный callback, который очищает корзину и завершает заказ. Если вписать в настройки своё имя функции, можно заменить родной обработчик: заявка дойдёт, а корзина останется полной или оплата не продолжится.
Для такого сценария безопаснее слушать DOM-событие успеха. Оно не заменяет callback и не перехватывает отправку.
Как должна вести себя аккуратная модификация
Хороший обработчик делает пять вещей:
- Получает
tildaform:aftersuccess. - Проверяет, что событие пришло от формы внутри размеченного попапа.
- Даёт Тильде закончить показ сообщения об успехе.
- Вызывает родное закрытие именно этого окна.
- Ничего не делает на
aftererror.
Он не удаляет t-popup_show вручную, не возвращает прокрутку сам и не ставит
второй ловец фокуса. За это уже отвечает t_popup__closePopup.
MOD-172 объединяет закрытие по подтверждённому успеху с контролируемым порядком слоёв. Он остаётся спецификацией до стенда с обычным попапом, формой и корзиной — для клиентского проекта это важнее красивого кода, который проверили только на пустой странице.
Как проверить перед сдачей
Отправьте форму минимум три раза разными сценариями:
- корректные данные и успешный ответ — окно закрылось один раз;
- пустое обязательное поле — окно осталось, ошибка видна;
- отключённая сеть — введённые данные и возможность повторить сохранены.
После успеха проверьте, куда попал фокус. Если он исчез или остался в невидимом окне, мышью сайт ещё кажется рабочим, а клавиатурой уже нет.
В ведомости клиента запишите не «стоит скрипт на попап», а конкретное правило: «Попап консультации закрывается после подтверждённой заявки; при ошибке остаётся открытым; следующий шаг — корзина». Это описание переживёт смену текста и дизайна.