Как создать пошаговую многошаговую форму в WordPress без плагинов

Автор: Алексей Карпов | Опубликовано: 27.02.2026

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

Почему стоит сделать многошаговую форму без плагинов

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

Такой подход позволяет:

Оптимизировать код под конкретные задачи;
Легко интегрировать с кастомными типами записей и метаполями;
Минимизировать зависимости и повысить безопасность;
Гибко настроить валидацию и обработку данных.

Основные принципы многошаговой формы

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

Реализация обычно включает:

HTML-разметку с секциями для каждого шага;
JavaScript для переключения между шагами и валидации на клиенте;
PHP-обработчик для окончательной проверки и сохранения данных;
Механизм сохранения данных между шагами (через сессии или скрытые поля).

Пример реализации многошаговой формы в WordPress

Рассмотрим простой пример многошаговой формы регистрации пользователя с тремя шагами:

Шаг 1 — Ввод имени и фамилии;
Шаг 2 — Ввод email и телефона;
Шаг 3 — Подтверждение и отправка.

1. HTML и PHP код формы

Добавьте следующий код в файл темы, например, в page-template или через шорткод:

<?php
function wpboard_render_multistep_form() {
    // Инициализируем сессию для хранения данных между шагами
    if ( ! session_id() ) {
        session_start();
    }

    $step = isset($_POST['step']) ? intval($_POST['step']) : 1;
    $errors = [];

    // Обработка отправки каждого шага
    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        switch ($step) {
            case 1:
                $first_name = sanitize_text_field($_POST['first_name'] ?? '');
                $last_name = sanitize_text_field($_POST['last_name'] ?? '');

                if (empty($first_name)) {
                    $errors['first_name'] = 'Введите имя';
                }
                if (empty($last_name)) {
                    $errors['last_name'] = 'Введите фамилию';
                }

                if (empty($errors)) {
                    $_SESSION['wpboard_form_data']['first_name'] = $first_name;
                    $_SESSION['wpboard_form_data']['last_name'] = $last_name;
                    $step = 2;
                }
                break;

            case 2:
                $email = sanitize_email($_POST['email'] ?? '');
                $phone = sanitize_text_field($_POST['phone'] ?? '');

                if (!is_email($email)) {
                    $errors['email'] = 'Введите корректный email';
                }
                if (empty($phone)) {
                    $errors['phone'] = 'Введите телефон';
                }

                if (empty($errors)) {
                    $_SESSION['wpboard_form_data']['email'] = $email;
                    $_SESSION['wpboard_form_data']['phone'] = $phone;
                    $step = 3;
                }
                break;

            case 3:
                // Здесь можно сохранять данные в базу или отправлять email
                // Для примера просто очистим сессию и выведем сообщение
                $data = $_SESSION['wpboard_form_data'] ?? [];
                unset($_SESSION['wpboard_form_data']);

                echo '<p>Спасибо, ' . esc_html($data['first_name']) . '! Ваша заявка принята.</p>';
                return;
        }
    }

    // Получаем ранее введённые данные для заполнения полей
    $data = $_SESSION['wpboard_form_data'] ?? [];

    // Вывод формы
    ?>
    <form method="post" id="wpboard-multistep-form">
        <input type="hidden" name="step" value="<?php echo esc_attr($step); ?>" />

        <?php if ($step === 1): ?>
            <h2>Шаг 1: Введите имя и фамилию</h2>
            <label>Имя:<br>
            <input type="text" name="first_name" value="<?php echo esc_attr($data['first_name'] ?? ''); ?>" />
            <?php if (isset($errors['first_name'])) echo '<span style="color:red;">' . esc_html($errors['first_name']) . '</span>'; ?>
            </label><br>

            <label>Фамилия:<br>
            <input type="text" name="last_name" value="<?php echo esc_attr($data['last_name'] ?? ''); ?>" />
            <?php if (isset($errors['last_name'])) echo '<span style="color:red;">' . esc_html($errors['last_name']) . '</span>'; ?>
            </label><br>

            <button type="submit">Далее</button>

        <?php elseif ($step === 2): ?>
            <h2>Шаг 2: Контактные данные</h2>
            <label>Email:<br>
            <input type="email" name="email" value="<?php echo esc_attr($data['email'] ?? ''); ?>" />
            <?php if (isset($errors['email'])) echo '<span style="color:red;">' . esc_html($errors['email']) . '</span>'; ?>
            </label><br>

            <label>Телефон:<br>
            <input type="text" name="phone" value="<?php echo esc_attr($data['phone'] ?? ''); ?>" />
            <?php if (isset($errors['phone'])) echo '<span style="color:red;">' . esc_html($errors['phone']) . '</span>'; ?>
            </label><br>

            <button type="submit">Далее</button>
            <button type="button" onclick="history.back();">Назад</button>

        <?php elseif ($step === 3): ?>
            <h2>Шаг 3: Подтверждение</h2>
            <p>Проверьте введённые данные:</p>
            <ul>
                <li>Имя: <?php echo esc_html($data['first_name'] ?? ''); ?></li>
                <li>Фамилия: <?php echo esc_html($data['last_name'] ?? ''); ?></li>
                <li>Email: <?php echo esc_html($data['email'] ?? ''); ?></li>
                <li>Телефон: <?php echo esc_html($data['phone'] ?? ''); ?></li>
            </ul>
            <button type="submit">Отправить</button>
            <button type="button" onclick="history.back();">Назад</button>
        <?php endif; ?>
    </form>
    <?php
}
add_shortcode('wpboard_multistep_form', 'wpboard_render_multistep_form');
?>

2. JavaScript для улучшения UX

Для плавного переключения шагов без перезагрузки можно использовать JavaScript, но в базовом варианте перезагрузка страниц при сабмите — более надежный способ с точки зрения сохранения данных и SEO. Если хотите улучшить UX, добавьте простой JS, который будет проверять поля в текущем шаге и переключать видимость блоков. Однако на больших проектах лучше использовать AJAX.

Расширение функционала: валидация и сохранение в базе

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

Добавить защиту nonce (WordPress функции wp_nonce_field() и проверку);
Реализовать более детальную валидацию (например, проверка формата телефона);
Сохранять данные в пользовательские метаполя, кастомные таблицы или отправлять на email;
Обрабатывать ошибки и показывать уведомления пользователю.

Например, чтобы сохранить данные в пользовательские метаполя, можно использовать функцию update_user_meta() при создании пользователя или обновлении профиля.

Использование плагинов WPShop для многошаговых форм

Если хотите готовое решение с расширенными возможностями, обратите внимание на плагин My Popup от WPShop. Он позволяет создавать модальные многошаговые формы с гибкими настройками, интеграцией с CRM и email-сервисами.

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