Contact Form 7: динамические поля с помощью шорткодов и фильтров

Contact Form 7 — один из самых популярных плагинов для создания форм в WordPress. Часто возникает необходимость не просто отображать статичные поля, а создавать динамические поля, которые меняют содержание в зависимости от контекста, пользователя или других параметров. В этой статье мы подробно рассмотрим, как создавать динамические поля в Contact Form 7 с помощью шорткодов и фильтров, а также приведем практические примеры кода.

Что такое динамические поля в Contact Form 7 и зачем они нужны

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

В Contact Form 7 нет встроенного механизма для динамического изменения значений полей, но благодаря WordPress API и возможностям плагина мы можем реализовать это с помощью шорткодов и хуков.

Рассмотрим самые востребованные сценарии:

• Подстановка параметров из URL в поля формы;
• Загрузка списка значений из базы данных для селектов и чекбоксов;
• Динамическое изменение placeholder и значений полей в зависимости от условий;
• Использование пользовательских шорткодов для генерации содержимого в форме.

Использование шорткодов для динамического содержимого в Contact Form 7

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

Пример: создадим шорткод [cf7_user_ip], который выводит IP-адрес пользователя, и внедрим его в форму.

function contactform7_ru_user_ip_shortcode() {
    return $_SERVER['REMOTE_ADDR'] ?? '';
}
add_shortcode('cf7_user_ip', 'contactform7_ru_user_ip_shortcode');

function contactform7_ru_do_shortcode_in_form($content) {
    if (has_shortcode($content, 'cf7_user_ip')) {
        $content = do_shortcode($content);
    }
    return $content;
}
add_filter('wpcf7_form_elements', 'contactform7_ru_do_shortcode_in_form');

Теперь в любом текстовом поле формы можно написать [cf7_user_ip], и пользователю отобразится его IP-адрес. Это простой способ динамической подстановки.

Динамическая подстановка значений из URL в поля Contact Form 7

Очень часто нужно, чтобы форма автоматически подставляла значение из параметров GET-запроса, например, ?utm_source=google. Для этого используем скрытое поле и фильтр wpcf7_form_tag.

function contactform7_ru_populate_fields($tag) {
    if ($tag['name'] == 'utm_source') {
        $value = isset($_GET['utm_source']) ? sanitize_text_field($_GET['utm_source']) : '';
        $tag['values'] = [$value];
    }
    return $tag;
}
add_filter('wpcf7_form_tag', 'contactform7_ru_populate_fields');

В самой форме добавьте скрытое поле:

[hidden utm_source]

Теперь при загрузке страницы поле автоматически заполнится значением из URL. Аналогично можно подставлять другие параметры.

Расширенный пример: динамический список из базы данных

Предположим, нужно в форме вывести список категорий товаров из таблицы WordPress. Для этого используем фильтр wpcf7_form_tag и создадим поле типа select.

function contactform7_ru_dynamic_select($tag) {
    if ($tag['name'] != 'product_category') {
        return $tag;
    }

    global $wpdb;
    $categories = $wpdb->get_results("SELECT term_id, name FROM {$wpdb->prefix}terms JOIN {$wpdb->prefix}term_taxonomy ON {$wpdb->prefix}terms.term_id = {$wpdb->prefix}term_taxonomy.term_id WHERE taxonomy = 'product_cat' AND parent = 0");

    $options = [];
    foreach ($categories as $cat) {
        $options[] = $cat->name;
    }

    $tag['raw_values'] = $options;
    $tag['values'] = $options;

    return $tag;
}
add_filter('wpcf7_form_tag', 'contactform7_ru_dynamic_select');

В форме укажите:

[select product_category]

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

Как создавать динамические placeholder и значения полей

Иногда нужно изменить не только значение поля, но и его placeholder. Для этого можно использовать JavaScript, внедренный в форму. Contact Form 7 позволяет добавлять кастомные скрипты через хуки или в шаблоне темы.

function contactform7_ru_add_custom_script() {
    ?>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const inputPhone = document.querySelector('input[name="your-phone"]');
            if (inputPhone) {
                inputPhone.placeholder = 'Введите номер телефона в формате +7 (999) 999-99-99';
            }
        });
    </script>
    <?php
}
add_action('wp_footer', 'contactform7_ru_add_custom_script');

Так можно гибко управлять атрибутами полей, не меняя HTML формы.

Полезные плагины для расширения динамических возможностей Contact Form 7

Если хочется использовать готовые решения, обратите внимание на следующие плагины:

• Contact Form 7 Dynamic Text Extension — позволяет добавлять динамические текстовые поля, подставлять значения из URL, кук и т.д.;
• Contact Form 7 Conditional Fields — для создания условных полей, которые показываются или скрываются в зависимости от выбора пользователя;
• Contact Form 7 to Database Extension — сохраняет отправленные формы в базу, что полезно при работе с динамическими данными.

Советы по отладке динамических полей и производительности

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

• Всегда фильтруйте и экранируйте пользовательские данные, особенно из URL и базы;
• Минимизируйте количество запросов к базе при загрузке формы, кешируйте результаты при необходимости;
• Проверяйте, что шорткоды и фильтры не конфликтуют с другими плагинами и темой;
• Используйте встроенные возможности Contact Form 7, чтобы не ломать стандартный функционал;
• Тестируйте формы на разных устройствах и браузерах, особенно если используете кастомный JavaScript.