Как использовать динамические данные в форме Contact Form 7? | Кейсы | CTR99 | Кейсы

Contact Form 7 (CF7) — это популярный бесплатный плагин для CMS WordPress, предназначенный для создания и управления контактными формами на сайте. В репозитории WordPress, на момент написания, плагин имеет оценку 4/5 звезд и количество установок более 10 млн. Узнать больше информации о плагине можно на официальном сайте.

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

"Оживлять" форму мы будем на примере сайтов двух наших клиентов: Триггермед и Мебель «Марс». На обоих сайтах стояла схожая задача по добавлению динамических параметров в формы обратной связи, которые вызываются на разных страницах. Несмотря на однотипность задачи, для каждого сайта мы решили её по-разному.

Для выполнения задачи на Триггермеде мы использовали плагин Contact Form 7 — Dynamic Text Extension, а для Мебель "Марс" чистый JavaScript. Решения равнозначны и отличаются только подходом, рассмотрим каждое.

Способ 1: Contact Form 7 — Dynamic Text Extension и регистрация шорткода

Contact Form 7 — Dynamic Text Extension — это бесплатное расширение для плагина Contact Form 7, которое добавляет возможность создавать динамические поля в формах. Благодаря плагину можно получать в форме параметры URL, куки, данные пользователя, кастомные поля. На момент написания, плагин имеет более 100 тысяч установок и оценку 4.7 балла в репозитории WordPress. Обратите внимание, что данный плагин создан сторонним разработчиком и не имеет прямого отношения к CF7, поэтому на официальном сайте вы не найдёте упоминания о нём.

Задача - Добавить в форму название товара

Триггермед - компания, которая занимается продажей медицинского оборудования. Задача стояла следующая: на странице конкретного товара требовалось добавить форму обратной связи, в которую бы подставлялся текст: "Ожидаю коммерческое предложение на товар - [Название товара].". Разумеется, название товара является динамическим параметром и меняется в каждом из товаров.

Устанавливаем плагин

В репозитории расширений WP находим Contact Form 7 — Dynamic Text Extension, устанавливаем и активируем. Если процесс прошел успешно, то на вкладке плагина появится дополнительный пункт меню Dynamic Text Extension.

После установки в настройках форм Contact Form 7 появится возможность использовать дополнительные поля.

До активации плагина

После активации плагина

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

Мы будем использовать поле [dynamic_textarea* dynamic_textarea-546 rows:5 cols:33 class:form-control "ctr99_display_product_title"], поясним параметры, которые в нем используем:

dynamic_textarea - тип поля;
dynamic_textarea-546 - уникальный идентификатор поля, который будет передаваться в форме;
rows:5 cols:33 - ширина и высота поля ввода;
class:form-control - класс для стилизации поля;
"ctr99_display_product_title" - текст, который будет выводиться в форме, шорткод. В следующем шаге подробно рассмотрим его регистрацию.

Регистрируем шорткод для вывода названия товара

Чтобы вывести нужный текст в поле формы мы использовали шорткод. Если не знакомы с функционалом шорткодов в WP, то рекомендуем заглянуть в документацию.

В коде мы создаём шорткод [ctr99_display_product_title], который выводит нужную фразу, динамично подставляя к ней название товара с учетом названий с кавычками и без.

                
//Шорткод для отображения в форме названия товара
function ctr99_page_title_shortcode_init() {
    add_shortcode('ctr99_display_product_title', 'ctr99_page_title_shortcode');
}
add_action('init', 'ctr99_page_title_shortcode_init');

function ctr99_page_title_shortcode() {
    $page_title = get_the_title();
    $escaped_title = ' Ожидаю коммерческое предложение на товар - ' . htmlspecialchars($page_title, ENT_QUOTES | ENT_HTML401, 'UTF-8') . '.';
    return htmlspecialchars_decode($escaped_title, ENT_QUOTES);
}

Используем шорткод в форме

Добавив нужный шорткод мы снова возвращаемся к работе с формой, а конкретнее в настройки Contact Form 7 - Dynamic Text Extension. Находим поле "User Data Key Allow List" и добавляем туда название нашего шорткода. На этом поле остановимся чуть подробнее, оно ограничивает доступ к конфиденциальным данным пользователей (логины, почта, роли) через формы сайта. По умолчанию все ключи заблокированы для безопасности, на свое усмотрение мы можем добавлять необходимые данные. Чтобы узнать все подробности, лучше обратится к документации.

Проверяем работу

Как мы помним, в форму мы уже добавили название шорткода, поэтому можем переходить к проверке работоспособности нашего решения.

Если ошибок не допущено, в поле комментария формы появится статичный текст и динамическое название товара. Проверим:

Таким образом, для Триггермеда мы выполнили задачу. Она достаточно простая и требует лишь изучения плагина, расширяющего работу формы Contact Form 7. Перейдем к следующему, чуть более сложному и динамичному варианту.

Способ 2: JavaScript

К этому решению мы пришли после того, как поняли, что предыдущий вариант не работает, когда на странице может быть несколько динамичных параметров.

Задача - добавить в форму название тарифа по которому был клик

Мебель «Марс» - занимаются производством корпусной мебели на заказ. Задача стояла следующая: на странице конкретной услуги, например, на производстве гардеробных выводятся тарифы, по которым можно произвести расчет стоимости данного типа мебели. Проще говоря, при клике на тариф 'Стандарт' должна открыться форма с текстом "Пожалуйста, рассчитайте мне точную стоимость изготовления типа мебели «Гардеробные», тариф «Стандарт».", в данном тексте несколько динамичных параметров - тип мебели и название тарифа. Тип мебели мы можем получить при загрузке страницы. А вот тариф становится известен только при клике на конкретный тариф.

Чтобы реализовать данный функционал нам требуется доработка кода. Рассмотрим процесс:

Решение

Наш блок представляет из себя ряд из возможных тарифов для изготовления данного типа мебели. Чтобы отслеживать клик на конкретный тариф мы добавим динамичные параметры для кнопок.

href="#" - заглушка для ссылки, чтобы не было перехода;
class="btn-red" - стилизуем через CSS класс;
data-bs-toggle="modal" - активация модального окна;
data-bs-target="#formTariff" - обращаемся к конкретному модальному окну, с айди formTariff;
data-title=" " - передаем название таксономии (в шаблоне получаем ее), например, "Гардеробные".
data-rate=" " - передаем название конкретного тарифа, также получаем в шаблоне. Для примера "Премиум".

    
<a href="#" class="btn-red" data-bs-toggle="modal" data-bs-target="#formTariff"
data-title="<?= $term_title; ?>" data-rate="<?= $rate['name']; ?>">Рассчитать стоимость</a>

Чтобы избежать недосказанности, мы пояснили все параметры ссылки, но для динамики нам обязательно нужны только два: data-rate и data-title, в которых мы передаем название типа мебели и тариф. В нашем случае мы используем php переменные, чтобы обеспечить максимальную динамику в передаче данных, в своем коде вы можете передавать и просто строку.

Отслеживаем клик

Данный код мы запускаем после загрузки страницы и отслеживаем клик на ссылку с .btn-red. Затем, из дата-атрибутов получаем название типа мебели и название тарифа. Полученные данные подставляем в шаблонный текст и вставляем в форму из CF7.

    
document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll(".btn-red").forEach(button => {
        button.addEventListener("click", function () {
            let furnitureType = this.getAttribute("data-title");
            if (!furnitureType) return;

            let rateName = this.getAttribute("data-rate");
            if (!rateName) return;

            let dynamicText = `Пожалуйста, рассчитайте мне точную стоимость изготовления типа мебели «${furnitureType}», тариф «${rateName}».`;

            let textarea = document.querySelector('[name="textarea-834"]');
            if (textarea) {
                textarea.value = dynamicText;
                textarea.dispatchEvent(new Event("change")); // Принудительное обновление CF7
            }
        });
    });
});

Таким образом, мы получаем необходимый функционал:

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

Таким образом, мы реализовали передачу динамичных параметров в веб-формах несколькими методами: через расширение для плагина Contact Form 7 — Dynamic Text Extension и на чистом JavaScript. Оба способа могут быть использованы в зависимости от задачи. Если на сайте активно поддерживаются шорткоды и нужно передавать не меняющуюся у пользователя информацию, например, заголовок страницы, то можно использовать шорткод. Если хочется больше динамики и нет желания устанавливать лишние плагины, то лучше написать небольшой JS-скрипт.