Пользователь заполнил форму, нажал «Отправить», и ничего. Страница перезагрузилась, поля очистились, а было ли письмо отправлено, непонятно.

Contact Form 7 из коробки не показывает визуальных уведомлений после отправки. Сообщения об успехе или ошибке прячутся под формой, мелким шрифтом, без анимации, без акцента. Пользователь их просто не замечает, и уходит, не понимая, принята заявка или нет.

Исправить это можно за 10 минут. Нужен сам Contact Form 7, любой попап-плагин с JavaScript API и 25 строк кода. Результат: после отправки формы поверх страницы плавно появляется крупное окно, зелёное для успеха, красное для ошибки, и само исчезает через заданный интервал. Никакой перезагрузки, никаких потерянных лидов.

💡 Быстрый обзор:

• Какие DOM-события выбрасывает Contact Form 7 и чем современные названия отличаются от старых
• Как создать попапы успеха и ошибки в любом попап-плагине WordPress
• CSS-стили для попапов: оверлей, анимация, z-index
• Готовый jQuery-сценарий: привязка событий CF7 к открытию и авто-закрытию попапов
• Современная альтернатива на addEventListener, без jQuery
• Настройка времени показа: отдельно для успеха и ошибки

Какие DOM-события выбрасывает Contact Form 7

Contact Form 7 генерирует кастомные DOM-события на каждом этапе обработки формы. Вот полный перечень из официальной документации:

Для попапов после отправки нужны два события: wpcf7mailsent (успех) и wpcf7invalid (ошибка валидации). Ещё можно задействовать wpcf7spam для отдельного окна-предупреждения, но на практике хватает первых двух.

Важный нюанс: в старых руководствах и сниппетах события записываются через двоеточие. Например wpcf7:mailsent и wpcf7:invalid. Такой синтаксис использовался в jQuery-хуках ранних версий CF7. Сегодня он работает для обратной совместимости, но канонические названия идут без двоеточия. В коде ниже я приведу оба варианта: современный на addEventListener и jQuery-вариант для проектов, где jQuery уже подключён.

Объект event.detail содержит полезные свойства: contactFormId (ID конкретной формы), pluginVersion (версия CF7), inputs (массив введённых данных). Если на странице несколько форм, фильтруйте по contactFormId, попап откроется только для нужной.

Шаг 1: выбираем попап-плагин и создаём окна

Нужен попап-плагин с JavaScript API, чтобы окно можно было открыть программно из скрипта. Два проверенных бесплатных варианта из каталога WordPress.org:

• Popup Maker, 700 000+ активных установок, рейтинг 4.9/5. Вызов: PUM.open(popup_id). Мощное бесплатное ядро, таргетинг по страницам, триггеры по времени и скроллу, интеграция с популярными формами. Самое большое сообщество, найдёте ответ на любой вопрос.
• WP Popups, 20 000+ активных установок. Вызов: SPU.show(popup_id). Визуальный редактор на Gutenberg, фильтры показа, поддержка Contact Form 7 из коробки. Лёгкий и быстрый.

Создайте два попапа: первый для успешной отправки, второй для ошибки. В каждом разместите картинку, текст и, опционально, кнопку «Закрыть». Запишите ID каждого окна, они понадобятся в скрипте на шаге 3. В примерах ниже используются ID 1068 (успех) и 1065 (ошибка); у вас будут свои.

Вот как выглядят попапы с настроенными стилями:

Попап успешной отправки: зелёный фон, иконка подтверждения и текст.

Окно ошибки: красный фон, иконка предупреждения и просьба проверить введённые данные.

А это сами изображения для размещения внутри попапов:

Картинки можно заменить на свои, указав другие пути в настройках попап-плагина.

Шаг 2: CSS-стили для попапов

Попап-плагины не всегда экспортируют кастомный CSS. Если после создания окон стили не применились, пропишите их вручную: Настройки плагина → Custom CSS, либо Appearance → Customize → Additional CSS.

Стили для попапа успешной отправки (зелёный оверлей, максимальный z-index):

1
div#spu-bg-1068 {
2
    opacity: 0.6;
3
    background-color: green;
4
    z-index: 9999999;
5
}
6
div#spu-1068 {
7
    z-index: 99999999;
8
}

Стили для попапа ошибки (красный оверлей):

1
div#spu-bg-1065 {
2
    opacity: 0.6;
3
    background-color: #F44336;
4
    z-index: 9999999;
5
}
6
div#spu-1065 {
7
    z-index: 99999999;
8
}

Что здесь происходит: #spu-bg-N это полупрозрачная подложка (оверлей). #spu-N это само окно. Высокий z-index гарантирует, что попап перекроет все элементы страницы, включая админ-бар.

Если у вас другой попап-плагин, замените селекторы. Popup Maker генерирует #pum-N и .pum-overlay[data-popmake*="N"]. WP Popups использует свои префиксы, смотрите в инспекторе браузера (F12) на реальные ID ваших окон.

Шаг 3: jQuery-сценарий, связываем CF7 и попапы

Сценарий вставляется одним из трёх способов: в functions.php дочерней темы, через плагин Code Snippets, либо в секцию кастомного JavaScript вашей темы. Перед редактированием functions.php сделайте бэкап, одна синтаксическая ошибка положит сайт.

Ниже полный код с комментариями. Он ловит два события Contact Form 7 и вызывает API попап-плагина:

1
// START: Contact Form 7 + Popups — попапы при успехе и ошибке
2
jQuery(document).ready(function($) {
3
 
4
    // Попап при ОШИБКЕ валидации (поля не заполнены или битые)
5
    $(".wpcf7").on('wpcf7:invalid', function(event) {
6
        SPU.show(1065);   // ID попапа ошибки — замените на свой
7
        setTimeout(function() {
8
            $('div#spu-1065, div#spu-bg-1065').fadeOut(600, 'swing');
9
        }, 5500);          // авто-закрытие через 5,5 секунд
10
    });
11
 
12
    // Попап при УСПЕШНОЙ отправке
13
    $(".wpcf7").on('wpcf7:mailsent', function(event) {
14
        SPU.show(1068);   // ID попапа успеха — замените на свой
15
        setTimeout(function() {
16
            $('div#spu-1068, div#spu-bg-1068').fadeOut(600, 'swing');
17
        }, 3500);          // авто-закрытие через 3,5 секунды
18
    });
19
 
20
});
21
// END: Contact Form 7 + Popups

Что нужно заменить под свой проект:

• SPU.show(N), на метод вашего попап-плагина. Для Popup Maker: PUM.open(N).
• 1065 и 1068, на ID ваших попапов. Найдите их в админке плагина.
• Время в setTimeout (миллисекунды). 5500 = 5,5 секунд, 3500 = 3,5 секунды. Подберите под свой вкус.
• Селекторы div#spu-N и div#spu-bg-N, замените, если плагин генерирует другие ID.

Современная альтернатива без jQuery. Если тема не грузит jQuery или вы хотите более лёгкий вариант, используйте нативные события CF7 через addEventListener:

1
document.addEventListener('wpcf7mailsent', function(event) {
2
    // event.detail.contactFormId — ID конкретной формы (если их несколько)
3
    PUM.open(1068);
4
    setTimeout(function() {
5
        document.querySelector('#pum-1068').style.display = 'none';
6
        document.querySelector('.pum-overlay[data-popmake*="1068"]').style.display = 'none';
7
    }, 3500);
8
}, false);
9
 
10
document.addEventListener('wpcf7invalid', function(event) {
11
    PUM.open(1065);
12
    setTimeout(function() {
13
        document.querySelector('#pum-1065').style.display = 'none';
14
        document.querySelector('.pum-overlay[data-popmake*="1065"]').style.display = 'none';
15
    }, 5500);
16
}, false);

Этот вариант работает с Popup Maker и не требует jQuery. События wpcf7mailsent и wpcf7invalid, без двоеточия, современный стандарт.

Если на странице несколько форм, фильтруйте по contactFormId:

1
document.addEventListener('wpcf7mailsent', function(event) {
2
    if ('123' === event.detail.contactFormId) {
3
        PUM.open(1068);  // попап только для формы ID=123
4
    }
5
}, false);

Настройка времени автозакрытия

Интервал для каждого попапа задаётся отдельно: второй аргумент setTimeout в миллисекундах. Рекомендации из практики:

• Успех: 3-5 секунд. Пользователь уже прочитал «отправлено», дольше держать незачем.
• Ошибка: 5-7 секунд. Человеку нужно время, чтобы осознать проблему, перечитать сообщение и понять, какие поля поправить.
• Спам (wpcf7spam): 8-10 секунд. Дайте прочитать предупреждение полностью, но не блокируйте страницу наглухо.

Значение 600 в fadeOut(600, 'swing'), длительность анимации исчезновения в миллисекундах. Меньше 400, дёргано, больше 800, затянуто. 600, золотая середина.

Если попапов несколько и вы хотите разное время для разных форм, оберните вызов setTimeout в проверку contactFormId, как в примере выше.

Пошаговое видео по теме: настройка попапа после отправки Contact Form 7 с нуля. Если вы новичок в WordPress или вам удобнее смотреть, а не читать код, 8 минут экрана заменят половину статьи.

⁉️🤔 Частые вопросы

Попап не открывается после отправки формы. В чём дело?

Самая частая причина: ID попапа не совпадает с тем, что прописан в скрипте. Зайдите в админку попап-плагина, найдите реальный ID окна и подставьте в вызов SPU.show(N) или PUM.open(N). Вторая причина: jQuery не загружен или конфликтует. Проверьте консоль браузера (F12 → Console) на ошибки. Попап-плагины при клонировании или импорте назначают окнам новый номер, а старый ID из сниппета остаётся, всегда сверяйте цифры после импорта.

Обязательно ли ставить отдельный попап-плагин? Может, обойтись alert'ом?

Технически можно: замените SPU.show(N) на alert('Спасибо!'), и уведомление появится. Но alert блокирует страницу, выглядит чужеродно и раздражает посетителей. Кастомный попап с вашим дизайном, иконкой и плавной анимацией, часть сайта, а не системное окно браузера. По нашему опыту на нескольких проектах, замена alert на брендированный попап заметно снижает процент немедленных уходов с сайта.

Код работает только на одной форме. Как сделать на нескольких?

Используйте фильтрацию по event.detail.contactFormId. Для jQuery-варианта оберните вызов в проверку: if (event.detail.contactFormId === 123) { SPU.show(1068); }. Для vanilla JS, пример с условием приведён в шаге 3.

Что делать, если на сайте не подключён jQuery?

Используйте вариант на addEventListener из шага 3. Он не требует jQuery и работает во всех современных браузерах. Единственный нюанс: закрытие попапа через нативный DOM делается ручным скрытием элемента, метод fadeOut недоступен. Как вариант, добавьте CSS-класс с transition и переключайте его.

Можно ли использовать один попап для всех форм на сайте?

Можно, если текст уведомления универсальный. Создайте один попап успеха и один попап ошибки, а в скрипте откройте их для всех событий wpcf7mailsent и wpcf7invalid без фильтрации по contactFormId. Но если на разных страницах формы с разным контекстом, лучше сделать отдельные окна, текст «Заявка на консультацию принята» и «Подписка оформлена» выглядят по-разному.

Popup Maker или WP Popups: что выбрать под ваш проект

Выбор сводится к трём сценариям:

• Нужен максимум возможностей и интеграций, берите Popup Maker. Таргетинг по страницам, триггеры по времени и скроллу, интеграция с десятками плагинов форм, огромное сообщество. Бесплатного ядра хватает для 90% задач.
• Хочется легкости и визуального редактора на Gutenberg, ваш выбор WP Popups. Современный интерфейс, быстрая настройка, меньше накладных расходов. Работает с Contact Form 7 из коробки.
• Нужен попап именно с формой Contact Form 7 внутри, это другой сценарий, не уведомления после отправки, а форма в модальном окне по клику на кнопку. Для этого есть специализированный WPB Popup for Contact Form 7, он открывает CF7-форму в попапе, а не реагирует на её отправку.

Оба плагина для уведомлений бесплатны и доступны в каталоге WordPress.org. Выбирайте тот, который лучше ложится на ваш стек, и подставляйте его API-вызов в скрипт из шага 3. Саму тему попапов можно развивать бесконечно: A/B-тесты текста уведомлений, задержка с учётом времени чтения, разные окна для разных форм. Но база, CF7-событие + вызов попапа + авто-закрытие, закрывает подавляющее большинство реальных задач на WordPress-сайтах.