Skip to content

Все для WordPress, веб-розробки — і не тільки

🛠 Contact Form 7: універсальна форма з прихованим полем і динамічним попапом
Плагіни WordPressWordPress
8 хв1,609 слів

🛠 Contact Form 7: універсальна форма з прихованим полем і динамічним попапом

💡 Як налаштувати універсальну форму CF7 з прихованим полем

  • Встановіть плагін Dynamic Text Extension та активуйте його в розділі Plugins
  • Додайте у форму тег dynamic hidden з ідентифікатором id:HIDDENINPUT для передачі заголовка блоку
  • Створіть попап у Popup Maker, вставте шорткод форми та налаштуйте тригер Click Open
  • Підключіть jQuery-скрипт, який захоплює заголовок блоку та вставляє його в приховане поле
  • Додайте [dynamichidden-120] до шаблону листа, щоб бачити, з якого блоку надійшла заявка
  • Перевірте надсилання: попап помилки на порожній формі та попап успіху після успішного надсилання

Крок 1: плагін для прихованого поля, Dynamic Text Extension

Базовий Contact Form 7 не вміє додавати приховані поля «з коробки». Донедавна це завдання закривав плагін Contact Form 7** Modules**, але він не оновлювався з 2017 року і не тестувався з останніми версіями WordPress.

Актуальна заміна, Contact Form 7 - Dynamic Text Extension (DTX). Плагін активно підтримується (останнє оновлення, червень 2026), працює з WordPress 7.0 і вміє значно більше, ніж просто приховане поле: динамічні значення з URL, cookie, метаполів запису, даних поточного користувача та кастомних шорткодів.

Кнопки динамічних тегів DTX у редакторі форм Contact Form 7

Встановіть плагін через Plugins → Add New Plugin, знайдіть за назвою «Dynamic Text Extension», натисніть «Install Now» та активуйте. У редакторі форми Contact Form 7 з'являться дві нові кнопки у випадному списку генератора тегів: dynamic text і dynamic hidden.

Генератор тегів прихованого поля в редакторі форм Contact Form 7

Для нашого сценарію потрібен саме dynamic hidden. Створіть приховане поле з ідентифікатором, через який jQuery-скрипт передаватиме заголовок блоку:

1[dynamichidden dynamichidden-120 id:HIDDENINPUT]

Якщо з якихось причин DTX не підходить, можна використати і старий Contact Form 7 Modules: для базового прихованого поля він усе ще функціональний, але не тестувався з останніми версіями WordPress і не оновлювався з 2017 року. Шорткод матиме такий вигляд: [hidden hidden-120 id:HIDDENINPUT].

Крок 2: шаблон форми та листа

Форма збирається зі стандартних полів CF7 плюс наше приховане поле. Ось робочий шаблон, скопіюйте його в редактор форми:

1[text* text-59 placeholder "Ваше имя*"]
2[tel* tel-116 placeholder "Телефон*"]
3[email Email placeholder "Email"]
4[recaptcha]
5[submit "Отправить"]
6[dynamichidden dynamichidden-120 id:HIDDENINPUT]

Поля text-59, tel-116 та Email, обов’язкові (зірочка після типу). reCAPTCHA захищає від спаму. Кнопка надсилання та приховане поле замикають форму.

Тепер налаштуйте шаблон листа на вкладці «Лист» у редакторі форми. Ключовий момент, додати [dynamichidden-120] (або [hidden-120] для CF7 Modules) у тіло листа, щоб бачити, з якого блоку надійшла заявка:

Кому: moc.niamodruoy@liame-ruoy

Від кого: [Email]

Тема: Заявка з сайту, [dynamichidden-120]

Тіло листа:

1Выбранный товар/услуга: [dynamichidden-120]
2---
3Имя: [text-59]
4Телефон: [tel-116]
5Email: [Email]
6---
7Сообщение отправлено со страницы: [_url]

Обов’язково позначте чекбокс «Використовувати HTML-формат листа», інакше розмітка зіб’ється. Для надійної доставки листів налаштуйте SMTP (через будь-який SMTP-плагін, Post SMTP, WP Mail SMTP або Google Gmail API), без цього листи від CF7 часто потрапляють у спам.

Крок 3: створення попапа в Popup Maker

Старий плагін Popups - WordPress Popup закрито з липня 2022 року через уразливість і він недоступний для встановлення. Сучасна заміна, Popup Maker: 780 000+ активних установок, інтеграція з CF7 «з коробки», десятки тригерів і правил таргетингу.

Вікно редактора попапів Popup Maker з інтеграцією форм у WordPress

Установіть Popup Maker через Plugins → Add New Plugin, потім перейдіть у Popup Maker → Create Popup. Дайте попапу назву та в редакторі контенту вставте шорткод форми:

1[contact-form-7 id="123" title="Универсальная форма"]

ID форми дивіться у списку форм CF7 (колонка «Shortcode»). У налаштуваннях попапа праворуч, у блоці Triggers, виберіть Click Open і вкажіть CSS-селектор кнопки, по якій відкриватиметься попап, наприклад, .jet-button-order. Це аналог «Manual Triggering» зі старого Popups.

Налаштування тригера Manual Triggering для попапа в WordPress

Тепер дізнайтеся ID створеного попапа. Відкрийте попап у редакторі та подивіться на URL браузера: post.php?post=4197&action=edit, число після post= і є ID (у прикладі, 4197). Він знадобиться для скрипту на наступному кроці.

ID попапа в URL браузера при редагуванні в адмінці WordPress

Крок 4: jQuery-скрипт для захоплення заголовка блоку

Скрипт вирішує головне завдання: при кліку по кнопці всередині блоку захоплює текст заголовка цього блоку, вставляє його в заголовок попапа та в приховане поле форми. Розберемо частинами.

Спочатку призначте спільний CSS-клас усім блокам, у яких потрібно шукати заголовок, наприклад, ForContactForm7HiddenInput. В Elementor це робиться через «Advanced → CSS Classes» для секції-обгортки.

Сам скрипт підключається через functions.php дочірньої теми або плагін Code Snippets (безпечніше, не загубиться при оновленні теми):

1add_action('wp_enqueue_scripts', function () {
2    wp_enqueue_script(
3        'cf7-universal-form',
4        get_stylesheet_directory_uri() . '/cf7-universal-form.js',
5        ['jquery'],
6        '1.0',
7        true
8    );
9});

Вміст файлу cf7-universal-form.js:

1jQuery(document).ready(function ($) {
2 
3    // Переменная для хранения заголовка блока
4    var blockTitle = '';
5 
6    // Захватываем текст заголовка при клике по кнопке
7    $('.ForContactForm7HiddenInput .jet-button-order').on('click', function () {
8        blockTitle = $(this)
9            .closest('.ForContactForm7HiddenInput')
10            .find('h3.elementor-heading-title')
11            .text()
12            .trim();
13    });
14 
15    // Ждём открытия попапа через MutationObserver
16    var popupId = '4197'; // ID вашего попапа из Popup Maker
17    var observer = new MutationObserver(function (mutations) {
18        mutations.forEach(function (mutation) {
19            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
20                var $popup = $('#popmake-' + popupId);
21                if ($popup.hasClass('active') && blockTitle) {
22                    // Вставляем заголовок в попап
23                    $popup.find('.popup-title').text(blockTitle);
24                    // Вставляем заголовок в скрытое поле формы
25                    $('#HIDDENINPUT').val(blockTitle);
26                }
27            }
28        });
29    });
30 
31    // Начинаем следить за попапом
32    var $popupContainer = $('#popmake-' + popupId);
33    if ($popupContainer.length) {
34        observer.observe($popupContainer[0], {
35            attributes: true,
36            attributeFilter: ['class']
37        });
38    }
39 
40});

Що тут відбувається:

  • Захоплення заголовка: при кліку на кнопку з класом .jet-button-order скрипт піднімається DOM-деревом до батьківського блоку .ForContactForm7HiddenInput, знаходить усередині h3.elementor-heading-title і зберігає його текст у змінну blockTitle.
  • Відстеження попапа: замість застарілого attrchange.js (чий CDN rawgit.com закрито) використовується нативний MutationObserver, він стежить за зміною класу в контейнера попапа Popup Maker. Коли з’являється клас active (попап відкрито), скрипт вставляє збережений заголовок у заголовок попапа та в приховане поле #HIDDENINPUT.
  • Селектори: .jet-button-order, клас кнопки Elementor JetElements; замініть на свій клас кнопки. Попап Popup Maker рендериться з ID #popmake-{ID}, тому в коді використовується #popmake-4197, замініть 4197 на ID вашого попапа.

Перед блоком jQuery нижче, візуальний приклад того, як виглядає сторінка з кількома блоками та кнопками «Замовити зараз»:

Блоки продуктів із кнопками замовлення на сторінці лендингу WordPress

Після кліку по кнопці першого блоку скрипт захоплює текст «Ролети», вставляє його в заголовок попапа та в приховане поле форми:

Заголовок блоку Ролети автоматично підставлено в приховане поле та заголовок попапа

Аналогічно для всіх п’яти блоків, заголовок змінюється динамічно, форма залишається тією самою.

Крок 5: попапи для успішного надсилання та помилки

Popup Maker дозволяє створити стільки попапів, скільки потрібно. Для статусних повідомлень (успіх / помилка) створіть ще два попапи аналогічно кроку 3. Їх не потрібно прив’язувати до тригерів вручну, ними керує CF7 через JavaScript-події.

Попап помилки, показується, якщо форма не пройшла валідацію. Контент:

1<p style="text-align: center;">
2    <img src="/wp-content/uploads/2019/02/flag.svg" alt="Иконка ошибки" width="177" height="161">
3</p>
4<p style="text-align: center;">
5    Форма заполнена с ошибками. Проверьте сообщения под полями ввода и попробуйте снова.
6</p>

Попап успіху, показується після успішного надсилання. Контент:

1<p style="text-align: center;">
2    <img src="/wp-content/uploads/2019/02/like.svg" alt="Иконка успешной отправки" width="177" height="161">
3</p>
4<p style="text-align: center; padding-top: 15px;">
5    Готово! Ваше сообщение успешно отправлено. Мы свяжемся с вами в ближайшее время.
6</p>
Іконка помилки заповнення форми червоний прапорець

Ці SVG-іконки використовувалися в старому попапі для індикації статусу надсилання. Ви можете замінити їх на свої або залишити як є, вони нейтральні та не прив’язані до конкретного плагіна.

Іконка успішного надсилання форми зелений палець угору

Підключіть відкриття статусних попапів через CF7-події. Додайте цей код у той самий JS-файл cf7-universal-form.js після основного скрипта:

1// Показ попапа при ошибке валидации CF7
2document.addEventListener('wpcf7invalid', function () {
3    $('#popmake-1065').popmake('open');
4}, false);
5 
6// Показ попапа при успешной отправке
7document.addEventListener('wpcf7mailsent', function () {
8    $('#popmake-1068').popmake('open');
9}, false);

Замініть 1065 і 1068 на реальні ID ваших статусних попапів із Popup Maker.

CSS-стилі для статусних попапів, базові, підключаються через Appearance → Customize → Additional CSS або у файл теми:

1/* Попап ошибки */
2div#popmake-1065 {
3    z-index: 99999999;
4}
5div#popmake-1065 .popmake-close {
6    font-size: 30px;
7    color: #9e9e9e;
8}
9 
10/* Попап успеха */
11div#popmake-1068 {
12    z-index: 99999999;
13}
14div#popmake-1068 .popmake-close {
15    font-size: 30px;
16    color: #9e9e9e;
17}

Крок 6: тестування та налагодження

Перед запуском на бойовому сайті перевірте кожен сценарій:

  • Клік по різних блоках, заголовок у попапі та прихованому полі змінюється коректно для кожного блоку.
  • Порожня форма, при надсиланні без заповнення обов’язкових полів показується попап помилки.
  • Повне надсилання, лист надходить, приховане поле містить правильний заголовок блоку.
  • Повторне відкриття, після закриття та повторного відкриття попапу заголовок оновлюється.

Якщо заголовок не підставляється, перевірте в консолі браузера (F12 → Console), що:

  • jQuery-селектор .ForContactForm7HiddenInput h3.elementor-heading-title знаходить елемент на сторінці;
  • Змінна popupId збігається з реальним ID попапу в адмінці;
  • Клас кнопки (.jet-button-order) відповідає реальному класу на сторінці.

Селектори в коді прив’язані до Elementor + JetElements. Якщо ви використовуєте інший конструктор (Gutenberg, Bricks, Oxygen), підставте свої класи та структуру заголовка. Принцип залишається тим самим: кнопка → батьківський блок → заголовок → приховане поле.

Наочну демонстрацію налаштування попап-форми з Contact Form 7 дивіться в цьому відео:

⁉️🤔 Часті запитання

Чи можна обійтися без додаткового плагіна для прихованого поля?

Базовий CF7 не підтримує прихованих полів. DTX, мінімальне й активно підтримуване рішення. Теоретично можна додати <input type="hidden"> через JavaScript прямо в DOM форми, але це менш надійно: скрипт може не встигнути відпрацювати до надсилання, а значення не потрапить у лист, якщо не прив’язане до конкретного тегу CF7. Використовуйте DTX або старий Contact Form 7 Modules, обидва додають підтримку прихованих полів на рівні тегів, і значення гарантовано потрапить у лист.

Чим Popup Maker кращий за старий плагін Popups?

Popup Maker активно оновлюється (остання версія, квітень 2026), має інтеграцію з CF7 та іншими формами «з коробки», підтримує десятки тригерів і правил таргетингу. Старий Popups офіційно закритий WordPress.org у липні 2022 року через неусунуту вразливість і не повинен використовуватися на живих сайтах. Popup Maker, його прямий і безпечний наступник із 780 000+ активних установок. Ключова перевага: вбудована інтеграція з CF7 (події wpcf7mailsent / wpcf7invalid працюють без додаткового коду) та візуальний редактор попапів.

Чому замість attrchange.js використовується MutationObserver?

Бібліотека attrchange.js розповсюджувалася через rawgit.com, цей CDN закритий з 2020 року. Сам репозиторій на GitHub живий, але підключати скрипт звідти незручно. MutationObserver, нативний API браузера, підтримується всіма сучасними браузерами з 2014 року, не потребує зовнішніх залежностей і вирішує ту саму задачу: відстежує зміни атрибутів у DOM. Менше HTTP-запитів, не потрібно оновлювати залежність.

Що робити, якщо заголовок у прихованому полі відображається кирилицею з ієрогліфами в листі?

Перевірте кодування в налаштуваннях CF7 та SMTP-плагіна, має бути UTF-8. Переконайтеся, що тема листа не містить битих символів. Якщо використовуєте SMTP через Gmail API, проблема може бути на стороні кодування заголовка листа, перевірте налаштування плагіна Post SMTP або WP Mail SMTP. Зазвичай джерело проблеми, поштовий сервер, а не скрипт. Перевірте: (1) wp-config.php, рядок define('DB_CHARSET', 'utf8'); без зайвих пробілів до <?php; (2) налаштування SMTP-плагіна, кодування листа UTF-8; (3) тему листа CF7, приберіть нестандартні символи, залиште тільки [dynamichidden-120] без додаткових дужок і лапок.

Чи можна використовувати цей підхід для кількох різних форм на одному сайті?

Так. Створіть окрему форму в CF7 під кожен тип блоку та окремий попап у Popup Maker. У скрипті продублюйте логіку для кожної пари «селектор блоку → ID попапу → ID прихованого поля». Або використовуйте один попап і одну форму, але з різними класами блоків, приховане поле отримуватиме заголовок будь-якого блоку, по якому клікнули, без додаткового налаштування.

Універсальна форма для всіх блоків на сторінці, головний сенс цього рішення. Для зовсім різних типів блоків (товари vs послуги) створіть два набори: форма_товарів + попап_товарів і форма_послуг + попап_послуг. У скрипті достатньо продублювати блок коду з іншими селекторами.

Яку зв’язку плагінів ставити у 2026 році

Універсальна форма з прихованим полем, перевірене рішення для лендингів із десятками однотипних блоків. Замість 30 окремих форм ви налаштовуєте одну, а скрипт сам підставляє заголовок блоку. Стек, який ми рекомендуємо у 2026 році:

  • Contact Form 7, 10+ мільйонів установок, легковагий, безплатний.
  • Dynamic Text Extension (DTX), приховані та динамічні поля, активна підтримка.
  • Popup Maker, попапи з тригерами по кліку та вбудованою інтеграцією з CF7.
  • MutationObserver (нативний JS), відстеження відкриття попапу без зовнішніх бібліотек.

Якщо вам потрібно захоплювати заголовок блоку та передавати його у форму, беріть цей стек. На практиці він працює без збоїв, а налаштування займає годину навіть при базовому знанні WordPress.

🔗 Dynamic Text Extension на WordPress.org | 🔗 Popup Maker на WordPress.org

Редакція
РедакціяРедакційна команда→ Усі публікації

Професійна команда авторів та редакторів, що спеціалізуються на створенні якісного контенту.