Как создать многослойную форму в WordPress с помощью AJAX

Многошаговые формы (многослойные формы) востребованы для удобного ввода больших объемов данных без перегрузки пользователя. В WordPress такие формы часто реализуют с помощью AJAX, что позволяет динамически обновлять содержимое без полной перезагрузки страницы. В этой статье подробно разберём, как создать многошаговую форму с валидацией и отправкой данных, используя собственный плагин и AJAX.

Зачем использовать многошаговые формы в WordPress

Многошаговая форма разбивает длинный процесс заполнения на удобные этапы. Это помогает:

• Уменьшить психологическую нагрузку на пользователя;
• Дать возможность проверить корректность данных на каждом шаге;
• Обеспечить плавный и интерактивный пользовательский опыт;
• Собрать данные частями и обработать их поэтапно.

В WordPress это особенно полезно для сложных регистраций, заказов, анкет или опросов.

Создание плагина для многошаговой формы с AJAX

Для начала создадим простой плагин wp7-multistep-form. Структура папки плагина:

• wp7-multistep-form.php — основной файл плагина;
• js/multistep-form.js — скрипт для работы с AJAX;
• css/multistep-form.css — стили формы.

В wp7-multistep-form.php подключим скрипты и стили, а также определим шорткод для вывода формы.

<?php
/**
 * Plugin Name: WP7 Многошаговая форма
 * Description: Пример многошаговой формы с AJAX в WordPress
 * Version: 1.0
 * Author: WP7.ru
 */

if (!defined('ABSPATH')) exit;

class WP7_MultiStep_Form {
    public function __construct() {
        add_action('wp_enqueue_scripts', array($this, 'wp7_enqueue_scripts'));
        add_shortcode('wp7_multistep_form', array($this, 'wp7_render_form'));
        add_action('wp_ajax_wp7_process_form', array($this, 'wp7_process_form'));
        add_action('wp_ajax_nopriv_wp7_process_form', array($this, 'wp7_process_form'));
    }

    public function wp7_enqueue_scripts() {
        wp_enqueue_style('wp7-multistep-form', plugin_dir_url(__FILE__) . 'css/multistep-form.css');
        wp_enqueue_script('wp7-multistep-form', plugin_dir_url(__FILE__) . 'js/multistep-form.js', array('jquery'), false, true);
        wp_localize_script('wp7-multistep-form', 'wp7ajax', array('ajaxurl' => admin_url('admin-ajax.php')));
    }

    public function wp7_render_form() {
        ob_start();
        ?>
        <form id="wp7-multistep-form">
            <div class="step step-1 active">
                <h3>Шаг 1: Введите имя</h3>
                <input type="text" name="name" required placeholder="Ваше имя">
                <button type="button" class="next-step">Далее</button>
            </div>
            <div class="step step-2">
                <h3>Шаг 2: Введите email</h3>
                <input type="email" name="email" required placeholder="Ваш email">
                <button type="button" class="prev-step">Назад</button>
                <button type="button" class="next-step">Далее</button>
            </div>
            <div class="step step-3">
                <h3>Шаг 3: Подтвердите данные</h3>
                <div class="summary"></div>
                <button type="button" class="prev-step">Назад</button>
                <button type="submit">Отправить</button>
            </div>
        </form>
        <div id="wp7-form-response"></div>
        <?php
        return ob_get_clean();
    }

    public function wp7_process_form() {
        check_ajax_referer('wp7_multistep_nonce', 'nonce');

        $name = sanitize_text_field($_POST['name'] ?? '');
        $email = sanitize_email($_POST['email'] ?? '');

        if (empty($name) || empty($email)) {
            wp_send_json_error('Пожалуйста, заполните все поля.');
        }

        if (!is_email($email)) {
            wp_send_json_error('Некорректный email.');
        }

        // Здесь можно сохранить данные, отправить письмо и т.п.

        wp_send_json_success('Спасибо, ' . esc_html($name) . '! Ваша форма успешно отправлена.');
    }
}

new WP7_MultiStep_Form();

JavaScript для управления шагами и AJAX

Создадим файл js/multistep-form.js для переключения между шагами и отправки данных:

jQuery(document).ready(function($){
    var currentStep = 1;
    var totalSteps = $('.step').length;

    function showStep(step) {
        $('.step').removeClass('active');
        $('.step-' + step).addClass('active');
    }

    $('.next-step').click(function(){
        if (validateStep(currentStep)) {
            currentStep++;
            if(currentStep > totalSteps) currentStep = totalSteps;

            if(currentStep === totalSteps) {
                // Заполнение сводки
                var name = $('input[name="name"]').val();
                var email = $('input[name="email"]').val();
                $('.summary').html('<p>Имя: ' + name + '</p><p>Email: ' + email + '</p>');
            }

            showStep(currentStep);
        }
    });

    $('.prev-step').click(function(){
        currentStep--;
        if(currentStep < 1) currentStep = 1;
        showStep(currentStep);
    });

    function validateStep(step) {
        var valid = true;
        $('.step-' + step + ' input[required]').each(function(){
            if(!$(this).val()) {
                alert('Пожалуйста, заполните поле: ' + $(this).attr('name'));
                valid = false;
                return false;
            }
            if($(this).attr('type') === 'email') {
                var emailReg = /^\S+@\S+\.\S+$/;
                if(!emailReg.test($(this).val())) {
                    alert('Введите корректный email');
                    valid = false;
                    return false;
                }
            }
        });
        return valid;
    }

    $('#wp7-multistep-form').on('submit', function(e){
        e.preventDefault();

        if(!validateStep(currentStep)) return;

        var data = {
            action: 'wp7_process_form',
            nonce: wp7ajax.nonce,
            name: $('input[name="name"]').val(),
            email: $('input[name="email"]').val()
        };

        $.post(wp7ajax.ajaxurl, data, function(response){
            if(response.success) {
                $('#wp7-form-response').html('<p class="success">' + response.data + '</p>');
                $('#wp7-multistep-form').hide();
            } else {
                alert(response.data);
            }
        });
    });
});

Стилизация формы

В файле css/multistep-form.css добавим базовые стили для удобства работы с шагами:

.step { display: none; }
.step.active { display: block; }
button { margin-top: 10px; }
.success { color: green; font-weight: bold; }

Дополнительные советы и возможности

Вы можете расширить данный пример:

• Добавить загрузку каждого шага через AJAX с сервера для динамического формирования;
• Реализовать сохранение прогресса формы в сессии или localStorage;
• Добавить более сложную валидацию, используя сторонние библиотеки;
• Интегрировать с популярными плагинами, например, WPForms, если нужна расширенная функциональность;
• Использовать Clearfy Pro для оптимизации и безопасности AJAX-запросов.

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