Как автоматически подставлять динамические данные в формы Contact Form 7

Что такое динамические данные и какой способ выбрать

Динамическими называем данные, которые меняются в зависимости от страницы или действий посетителя. Посмотрим на два примера.

Берём данные со страницы

На сайте «Триггермед» открыт товар «А15». Нажимаем «Заказать» — появляется форма, в которой уже есть фраза «Ожидаю коммерческое предложение на товар - А15». Название взято со страницы: посетитель его не вводил.

Берём данные из выбора посетителя

На странице гардеробных «Мебель Марс» есть несколько тарифов. Нажимаем «Рассчитать стоимость» в карточке «Стандарт». Открывается общая форма, а в комментарии уже указаны «Гардеробные» и тариф «Стандарт». Здесь название услуги известно заранее, а нужный тариф определяется по нажатой кнопке.

• Данные известны при открытии страницы. Например, название услуги или товара. Начните со способа 1: дополнительный плагин получает значение из WordPress и заполняет поле.
• Данные зависят от действия посетителя. Например, от выбора тарифа или расчёта в калькуляторе. Подойдёт способ 2: скрипт на JavaScript обновляет поле после этого действия.

Оба способа позволяют передавать несколько значений. Различие не в количестве параметров, а в том, когда они становятся известны.

Способ 1. Подставляем данные страницы через плагин Dynamic Text Extension

Сначала подставим название товара «А15», затем добавим к нему фразу «Ожидаю коммерческое предложение на товар — …».

Плюсы и минусы способа с плагином

Dynamic Text Extension, далее — DTX, получает данные страницы и подставляет их в поля CF7.

Шаг 1. Установите дополнительный плагин

В панели WordPress откройте «Плагины → Добавить новый», найдите Contact Form 7 — Dynamic Text Extension, установите и активируйте его.

DTX умеет использовать шорткоды. Шорткод — короткая команда, которую WordPress заменяет результатом её выполнения. Например, команда получения заголовка возвращает название открытой страницы. У DTX есть готовые команды: для первого примера писать собственную не нужно.

Шаг 2. Добавьте поле в форму

Откройте список форм Contact Form 7, выберите нужную и перейдите на вкладку «Шаблон формы». Не удаляя существующие контактные поля и кнопку отправки, добавьте:

<label>Название товара
[dynamic_text product-title "CF7_get_post_var key='post_title'"]
</label>

Разберём запись:

• <label>Название товара…</label> — подпись поля. Для услуги можно написать «Название услуги».
• dynamic_text — тип поля DTX: однострочное поле с автоматически подставленным значением.
• product-title — имя поля. Оно понадобится, чтобы добавить значение в письмо. Можно выбрать другое имя, но дальше использовать его одинаково.
• CF7_get_post_var — встроенный шорткод DTX, который получает данные записи WordPress.
• key='post_title' — указание получить заголовок. Это имя поля WordPress, а не текст, который нужно заменить названием своего товара.

В терминологии CF7 вся запись в квадратных скобках — form-tag, или тег формы. Имя product-title затем используется в письме как mail-tag [product-title]; оно должно совпадать в форме и письме. Тип поля и команду получения заголовка в письме не повторяют. Подробнее — в документации CF7 о синтаксисе тегов.

Шаг 3. Откройте страницу с формой

Сохраните форму и откройте страницу товара или услуги, где она размещена. Если формы на странице ещё нет, добавьте блок Contact Form 7 и выберите её. Другой вариант — скопировать шорткод формы из её редактора и вставить в блок WordPress «Шорткод».

В нашем примере поле получит «А15» — название товара в WordPress. Разместите ту же форму на другой странице и проверьте, что название изменилось.

Шаг 4. Добавьте значение в письмо

Вернитесь в редактор формы, откройте вкладку «Письмо» и добавьте в тело сообщения строку:

Товар или услуга: [product-title]

Сохраните настройки, отправьте тестовую заявку и проверьте, что название товара появилось в письме.

Как подставить не только название, но и готовую фразу

Встроенного CF7_get_post_var достаточно для названия товара. Чтобы получить полноценную фразу «Ожидаю коммерческое предложение на товар — [название]», зарегистрируем собственный шорткод: он возьмёт название, добавит постоянный текст и вернёт готовое сообщение.

Код шорткода разместим в отдельном плагине, а не в редакторе формы:

1. Откройте папку wp-content/plugins сайта.
2. Создайте папку ctr99-form-data, а внутри — файл ctr99-form-data.php.
3. Вставьте в файл код ниже.
4. В панели WordPress откройте «Плагины» и активируйте «Данные для формы CF7».

<?php
/**
 * Plugin Name: Данные для формы CF7
 */

add_action('init', function () {
    add_shortcode('ctr99_product_request', function () {
        $title = get_post_field('post_title', get_the_ID(), 'raw');

        return 'Ожидаю коммерческое предложение на товар — '
            . sanitize_text_field($title) . '.';
    });
});

add_shortcode() регистрирует команду ctr99_product_request. Строка с get_post_field() получает исходное название текущей страницы. sanitize_text_field() очищает его от разметки, а return возвращает готовую фразу. Название товара в этот код вручную вписывать не нужно.

Теперь добавьте в шаблон формы многострочное поле:

<label>Ваш запрос
[dynamic_textarea product-message "ctr99_product_request"]
</label>

dynamic_textarea — многострочное динамическое поле. В русском переводе название кнопки его добавления может быть неочевидным: ориентируйтесь на этот тип в записи поля. product-message — имя поля, а ctr99_product_request — команда, которая подготовит текст.

На вкладке «Письмо» добавьте Запрос: [product-message]. Если заменили первоначальное поле новым, уберите из письма старый тег [product-title]. Откройте страницу товара и проверьте готовую фразу.

Что проверить, если в названии есть кавычки

В названиях с кавычками вместо символов может появиться ". В названии «А15» кавычек нет, поэтому один этот товар не проверяет такой случай. Если в вашем каталоге есть название с кавычками или знаком &, проверьте и его: символы должны отображаться так же, как в названии товара.

Код выше рассчитан на такую проверку. Он передаёт в многострочное поле обычный текст, а DTX сам подготавливает его для безопасного вывода. Не добавляйте в этот пример повторную обработку кавычек и не отключайте защиту плагина.

Как применить первый способ к другим данным

Название услуги, мероприятия или статьи

Если нужный текст — заголовок открытой страницы, оставьте post_title. Поменяйте подпись поля и, при необходимости, фразу в собственном шорткоде. Например: «Хочу записаться на мероприятие — …».

Цена или характеристика в отдельном поле

WordPress может хранить дополнительные данные записи в метаполях. У каждого такого поля есть ключ — техническое имя. Для учебного примера используем поле demo_price со значением 125000. Для чтения такого поля нужен другой встроенный шорткод:

[dynamic_text product-price "CF7_get_custom_field key='demo_price'"]

1. Узнайте технический ключ нужного поля в настройках, через которые оно создано, или у разработчика сайта. Подпись «Цена» в редакторе не обязательно совпадает с ключом.
2. В настройках DTX найдите раздел Post Meta Access и список Meta Key Allow List. Добавьте нужный ключ: в нашем примере — demo_price. Сохраните настройки.
3. Вставьте запись поля в форму, заменив demo_price своим ключом. В письмо добавьте Цена: [product-price].
4. Откройте страницу, где это дополнительное поле заполнено, и проверьте значение.

Этот пример подходит для простого текстового или числового значения. Цена магазина со скидками и вариантами товара может рассчитываться отдельно: один произвольный ключ не заменит этот расчёт. Подробнее — в документации DTX о получении значений дополнительных полей и ограничении доступа.

Способ 2. Подставляем выбор посетителя через JavaScript

На сайте «Мебель Марс» карточки тарифов выводятся PHP-шаблоном темы. В каждой карточке есть ссылка «Рассчитать стоимость». Она открывает одно общее окно с формой CF7. Нужно передать в эту форму название типа мебели и тариф из нажатой карточки.

Для сайта на блочном редакторе ниже приведён отдельный вариант.

Плюсы и минусы способа с JavaScript

Где находятся кнопки, форма и скрипт

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

Шаг 1. Определяем поле, в которое запишем данные

В нашем окне уже есть поле CF7 с именем textarea-834. В редакторе этой формы запись поля выглядит так:

[textarea textarea-834 rows:5 cols:33 class:form-control]

textarea — многострочное поле, textarea-834 — его имя. Если в вашей форме поле называется иначе, используйте его имя и в скрипте, и в шаблоне письма. Создавать второе поле не нужно.

В файле template-parts/form/form-tariff.php проверяем идентификатор окна: id="formTariff". Он нужен в двух местах: ссылка открывает это окно, а скрипт ищет поле внутри него. Разметку окна и шорткод существующей формы оставляем на месте.

Шаг 2. Передаём данные в ссылку из шаблона тарифов

Открываем template-parts/block-rates.php. В нём карточки выводятся по очереди в цикле foreach ($rates as $rate). Название типа мебели уже находится в $term_title, название текущего тарифа — в $rate->name. Не вписываем «Гардеробные» и «Стандарт» вручную: используем эти значения шаблона.

Внутри карточки находим ссылку «Рассчитать стоимость» и приводим её к такому виду:

<a href="#"
   class="btn-red js-tariff-request"
   data-bs-toggle="modal"
   data-bs-target="#formTariff"
   data-title="<?php echo esc_attr($term_title); ?>"
   data-rate="<?php echo esc_attr($rate->name); ?>">
    Рассчитать стоимость
</a>

Что здесь важно:

• btn-red сохраняет оформление ссылки. Добавленный класс js-tariff-request отмечает именно те ссылки, которые должен обрабатывать наш скрипт.
• data-bs-toggle="modal" и data-bs-target="#formTariff" открывают уже созданное окно Bootstrap.
• data-title хранит тип мебели, например «Гардеробные». В начале шаблона $term_title получается из названия открытого раздела.
• data-rate хранит название тарифа текущей карточки. Для каждой карточки цикл подставит своё значение.
• esc_attr() обрабатывает значение для HTML-атрибута: кавычки в названии не нарушат разметку ссылки.

Шаг 3. Обновляем существующий файл JavaScript

Откройте assets/js/parameter-substitution-form-tariff.js. Используйте отдельный класс для тарифных кнопок и ищите поле только внутри нужного окна.

Замените текущий обработчик подстановки этим кодом, а не добавляйте второй рядом:

document.addEventListener('click', function (event) {
    const button = event.target.closest('.js-tariff-request');
    if (!button) return;
    event.preventDefault();

    const container = document.querySelector('#formTariff');
    if (!container) return;

    const field = container.querySelector('textarea[name="textarea-834"]');
    const title = button.dataset.title;
    const rate = button.dataset.rate;
    if (!field || !title || !rate) return;

    field.value = 'Пожалуйста, рассчитайте мне точную стоимость изготовления '
        + 'типа мебели «' + title + '», тариф «' + rate + '».';

    field.dispatchEvent(new Event('input', { bubbles: true }));
    field.dispatchEvent(new Event('change', { bubbles: true }));
});

Разберём, что делает скрипт:

1. closest('.js-tariff-request') находит ссылку тарифа, даже если посетитель нажал на вложенный текст или иконку. Нажатия на остальные элементы он пропускает.
2. event.preventDefault() отменяет переход по href="#". За открытие окна по-прежнему отвечает Bootstrap.
3. querySelector('#formTariff') находит окно, а следующий поиск — поле textarea-834 внутри него. Соседние формы не меняются.
4. button.dataset.title и button.dataset.rate читают два значения из нажатой ссылки.
5. field.value собирает фразу и записывает её в поле. События input и change сообщают другим обработчикам, что значение изменилось.

Убедитесь, что файл JavaScript подключён к странице. После изменения обновите страницу; если используется кеширование, очистите кеш.

Шаг 4. Проверяем подстановку и письмо

На странице гардеробных нажимаем «Рассчитать стоимость» в карточке «Стандарт». В открывшейся форме должен появиться текст:

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

Закрываем окно и выбираем «Эконом»: название тарифа в этой же форме должно измениться.

В редакторе этой формы CF7 на вкладке «Письмо» проверяем, что в тело сообщения добавлено значение поля:

Запрос посетителя: [textarea-834]

Отправьте тестовую заявку со своего сайта и проверьте, что в письме указан последний выбранный тариф. Если поле не заполняется, сверьте класс ссылки js-tariff-request, идентификатор окна formTariff и имя поля textarea-834.

Если у вас блочный редактор WordPress

Тогда вместо правки PHP-шаблона разместите элементы через редактор страницы. Скрипт выше подходит и для формы прямо на странице — без всплывающего окна:

1. Добавьте блок «Группа», а внутрь — блок Contact Form 7 с нужной формой. В настройках группы, в разделе «Дополнительно», задайте HTML-якорь formTariff без знака #.
2. Над группой добавьте блок «Произвольный HTML» с кнопками из примера ниже. Здесь значения записываются прямо в атрибуты, без PHP.
3. В форме используйте имя поля textarea-834 либо замените его в скрипте и шаблоне письма на своё.
4. Разместите обработчик из шага 3 в отдельном файле JavaScript вашей темы и подключите его к странице. Пример подключения приведён ниже.

<button type="button" class="js-tariff-request"
    data-title="Гардеробные" data-rate="Эконом">
    Выбрать Эконом
</button>

<button type="button" class="js-tariff-request"
    data-title="Гардеробные" data-rate="Стандарт">
    Выбрать Стандарт
</button>

Если у вашей темы такого скрипта ещё нет, создайте в ней файл assets/js/parameter-substitution-form-tariff.js с кодом из шага 3. В functions.php этой темы добавьте подключение внутри существующего PHP-кода:

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'parameter-substitution-form-tariff',
        get_stylesheet_directory_uri()
            . '/assets/js/parameter-substitution-form-tariff.js',
        [],
        '1.0.0',
        true
    );
});

В примере без окна атрибуты data-bs-toggle и data-bs-target не нужны. Если окно уже сделано вашим конструктором, сохраняйте его способ открытия и задайте formTariff контейнеру с формой.

Как передать свои данные

Другая услуга или вариант

В PHP-шаблоне подставьте в data-title и data-rate переменные, которыми уже выводятся нужные названия. В блочном редакторе измените значения атрибутов у кнопок. Постоянную часть сообщения замените в строке field.value, например на «Хочу записаться: …».

Предварительная сумма

Для отдельного примера добавим условное значение data-estimate="45 000 ₽" к ссылке или кнопке. В скрипте после формирования field.value, перед строками с событиями, вставьте:

const estimate = button.dataset.estimate;
if (estimate) {
    field.value += ' Предварительная сумма: ' + estimate + '.';
}

Сумма попадёт в то же сообщение и в письмо через [textarea-834]. Если у следующей кнопки нет суммы, прежняя не останется: основной скрипт сначала заново формирует сообщение.

Результат калькулятора

После расчёта калькулятор должен обновить data-estimate у кнопки или сразу значение поля. Место для этого зависит от его кода. Здесь мы показываем передачу готового результата, а не создание калькулятора.

Если ваш сайт загружает форму после нажатия, заполняйте поле после её загрузки.

Что проверить перед использованием на рабочем сайте

• Правильные данные. Для первого способа откройте две разные страницы. Для второго — нажмите разные кнопки и повторите выбор. В поле и письме должно быть последнее нужное значение.
• Кавычки и специальные символы. Проверьте название с кавычками и знаком &. Посетитель не должен видеть вместо них служебные обозначения.
• Другие формы и телефон. Убедитесь, что соседние формы не меняются, кнопки доступны, а текст можно прочитать на узком экране.
• Кеширование. Повторите проверку с обычными настройками кеша сайта: данные разных страниц не должны смешиваться.
• Письмо. Не ограничивайтесь просмотром поля. Отправьте заявку на тестовый адрес и убедитесь, что значение попало в нужное место письма.

Подведём итоги

Если данные уже есть у открытой страницы, их удобно получить через DTX. Для заголовка и простого дополнительного поля достаточно встроенных шорткодов; собственный нужен для своей фразы или обработки значения.

Если значение зависит от выбора посетителя, используйте JavaScript. Для такой задачи не нужен дополнительный плагин динамических полей: кнопка передаёт данные, скрипт записывает их в форму. Мы показали названия и тарифы, но так же можно передать другую услугу, вариант доставки или готовый результат расчёта.

В обоих случаях последний шаг один: добавить значение поля в шаблон письма и проверить заявку целиком.

Инструкция актуальна для WordPress 7.1.2, Contact Form 7 6.1.7 и Dynamic Text Extension 5.0.7.