Contact Form 7: динамические формы с подгрузкой данных из внешних источников

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

Почему нужны динамические формы в Contact Form 7

Часто в формах требуется использовать данные, которые меняются во времени или зависят от внешних источников. Например:

• Списки городов, которые обновляются из внешнего API;
• Категории товаров или услуг из базы данных;
• Динамические префиксы или параметры для выбора;
• Подгрузка данных на основе выбора пользователя (каскадные списки).

Стандартный CF7 не предоставляет инструменты для такой динамической подгрузки, поэтому часто приходится использовать кастомные решения на JavaScript и PHP.

Как реализовать динамическую подгрузку данных в Contact Form 7

Использование фильтра wpcf7_form_tag для добавления динамических полей

Contact Form 7 позволяет добавлять кастомные поля с помощью фильтра wpcf7_form_tag. Это удобный способ программно формировать список опций для select, checkbox или radio.

Пример: подгрузка списка городов из внешнего API в поле select.

add_filter('wpcf7_form_tag', 'contactform7_ru_add_dynamic_cities', 10, 2);
function contactform7_ru_add_dynamic_cities($tag, $unused) {
    if ($tag['name'] !== 'city-select') {
        return $tag;
    }

    // Запрос к внешнему API для получения списка городов
    $response = wp_remote_get('https://api.example.com/cities');
    if (is_wp_error($response)) {
        return $tag; // Возвращаем стандартное поле при ошибке
    }

    $body = wp_remote_retrieve_body($response);
    $cities = json_decode($body, true);

    if (empty($cities)) {
        return $tag;
    }

    // Формируем опции
    $options = array();
    foreach ($cities as $city) {
        $options[] = $city['name'];
    }

    // Заменяем опции в теге
    $tag['raw_values'] = $options;
    $tag['values'] = $options;
    $tag['labels'] = $options;

    return $tag;
}

В форме CF7 нужно добавить поле с именем city-select типа select:

[select city-select]

Теперь список городов будет подгружаться динамически при рендеринге формы.

Динамическая подгрузка данных через AJAX без перезагрузки страницы

Иногда требуется, чтобы данные в форме обновлялись на лету, например, при выборе одного поля менялся список в другом. Для этого можно использовать AJAX и REST API WordPress.

Пример: каскадный выбор регионов и городов.

1. Добавим в форму CF7 два поля:

[select region-select "Москва" "Санкт-Петербург" "Новосибирск"]
[select city-select id:city-select]

2. Зарегистрируем AJAX обработчик для подгрузки городов:

add_action('wp_ajax_contactform7_ru_get_cities', 'contactform7_ru_get_cities_callback');
add_action('wp_ajax_nopriv_contactform7_ru_get_cities', 'contactform7_ru_get_cities_callback');

function contactform7_ru_get_cities_callback() {
    $region = sanitize_text_field($_POST['region'] ?? '');

    // Для примера статичные данные
    $cities_by_region = [
        'Москва' => ['Москва', 'Зеленоград'],
        'Санкт-Петербург' => ['Санкт-Петербург', 'Пушкин'],
        'Новосибирск' => ['Новосибирск', 'Бердск'],
    ];

    $cities = $cities_by_region[$region] ?? [];

    wp_send_json_success($cities);
}

3. Добавим JavaScript для обработки изменения региона и обновления списка городов:

document.addEventListener('DOMContentLoaded', function () {
    const regionSelect = document.querySelector('select[name="region-select"]');
    const citySelect = document.getElementById('city-select');

    if (!regionSelect || !citySelect) return;

    regionSelect.addEventListener('change', function () {
        const region = this.value;

        fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
            method: 'POST',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            body: new URLSearchParams({
                action: 'contactform7_ru_get_cities',
                region: region
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                citySelect.innerHTML = '';
                data.data.forEach(city => {
                    const option = document.createElement('option');
                    option.value = city;
                    option.textContent = city;
                    citySelect.appendChild(option);
                });
            }
        });
    });
});

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

Подгрузка данных из базы WordPress для Contact Form 7

Если ваши данные хранятся в базе WordPress (например, кастомные типы записей, таксономии или пользовательские таблицы), вы можете подгружать их также с помощью фильтра wpcf7_form_tag.

Пример: подгрузка списка категорий из кастомной таксономии service_category в select:

add_filter('wpcf7_form_tag', 'contactform7_ru_load_service_categories', 10, 2);
function contactform7_ru_load_service_categories($tag, $unused) {
    if ($tag['name'] !== 'service-category') {
        return $tag;
    }

    $terms = get_terms([
        'taxonomy' => 'service_category',
        'hide_empty' => false,
    ]);

    if (is_wp_error($terms) || empty($terms)) {
        return $tag;
    }

    $options = array_map(function($term) {
        return $term->name;
    }, $terms);

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

    return $tag;
}

В форме добавьте поле:

[select service-category]

Так вы всегда будете иметь актуальный список категорий услуг в форме.

Использование плагина Clearfy Pro для оптимизации и расширения Contact Form 7

Для улучшения производительности и расширения функционала Contact Form 7 можно использовать плагин Clearfy Pro. Он поможет:

• Минимизировать загрузку скриптов Contact Form 7 на страницах, где формы не используются;
• Добавить дополнительные хуки и фильтры для кастомизации;
• Повысить безопасность форм и защиту от спама;
• Упростить интеграцию с REST API и внешними сервисами.

Используйте Clearfy Pro как инструмент для поддержания производительности сайта при работе с динамическими формами.

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

Создание динамических форм в Contact Form 7 требует грамотного сочетания PHP и JavaScript. Важно:

• Использовать фильтры CF7 для генерации полей на сервере;
• Применять AJAX и REST API для обновления данных без перезагрузки страниц;
• Обрабатывать ошибки и исключения при работе с внешними источниками;
• Оптимизировать загрузку скриптов с помощью плагинов вроде Clearfy Pro;
• Тестировать формы на разных устройствах и браузерах.

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