Как создать динамические поля формы в WordPress с подгрузкой через AJAX

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

Что такое динамические поля формы и зачем использовать AJAX

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

Использование AJAX позволяет обновлять эти поля мгновенно, без перезагрузки страницы, что улучшает UX и снижает нагрузку на сервер.

В WordPress для этого можно использовать стандартные AJAX-хуки и JavaScript. Рассмотрим пример создания такой формы с двумя связанными полями: "Регион" и "Город".

Создание формы с двумя связанными полями

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

function huemanru_dynamic_form_shortcode() {
    ob_start();
    ?>
    <form id="huemanru-dynamic-form">
        <label for="region">Выберите регион:</label>
        <select id="region" name="region">
            <option value="">-- Выберите регион --</option>
            <option value="moscow">Москва</option>
            <option value="spb">Санкт-Петербург</option>
        </select>
        <br><br>
        <label for="city">Выберите город:</label>
        <select id="city" name="city" disabled>
            <option value="">-- Сначала выберите регион --</option>
        </select>
    </form>
    <script>
    jQuery(document).ready(function($){
        $('#region').change(function(){
            var region = $(this).val();
            if(region === '') {
                $('#city').html('<option value="">-- Сначала выберите регион --</option>').prop('disabled', true);
                return;
            }
            $('#city').prop('disabled', true).html('<option>Загрузка...</option>');
            $.ajax({
                url: huemanru_ajax_object.ajax_url,
                method: 'POST',
                data: {
                    action: 'huemanru_get_cities',
                    region: region
                },
                success: function(response) {
                    if(response.success) {
                        var options = '';
                        $.each(response.data, function(key, val){
                            options += '<option value="'+key+'">'+val+'</option>';
                        });
                        $('#city').html(options).prop('disabled', false);
                    } else {
                        $('#city').html('<option value="">Города не найдены</option>').prop('disabled', true);
                    }
                },
                error: function(){
                    $('#city').html('<option value="">Ошибка загрузки</option>').prop('disabled', true);
                }
            });
        });
    });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('huemanru_dynamic_form', 'huemanru_dynamic_form_shortcode');

Здесь мы создали форму с двумя селектами. При выборе региона отправляется AJAX-запрос к серверу, который вернёт список городов.

Обработка AJAX-запроса на сервере

Чтобы сервер вернул города для выбранного региона, добавим обработчик AJAX в functions.php или в плагине:

function huemanru_ajax_get_cities() {
    // Проверяем nonce, если добавляли для безопасности (необязательно в базовом примере)

    $region = sanitize_text_field($_POST['region'] ?? '');
    $cities = [];
    switch($region) {
        case 'moscow':
            $cities = [
                'moscow' => 'Москва',
                'krasnogorsk' => 'Красногорск',
                'khimki' => 'Химки'
            ];
            break;
        case 'spb':
            $cities = [
                'spb' => 'Санкт-Петербург',
                'pushkin' => 'Пушкин',
                'gatchina' => 'Гатчина'
            ];
            break;
    }
    if(empty($cities)) {
        wp_send_json_error();
    } else {
        wp_send_json_success($cities);
    }
}
add_action('wp_ajax_huemanru_get_cities', 'huemanru_ajax_get_cities');
add_action('wp_ajax_nopriv_huemanru_get_cities', 'huemanru_ajax_get_cities');

Этот код получает параметр region, формирует массив городов и возвращает JSON с данными.

Подключение AJAX URL в JS

Для работы AJAX в WordPress удобно использовать функцию wp_localize_script, чтобы передать URL обработчика в JS. В нашем случае скрипт встроен прямо в шорткод, но если вы выносите JS в отдельный файл, используйте такой код:

function huemanru_enqueue_scripts() {
    wp_enqueue_script('huemanru-script', get_template_directory_uri() . '/js/huemanru-script.js', ['jquery'], null, true);
    wp_localize_script('huemanru-script', 'huemanru_ajax_object', [
        'ajax_url' => admin_url('admin-ajax.php'),
    ]);
}
add_action('wp_enqueue_scripts', 'huemanru_enqueue_scripts');

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

Если вы предпочитаете готовые решения, обратите внимание на плагины типа Contact Form 7 с дополнениями, поддерживающими динамическое подгружение, или Clearfy Pro, который оптимизирует WordPress, что полезно при работе с AJAX.

Также полезен плагин WPRemark для организации отзывов с динамическими формами.

Расширение функционала: добавление кастомных полей и валидация

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

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

Итог

Создание динамических полей с подгрузкой через AJAX в WordPress — задача вполне выполнимая с минимальными знаниями PHP и JavaScript. Такой подход улучшает UX и делает формы более интерактивными и полезными для пользователей.

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