В этой статье разберём, как расширить функциональность Contact Form 7 за счёт динамической подгрузки данных в поля формы из внешнего JSON файла. Такой подход полезен, если вам нужно, например, подгружать актуальный список городов, услуг или товаров без необходимости вручную менять форму в админке WordPress.
Почему динамические поля в Contact Form 7 важны
Contact Form 7 по умолчанию создаёт статические формы, где все поля и варианты выбора задаются вручную в интерфейсе. Однако в реальных проектах списки могут часто меняться или быть очень объёмными. Если обновлять форму вручную, это неудобно и неэффективно.
Динамическая подгрузка данных позволяет:
- Автоматизировать обновление вариантов в полях select, radio, checkbox.
- Подгружать данные из внешних источников — базы, API, файлов.
- Сократить время на поддержку форм и снизить вероятность ошибок при ручном обновлении.
Далее рассмотрим, как реализовать динамические поля с загрузкой JSON через AJAX и интегрировать их в Contact Form 7.
Как подгрузить данные из JSON файла в поле select Contact Form 7
Предположим, у вас есть JSON файл cities.json со списком городов:
[{"id":"1","name":"Москва"},{"id":"2","name":"Санкт-Петербург"},{"id":"3","name":"Новосибирск"}]Нужно, чтобы поле выбора города автоматически отображало эти значения.
Шаг 1. Создаём кастомный шорткод для динамического поля
Добавим в файл functions.php темы следующий код:
function contactform7ru_dynamic_select_cities() {
return '<select name="your-city" id="your-city"><option value="">Загрузка...</option></select>';
}
add_shortcode('cf7ru_cities_select', 'contactform7ru_dynamic_select_cities');Этот шорткод служит заглушкой — изначально в форме будет пустой select с сообщением «Загрузка...».
Шаг 2. Подключаем скрипт для AJAX подгрузки JSON и заполнения select
Далее подключим JavaScript, который при загрузке страницы сделает AJAX запрос к JSON и заполнит поле:
function contactform7ru_enqueue_scripts() {
if (is_page() || is_singular()) {
wp_enqueue_script('cf7ru-dynamic-select', get_stylesheet_directory_uri() . '/js/cf7ru-dynamic-select.js', ['jquery'], null, true);
wp_localize_script('cf7ru-dynamic-select', 'cf7ru_ajax_obj', [
'json_url' => get_stylesheet_directory_uri() . '/data/cities.json',
]);
}
}
add_action('wp_enqueue_scripts', 'contactform7ru_enqueue_scripts');Файл cf7ru-dynamic-select.js должен находиться в папке темы /js/, а JSON — в /data/.
Шаг 3. JavaScript код для загрузки и заполнения select
jQuery(document).ready(function($) {
var select = $('#your-city');
if (!select.length) return;
$.getJSON(cf7ru_ajax_obj.json_url, function(data) {
select.empty();
select.append('<option value="">Выберите город</option>');
$.each(data, function(index, city) {
select.append('<option value="' + city.id + '">' + city.name + '</option>');
});
}).fail(function() {
select.empty().append('<option value="">Ошибка загрузки данных</option>');
});
});Как использовать динамическое поле в Contact Form 7
В редакторе формы CF7 добавьте шорткод:
[cf7ru_cities_select]При загрузке страницы поле select автоматически заполнится из JSON. Пользователь сможет выбрать актуальный город.
Дополнительные советы и улучшения
Валидация выбранного значения
Чтобы убедиться, что пользователь выбрал один из предложенных вариантов, добавьте в CF7 скрытое поле с допустимыми значениями или реализуйте серверную проверку через фильтр wpcf7_validate_select. Пример проверки:
add_filter('wpcf7_validate_select*', 'contactform7ru_validate_city_select', 20, 2);
function contactform7ru_validate_city_select($result, $tag) {
$name = $tag->name;
if ($name === 'your-city') {
$value = isset($_POST[$name]) ? sanitize_text_field($_POST[$name]) : '';
$valid_ids = ['1', '2', '3']; // Можно вытянуть динамически или кешировать
if (!in_array($value, $valid_ids)) {
$result->invalidate($tag, 'Пожалуйста, выберите корректный город.');
}
}
return $result;
}Кэширование JSON
Если JSON большой, полезно добавить кэширование с помощью Transients API, чтобы не загружать файл на каждой загрузке.
Расширение на другие типы полей
Аналогично можно реализовать динамическую подгрузку для radio и checkbox, меняя HTML и JS соответственно.
Интеграция с плагинами и инструментами
Если вы используете плагин Clearfy Pro, можно дополнительно оптимизировать загрузку скриптов и исключить лишние запросы для повышения скорости.
Для комплексных проектов стоит обратить внимание на WPCommunity — с ним удобно создавать интерактивные формы с динамическим контентом и пользовательским интерфейсом.