В Contact Form 7 стандартные поля выбора (select, radio, checkbox) часто бывают статичными, и их содержимое прописывается вручную в шорткоде формы. Однако в реальных проектах требуется создавать динамические поля выбора, которые подгружают опции из базы данных WordPress, пользовательских таблиц или внешних API. Это позволяет значительно расширить функционал форм и сделать их удобными и актуальными.
Почему важно использовать динамические поля выбора в Contact Form 7
Статичные поля требуют ручного обновления, что неудобно при большом количестве вариантов или частой смене данных. Например, если у вас список городов, товаров, услуг или сотрудников, поддерживать их вручную долго и чревато ошибками. Динамические поля позволяют автоматически подтягивать актуальные данные и экономить время на обновлениях.
Кроме того, динамические поля делают форму более интерактивной: можно реализовать зависимые списки (например, выбор региона влияет на список городов) или загружать данные по запросу.
Способы добавления динамических полей выбора в Contact Form 7
Использование фильтра wpcf7_form_tag_filter
Contact Form 7 предоставляет фильтр wpcf7_form_tag_filter, который позволяет программно изменять параметры поля формы перед выводом. С его помощью можно подставить динамический список значений в поле select или checkbox.
Пример добавления динамического select поля с городами из таблицы wp_terms:
add_filter('wpcf7_form_tag_filter', 'contactform7ru_dynamic_select_cities', 10, 2);
function contactform7ru_dynamic_select_cities($tag, $unused) {
if ($tag->name != 'city') return $tag;
global $wpdb;
$cities = $wpdb->get_col("SELECT name FROM {$wpdb->prefix}terms WHERE taxonomy = 'city'");
$tag->values = $cities;
$tag->labels = $cities;
return $tag;
}В форме Contact Form 7 необходимо создать поле select с именем city:
[select city]Этот код автоматически заменит значения поля списком городов из базы WordPress.
Использование плагина Contact Form 7 Dynamic Text Extension
Плагин Contact Form 7 Dynamic Text Extension позволяет создавать динамические поля, в том числе скрытые и текстовые, с значениями из URL, метаданных пользователя и PHP-функций.
Хотя плагин ориентирован на текстовые поля, его можно использовать в связке с кастомными фильтрами для динамических select.
Пример реализации зависимого динамического выбора (регион и город)
Допустим, нужно сделать два поля выбора: регион и город. При выборе региона список городов обновляется динамически.
Это можно реализовать через AJAX и дополнительный PHP-обработчик в WordPress.
Шаг 1: Создаем поля в форме:
[select region include_blank "Выберите регион"]
[select city include_blank "Выберите город"]Шаг 2: Добавляем JavaScript для AJAX-запроса:
document.addEventListener('DOMContentLoaded', function() {
const regionSelect = document.querySelector('select[name="region"]');
const citySelect = document.querySelector('select[name="city"]');
regionSelect.addEventListener('change', function() {
const region = this.value;
citySelect.innerHTML = '<option>Загрузка...</option>';
fetch('/wp-json/contactform7ru/v1/cities?region=' + region)
.then(response => response.json())
.then(data => {
citySelect.innerHTML = '';
data.forEach(function(city) {
const option = document.createElement('option');
option.value = city;
option.textContent = city;
citySelect.appendChild(option);
});
});
});
});Шаг 3: Регистрируем REST API endpoint для возврата городов по региону:
add_action('rest_api_init', function () {
register_rest_route('contactform7ru/v1', '/cities', array(
'methods' => 'GET',
'callback' => 'contactform7ru_get_cities_by_region',
));
});
function contactform7ru_get_cities_by_region($request) {
$region = sanitize_text_field($request->get_param('region'));
// Здесь должна быть логика выборки городов по региону из базы
// Пример статических данных для демонстрации
$data = [
'Центральный' => ['Москва', 'Тула', 'Ярославль'],
'Северо-Западный' => ['Санкт-Петербург', 'Псков', 'Мурманск'],
];
return isset($data[$region]) ? $data[$region] : [];
}Советы по безопасности и производительности
При работе с динамическими данными всегда нужно фильтровать и валидировать входящие параметры, чтобы избежать SQL-инъекций и XSS-атак. Используйте встроенные функции WordPress для безопасности.
Если данных много, подумайте об использовании кеширования результатов запросов для снижения нагрузки на сервер.
Полезные плагины для расширения функционала Contact Form 7
- Contact Form 7 Dynamic Text Extension — для динамических текстовых полей.
- Flamingo — для хранения отправленных данных форм в базе WordPress.
- CF7 Smart Grid Design Extension — для удобного построения сложных форм с сеткой.
Кроме того, можно рассмотреть плагин Clearfy Pro для оптимизации и безопасности сайта с Contact Form 7.
Заключение
Добавление динамических полей выбора в Contact Form 7 — задача, требующая базовых знаний PHP, JavaScript и WordPress API. Используя фильтры Contact Form 7 и REST API WordPress, вы можете создавать гибкие, удобные и актуальные формы, которые значительно улучшат пользовательский опыт на вашем сайте.
Приведенные примеры легко адаптируются под любые данные и позволяют реализовать даже сложные зависимости между полями.