Користувач заповнив форму, натиснув «Надіслати», і нічого. Сторінка перезавантажилася, поля очистилися, а чи був лист надісланий, незрозуміло.

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-сайтах.