WPForms: динамические поля выбора из списка и автоподстановка значений

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

Почему динамические списки важны в WPForms

Стандартные поля выбора (select) в WPForms обычно заполняются вручную в настройках формы, что удобно для простых вариантов. Но когда речь идет о большом количестве вариантов или зависимости от других данных — нужен динамический подход. Например, список городов, который зависит от выбранной страны, или автозаполнение адреса по почтовому индексу.

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

В этой статье рассмотрим, как реализовать динамические select-поля и автоподстановку значений в WPForms с помощью пользовательских PHP-функций и AJAX.

Создание динамического списка выбора в WPForms

WPForms позволяет фильтровать поля формы перед их отображением, используя фильтр wpforms_field_properties. Его можно использовать для динамической замены вариантов select-поля.

Рассмотрим пример, где варианты select-поля с ID 1 подгружаются из массива, который может быть получен из базы или API.

add_filter('wpforms_field_properties', 'wpformsdinamic_select_options', 10, 3);
function wpformsdinamic_select_options($properties, $field, $form_data) {
    if ($field['id'] === 1 && $field['type'] === 'select') {
        // Пример данных, обычно получаем из базы или API
        $options = [
            'rus' => 'Россия',
            'usa' => 'США',
            'de' => 'Германия',
        ];

        // Формируем массив для WPForms
        $choices = [];
        foreach ($options as $key => $label) {
            $choices[] = [
                'label' => $label,
                'value' => $key
            ];
        }

        $properties['choices'] = $choices;
    }
    return $properties;
}

В этом коде мы динамически заменяем список выбора для поля с ID 1 на страны. Можно легко заменить источник данных на получение из таблицы wp_options, кастомной таблицы или внешнего API.

Связанные поля: зависимый список городов по выбранной стране

Чтобы реализовать зависимость одного select-поля от значения другого (например, выбор страны меняет список городов), понадобится AJAX. WPForms поддерживает обработку AJAX-запросов, и мы можем создать собственный обработчик для подгрузки городов.

1. Добавим обработчик AJAX в functions.php:

add_action('wp_ajax_wpformsdinamic_get_cities', 'wpformsdinamic_get_cities_callback');
add_action('wp_ajax_nopriv_wpformsdinamic_get_cities', 'wpformsdinamic_get_cities_callback');

function wpformsdinamic_get_cities_callback() {
    $country = sanitize_text_field($_POST['country'] ?? '');

    // Пример данных городов по странам
    $cities_by_country = [
        'rus' => ['Москва', 'Санкт-Петербург', 'Новосибирск'],
        'usa' => ['Нью-Йорк', 'Лос-Анджелес', 'Чикаго'],
        'de' => ['Берлин', 'Мюнхен', 'Гамбург'],
    ];

    $cities = $cities_by_country[$country] ?? [];

    wp_send_json_success($cities);
}

2. В JS на странице формы нужно отследить изменение поля страны и отправить AJAX-запрос, чтобы обновить список городов:

jQuery(document).ready(function($) {
    $('#wpforms-123-field_1').on('change', function() { // ID формы и поля страны
        var country = $(this).val();
        var citySelect = $('#wpforms-123-field_2'); // поле город

        $.post(wpforms_vars.ajax_url, {
            action: 'wpformsdinamic_get_cities',
            country: country
        }, function(response) {
            if(response.success) {
                citySelect.empty();
                $.each(response.data, function(index, city) {
                    citySelect.append($('<option>', { value: city, text: city }));
                });
            }
        });
    });
});

Здесь wpforms-123-field_1 и wpforms-123-field_2 — ID полей формы страны и города соответственно, их нужно подставить свои. Переменная wpforms_vars.ajax_url обычно задается в теме или плагине WPForms.

Автоподстановка значений по выбору из списка

Допустим, после выбора города мы хотим автоматически подставить почтовый индекс в отдельное поле. Для этого можно расширить JS, добавив дополнительный AJAX-запрос или использовать уже полученные данные.

Пример, когда индекс хранится вместе с городом:

add_action('wp_ajax_wpformsdinamic_get_city_data', 'wpformsdinamic_get_city_data_callback');
add_action('wp_ajax_nopriv_wpformsdinamic_get_city_data', 'wpformsdinamic_get_city_data_callback');

function wpformsdinamic_get_city_data_callback() {
    $city = sanitize_text_field($_POST['city'] ?? '');

    $city_data = [
        'Москва' => ['zip' => '101000'],
        'Санкт-Петербург' => ['zip' => '190000'],
        'Нью-Йорк' => ['zip' => '10001'],
    ];

    if (isset($city_data[$city])) {
        wp_send_json_success($city_data[$city]);
    } else {
        wp_send_json_error();
    }
}

JS код для обновления поля с почтовым индексом:

$('#wpforms-123-field_2').on('change', function() {
    var city = $(this).val();
    var zipField = $('#wpforms-123-field_3'); // поле почтового индекса

    $.post(wpforms_vars.ajax_url, {
        action: 'wpformsdinamic_get_city_data',
        city: city
    }, function(response) {
        if(response.success) {
            zipField.val(response.data.zip);
        } else {
            zipField.val('');
        }
    });
});

Использование готовых плагинов для динамических полей в WPForms

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

WPForms Dynamic Fields Addon — неофициальный плагин, который позволяет подгружать данные из внешних источников и создавать зависимые поля.
Clearfy Pro — оптимизационный плагин с настройками для работы форм, который можно использовать для уменьшения нагрузки и ускорения AJAX-запросов.
WPGPT — если нужно автоматически генерировать варианты полей на основе ИИ.

Подробнее о плагинах и их установке можно узнать на https://wpshop.ru/plugins/.

Подводим итоги и рекомендации

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

Использование фильтра wpforms_field_properties для замены вариантов select.
Настройка AJAX-обработчиков для подгрузки связанных данных.
Написание JavaScript, который реагирует на изменения полей и обновляет форму без перезагрузки.
Опционально — использование готовых расширений и плагинов для упрощения задач.

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