WPForms: автоматическая обновление формы без перезагрузки страницы

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

Почему важно автоматическое обновление формы в WPForms

Стандартные формы WPForms отправляют данные через AJAX, но содержимое формы меняется только при загрузке страницы. В ряде случаев необходимо, чтобы поля формы обновлялись динамически, например, при выборе определённого значения в одном поле менялись варианты в другом, или подтягивались свежие данные из базы или API без участия пользователя.

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

Рассмотрим, как реализовать подобное обновление на примере WPForms с использованием AJAX и кастомного кода.

Настройка AJAX-обработчика для обновления полей формы

Для начала нам нужно создать AJAX-обработчик в WordPress, который будет возвращать обновлённые данные для полей формы.

Регистрация AJAX-хука

Добавим в functions.php или в отдельный плагин следующий код:

add_action('wp_ajax_wpform_update_dynamic_fields', 'wpform_wpform_update_dynamic_fields');
add_action('wp_ajax_nopriv_wpform_update_dynamic_fields', 'wpform_wpform_update_dynamic_fields');

function wpform_wpform_update_dynamic_fields() {
    // Проверяем nonce для безопасности
    if ( ! isset($_POST['nonce']) || ! wp_verify_nonce($_POST['nonce'], 'wpform_dynamic_update_nonce') ) {
        wp_send_json_error('Неверный nonce');
    }

    $selected_value = sanitize_text_field($_POST['selected_value']);

    // Генерируем новые опции для select или другие данные
    $options = [];
    if ($selected_value === 'option1') {
        $options = [
            ['value' => 'sub1', 'label' => 'Подопция 1'],
            ['value' => 'sub2', 'label' => 'Подопция 2'],
        ];
    } elseif ($selected_value === 'option2') {
        $options = [
            ['value' => 'sub3', 'label' => 'Подопция 3'],
            ['value' => 'sub4', 'label' => 'Подопция 4'],
        ];
    }

    wp_send_json_success($options);
}

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

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

В форме WPForms создайте два поля типа «Выпадающий список» (select): первое – с выбором основного параметра, второе будет динамически обновляться в зависимости от выбора первого.

Добавим JavaScript для перехвата события изменения первого поля и отправки AJAX-запроса к нашему обработчику:

jQuery(document).ready(function($) {
    var nonce = '<?php echo wp_create_nonce('wpform_dynamic_update_nonce'); ?>';

    $('#wpforms-123-field_1').on('change', function() { // Замените wpforms-123-field_1 на ID вашего поля
        var selectedValue = $(this).val();

        $.ajax({
            url: wpforms_dynamic_ajax.ajax_url,
            method: 'POST',
            data: {
                action: 'wpform_update_dynamic_fields',
                nonce: nonce,
                selected_value: selectedValue
            },
            success: function(response) {
                if (response.success) {
                    var $secondSelect = $('#wpforms-123-field_2'); // Замените на ID второго поля
                    $secondSelect.empty();
                    $.each(response.data, function(index, option) {
                        $secondSelect.append($('<option>', {
                            value: option.value,
                            text: option.label
                        }));
                    });
                } else {
                    console.log('Ошибка: ', response.data);
                }
            },
            error: function() {
                console.log('AJAX запрос не удался');
            }
        });
    });
});

Для корректной работы необходимо локализовать скрипт и передать переменную ajax_url в глобальный JS-объект. В functions.php добавьте:

function wpform_enqueue_dynamic_scripts() {
    wp_enqueue_script('wpform-dynamic-fields', get_template_directory_uri() . '/js/wpform-dynamic-fields.js', ['jquery'], null, true);
    wp_localize_script('wpform-dynamic-fields', 'wpforms_dynamic_ajax', [
        'ajax_url' => admin_url('admin-ajax.php')
    ]);
}
add_action('wp_enqueue_scripts', 'wpform_enqueue_dynamic_scripts');

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

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

Например, каждую минуту подтягивать актуальные данные для поля:

setInterval(function() {
    var selectedValue = $('#wpforms-123-field_1').val();
    // Аналогичный AJAX-запрос, как в обработчике выше
}, 60000);

Это полезно, если данные меняются часто, например, цены, наличие товара и т.п.

Пример интеграции с внешним API

Иногда требуется подгружать данные не из базы WordPress, а с внешнего сервиса. В таком случае AJAX-обработчик может делать запрос к API, обрабатывать данные и возвращать их в форму.

Пример кода для запроса внешнего API в обработчике:

function wpform_wpform_update_dynamic_fields() {
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'wpform_dynamic_update_nonce')) {
        wp_send_json_error('Неверный nonce');
    }

    $response = wp_remote_get('https://api.example.com/data');

    if (is_wp_error($response)) {
        wp_send_json_error('Ошибка запроса к API');
    }

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

    $options = [];
    if (!empty($data) && is_array($data)) {
        foreach ($data as $item) {
            $options[] = [
                'value' => sanitize_text_field($item['id']),
                'label' => sanitize_text_field($item['name']),
            ];
        }
    }

    wp_send_json_success($options);
}

Заключение

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

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

Для упрощения работы с формами и дополнительными возможностями рекомендуем ознакомиться с плагинами от WPSHOP, которые расширяют функционал WPForms и помогут быстро интегрировать подобные решения.