Contact Form 7 не показывает сообщение после отправки в модальном окне: как исправить отображение и закрытие формы

Если Contact Form 7 отправляет заявку, но пользователь не видит сообщение об успехе в модальном окне, проблема обычно не в самой форме, а в том, как тема или скрипт модалки обрабатывают DOM после AJAX-ответа. На практике это выглядит так: форма очищается, письмо уходит, но блок .wpcf7-response-output либо скрыт стилями, либо оказывается вне видимой области, либо модальное окно закрывается раньше, чем CF7 успевает вставить статус.

Ниже — рабочий разбор для типового сценария: форма Contact Form 7 внутри popup/modal, после отправки нужно либо показать сообщение внутри окна, либо закрыть модалку только после успешной отправки. Без выдуманных хуков и без лишней магии.

Как выглядит проблема в реальном проекте

Чаще всего жалоба звучит так: «форма отправляется, но ничего не происходит» или «после клика окно закрывается, а подтверждения нет». Если открыть DevTools, можно увидеть, что событие wpcf7mailsent срабатывает, но пользователь этого не замечает. Иногда наоборот — сообщение есть в HTML, но его перекрывает слой модалки, либо контейнер формы перерисован плагином попапов и CF7 теряет свой блок статуса.

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

• Есть ли в DOM элемент .wpcf7-response-output после отправки.
• Не скрыт ли он стилями темы или модального плагина.
• Не удаляется ли контейнер формы сразу после submit.
• Не закрывается ли popup по общему обработчику клика раньше события CF7.
• Нет ли на странице двух одинаковых форм с одинаковыми ID-атрибутами в обертках плагина.

Диагностика: где именно ломается сценарий

Сначала нужно понять, что именно не работает: отправка, вывод сообщения или логика закрытия модалки. Для этого достаточно одного короткого скрипта в консоли браузера или временно в теме.

document.addEventListener('wpcf7mailsent', function (event) {
  console.log('CF7 success', event.detail);
});

document.addEventListener('wpcf7invalid', function (event) {
  console.log('CF7 invalid', event.detail);
});

document.addEventListener('wpcf7mailfailed', function (event) {
  console.log('CF7 mail failed', event.detail);
});

Если wpcf7mailsent есть в консоли, значит отправка прошла, и искать надо уже в UI-слое. Если события нет, сначала проверьте AJAX, конфликт JS и ошибки в консоли. В модальных окнах особенно часто ломают работу скрипты, которые пересоздают содержимое после открытия/закрытия.

Пошаговое решение: показать сообщение и не потерять его в модалке

Есть два нормальных пути: оставить сообщение внутри формы и сделать его видимым, либо закрывать окно только после успешной отправки. Какой вариант выбрать, зависит от UX. Для формы обратной связи внутри popup обычно лучше сначала показать успех, а уже потом закрыть окно с задержкой.

Вариант 1. Не закрывать модалку сразу, а показать статус внутри формы

Если модалка не должна закрываться автоматически, убедитесь, что контейнер ответа не скрыт. Добавьте CSS, который не ломает вывод CF7:

.wpcf7 form .wpcf7-response-output {
  display: block;
  margin: 16px 0 0;
  padding: 12px 14px;
  border-width: 1px;
}

/* Если popup прячет overflow и сообщение уезжает вниз */
.modal-content,
.popup-content {
  overflow: auto;
  max-height: 90vh;
}

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

Вариант 2. Закрывать popup только после успешной отправки

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

document.addEventListener('wpcf7mailsent', function (event) {
  var form = event.target;
  var popup = form.closest('.modal, .popup, .mfp-wrap');

  if (!popup) {
    return;
  }

  // Дайте CF7 успеть показать success-message
  window.setTimeout(function () {
    // Замените на закрытие вашего popup-плагина
    var closeButton = popup.querySelector('[data-close], .popup-close, .mfp-close');
    if (closeButton) {
      closeButton.click();
    }
  }, 1200);
});

Задержка нужна не для красоты, а чтобы пользователь успел увидеть, что форма сработала. Если закрыть окно мгновенно, визуально это выглядит как «ничего не произошло».

Если модалка перерисовывает форму после submit

Некоторые popup-плагины при закрытии или повторном открытии пересоздают HTML-контейнер. В таком случае лучше не держать форму в полностью динамическом блоке, а вставлять её в статический контейнер страницы и открывать модалку поверх него. Если это невозможно, следите, чтобы скрипт инициализации модалки не уничтожал DOM-узлы CF7.

Сравнение подходов

Проверка результата после внедрения

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

• Отправьте тестовую заявку и убедитесь, что wpcf7mailsent появляется в консоли.
• Проверьте, что блок .wpcf7-response-output виден в DOM и не перекрыт.
• Откройте форму в мобильной версии и убедитесь, что сообщение не уходит за пределы экрана.
• Если окно закрывается автоматически, проверьте задержку: пользователь должен успеть увидеть успех.
• Сделайте повторную отправку после закрытия и открытия popup — некоторые баги проявляются только на втором цикле.

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

Сообщение есть в HTML, но его не видно

Обычно виноваты overflow: hidden, слишком маленькая высота контейнера или стили, которые делают .wpcf7-response-output прозрачным. Проверьте вычисленные стили в DevTools и временно отключите CSS модалки.

Popup закрывается раньше, чем CF7 успевает показать статус

Это типичный конфликт обработчиков. Решение — закрывать окно только в wpcf7mailsent и добавить небольшую задержку. Не вешайте закрытие на обычный submit формы.

После отправки форма исчезает, но сообщения нет

Некоторые темы или плагины очищают контейнер формы после AJAX-ответа. Тогда CF7 не успевает отрисовать статус. Проверьте, не оборачивает ли модалка форму в компонент, который пересоздается после каждого действия.

В консоли есть ошибки JavaScript

Одна ошибка в скриптах popup-плагина может остановить обработку событий CF7. Сначала исправьте JS-ошибку, потом уже проверяйте стили и UX. Иначе можно долго лечить не ту проблему.

Безопасность и производительность: что не стоит делать

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

Если форма стоит на нескольких страницах, лучше вынести кастомный JS в отдельный файл и подключать его только там, где есть CF7 и модалка. Так вы уменьшите количество лишнего кода на странице и упростите отладку.

Когда лучше не чинить CSS, а поменять сценарий

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

Если же модальное окно обязательно, держите логику простой: одна форма, одно событие успеха, одна точка закрытия. Чем меньше сторонних обработчиков вокруг Contact Form 7, тем легче потом проверять, почему сообщение не показалось пользователю.