Skip to content

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

🛠 Contact Form 7: универсальная форма со скрытым полем и динамическим попапом
Плагины WordPressWordPress
8 мин1,619 слов2 617

🛠 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

Редакция
РедакцияРедакционная команда→ Все публикации

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