Как отладить AJAX-отправку WPForms, если форма зависает после сабмита

Сценарий типичный: пользователь нажимает кнопку отправки, форма крутит индикатор, но сообщение об успехе не появляется. Иногда запрос уходит, но страница не обновляет состояние. В других случаях сабмит ломается только на части страниц или только для авторизованных пользователей. Для WPForms это почти всегда не «ошибка формы», а конфликт AJAX, кэша, оптимизации скриптов или стороннего кода на странице.

Как понять, что проблема именно в AJAX-отправке

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

Что смотреть в браузере

• вкладку Console — ошибки JavaScript, особенно Uncaught TypeError и ошибки загрузки файлов;
• вкладку Network — уходит ли запрос при сабмите и какой у него статус;
• ответ сервера — нет ли редиректа, HTML-страницы вместо JSON или ошибки 403/500;
• поведение после отключения оптимизации JS и CSS.

Если в Network запрос уходит, но ответ приходит не в формате, который ожидает WPForms, форма может зависать без явной ошибки. Это часто случается при агрессивном кэшировании, минификации и объединении скриптов.

Пошаговая диагностика проблемы

Ниже порядок, который помогает быстро сузить причину. Не пропускайте шаги: в таких задачах важно не угадывать, а изолировать источник сбоя.

1. Откройте страницу с формой в режиме инкогнито.
2. Временно отключите плагины оптимизации: объединение JS, отложенную загрузку, lazy load для скриптов.
3. Проверьте, не включено ли кэширование HTML для страницы с формой.
4. Смените тему на стандартную для теста, если есть подозрение на конфликт шаблона.
5. Откройте консоль и повторите отправку формы.
6. Сравните поведение на мобильном и десктопе, если на сайте есть отдельные правила для JS.

Если после отключения оптимизации форма начинает отправляться нормально, проблема почти наверняка не в WPForms как таковом, а в том, как на сайте обрабатываются его скрипты.

Что исправить в первую очередь

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

1. Исключите скрипты WPForms из оптимизации

Если у вас включены minify/defer/delay в плагине оптимизации, добавьте исключения для файлов WPForms. Названия файлов зависят от версии, поэтому ориентируйтесь по фактическим путям в исходном коде страницы и в консоли.

// Пример: точечное отключение отложенной загрузки для скриптов WPForms в теме или mu-plugin.
add_filter( 'script_loader_tag', function( $tag, $handle, $src ) {
	$wpforms_handles = array( 'wpforms', 'wpforms-smart-phone-field', 'wpforms-file-upload' );

	if ( in_array( $handle, $wpforms_handles, true ) ) {
		$tag = str_replace( ' defer', '', $tag );
		$tag = str_replace( ' async', '', $tag );
	}

	return $tag;
}, 10, 3 );

Этот пример не заменяет настройки плагина оптимизации, но помогает проверить гипотезу. Если после снятия defer проблема исчезает, дальше уже настраивайте исключения в самом плагине, а не оставляйте такой код в продакшене без необходимости.

2. Проверьте, не ломает ли кэш ответ AJAX

Если страница с формой кэшируется как обычный HTML, а AJAX-ответы смешиваются с редиректами или HTML-фрагментами, сабмит может зависать. Особенно это заметно на сайтах с CDN, серверным кэшем и плагинами page cache. Для теста исключите страницу с формой из кэша и проверьте повторно.

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

3. Посмотрите на конфликты с JavaScript темы

Иногда проблема не в WPForms, а в коде темы: глобальные обработчики submit, переопределение preventDefault(), сторонние маски телефонов или скрипты, которые перехватывают отправку всех форм на странице. Если у вас есть кастомный JS, проверьте, не навешан ли он слишком широко — на form без фильтра по классу.

document.addEventListener('submit', function(event) {
	const form = event.target;

	if (form && form.classList && form.classList.contains('wpforms-form')) {
		return; // не вмешиваемся в отправку WPForms
	}

	// Остальная логика для других форм.
}, true);

Если в проекте есть старый код, который ловит сабмит на этапе захвата, он может блокировать AJAX-отправку до того, как WPForms успеет обработать форму.

Пошаговое решение без лишнего риска

Когда источник найден, действуйте по порядку: сначала уберите конфликт, потом возвращайте оптимизацию точечно.

1. Отключите объединение и отложенную загрузку JS на странице с формой.
2. Добавьте исключения для скриптов WPForms в плагине оптимизации.
3. Исключите страницу формы из HTML-кэша, если она критична для отправки.
4. Проверьте сторонние скрипты: маски, аналитика, чат-виджеты, A/B-тесты.
5. Если нужен кастомный JS, ограничьте его только нужными формами.

Если форма отправляется через AJAX, но после сабмита не показывает сообщение, проверьте, не скрывает ли его CSS. Иногда тема задаёт overflow: hidden, перекрывает блок успеха или меняет цвет текста на фоне страницы.

Как проверить, что исправление сработало

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

• отправьте форму в обычном окне и в инкогнито;
• проверьте десктоп и мобильный режим;
• посмотрите, уходит ли AJAX-запрос без ошибок в Network;
• убедитесь, что появляется сообщение об успехе или ошибка валидации;
• проверьте, создаётся ли запись в WPForms Entries, если она у вас включена;
• если есть email-уведомление, убедитесь, что оно приходит после успешного сабмита.

Хороший признак — форма отправляется стабильно после очистки кэша браузера и без ручного отключения скриптов в DevTools. Если работает только после очистки кэша, значит конфликт ещё не устранён полностью.

Частые ошибки и как их исправить

Форма зависает только на одной странице

Обычно на этой странице подключён дополнительный JS-бандл, виджет или блок конструктора, который вмешивается в события формы. Сравните исходный код страницы с рабочей и проблемной версией. Ищите лишние скрипты и повторную инициализацию плагинов.

AJAX работает, но сообщение не видно

Проверьте CSS. Сообщение может быть скрыто display: none, перекрыто sticky-элементом или находиться ниже области видимости. Иногда помогает временно отключить кастомные стили формы и проверить дефолтный вид.

После минификации всё ломается

Не объединяйте и не откладывайте загрузку всех скриптов подряд. Для WPForms лучше исключить его файлы из delay/defer, чем потом ловить случайные ошибки валидации и сабмита.

На сайте включён CDN, и форма ведёт себя нестабильно

Проверьте, не кэширует ли CDN HTML-ответы формы и не переписывает ли заголовки. Для теста временно обойдите CDN и сравните поведение напрямую с сервером.

Что важно для безопасности и производительности

Не стоит полностью отключать AJAX только ради обхода конфликта, если проблема решается точечно. AJAX-отправка удобна, но она должна работать на чистом наборе скриптов. Лучше исключить только то, что мешает, чем отключать оптимизацию на всём сайте.

Если вы вносите правки через код, держите их в mu-plugin или в отдельном мини-плагине, а не в functions.php активной темы. Так проще откатить изменения и не потерять их при смене шаблона.

Для сайтов с большим количеством форм полезно отдельно проверить, не дублируются ли скрипты WPForms из-за кастомных подключений темы. Два одинаковых экземпляра библиотек иногда дают странные ошибки, которые в консоли выглядят как случайный шум, а на деле ломают сабмит.

Подход	Когда подходит	Минус
Настройка плагина оптимизации	Если проблема в defer/delay/minify	Нужно знать, какие файлы исключать
Код в теме или mu-plugin	Если конфликт создаёт кастомный JS	Требует аккуратного тестирования
Полное отключение AJAX	Только как временная диагностика	Ухудшает UX и не решает источник проблемы

Если после всех проверок форма всё ещё зависает, соберите минимальный набор данных: URL страницы, список активных плагинов оптимизации, скрин консоли и статус AJAX-запроса. С таким набором уже можно предметно искать конфликт, а не гадать по симптомам.