Как создать многоэтапный опрос в WordPress с помощью кода

Автор: Георгий Никитин | Опубликовано: 24.01.2026

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

Почему стоит создавать многоэтапные опросы в WordPress

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

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

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

Структура многоэтапного опроса: этапы и логика

Перед началом реализации важно спланировать этапы опроса и какие вопросы будут на каждом шаге. Для нашего примера:

Этап 1: Общие вопросы (например, имя и email)
Этап 2: Основные вопросы опроса
Этап 3: Дополнительные комментарии и отправка

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

Пример обработки данных и навигации между этапами

Для хранения промежуточных данных мы будем использовать сессию PHP. Это позволит сохранить ответы пользователя между шагами до окончательной отправки.

Пример кода: реализация многоэтапного опроса в WordPress

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

<?php
// Инициализация сессии для хранения данных
add_action('init', 'wppolls_init_session');
function wppolls_init_session() {
    if (!session_id()) {
        session_start();
    }
}

// Обработка AJAX запроса
add_action('wp_ajax_wppolls_handle_step', 'wppolls_handle_step');
add_action('wp_ajax_nopriv_wppolls_handle_step', 'wppolls_handle_step');

function wppolls_handle_step() {
    $step = isset($_POST['step']) ? intval($_POST['step']) : 1;

    // Сохраняем данные текущего шага
    if ($step === 1) {
        $_SESSION['wppolls_data']['name'] = sanitize_text_field($_POST['name']);
        $_SESSION['wppolls_data']['email'] = sanitize_email($_POST['email']);
    } elseif ($step === 2) {
        $_SESSION['wppolls_data']['question1'] = sanitize_text_field($_POST['question1']);
        $_SESSION['wppolls_data']['question2'] = sanitize_text_field($_POST['question2']);
    } elseif ($step === 3) {
        $_SESSION['wppolls_data']['comments'] = sanitize_textarea_field($_POST['comments']);
        // Здесь можно сохранить все данные в базу или отправить на email
    }

    // Определяем следующий шаг
    $next_step = $step + 1;
    if ($next_step > 3) {
        // Конец опроса
        wp_send_json_success(array('finished' => true));
    } else {
        wp_send_json_success(array('next_step' => $next_step));
    }
    wp_die();
}

// Шорткод для вывода многоэтапного опроса
add_shortcode('wppolls_multistep', 'wppolls_multistep_shortcode');
function wppolls_multistep_shortcode() {
    ob_start();
    ?>
    <div id="wppolls-container">
        <form id="wppolls-form">
            <div class="wppolls-step" data-step="1">
                <h3>Шаг 1: Общие данные</h3>
                <label>Имя:<input type="text" name="name" required></label><br>
                <label>Email:<input type="email" name="email" required></label><br>
                <button type="submit">Далее</button>
            </div>
            <div class="wppolls-step" data-step="2" style="display:none;">
                <h3>Шаг 2: Вопросы опроса</h3>
                <label>Вопрос 1:<input type="text" name="question1" required></label><br>
                <label>Вопрос 2:<input type="text" name="question2" required></label><br>
                <button type="submit">Далее</button>
            </div>
            <div class="wppolls-step" data-step="3" style="display:none;">
                <h3>Шаг 3: Комментарии</h3>
                <label>Комментарий:<textarea name="comments"></textarea></label><br>
                <button type="submit">Отправить</button>
            </div>
        </form>
        <div id="wppolls-thanks" style="display:none;"><h3>Спасибо за участие в опросе!</h3></div>
    </div>

    <script>
    (function($){
        $('#wppolls-form').on('submit', function(e){
            e.preventDefault();
            var $form = $(this);
            var $currentStep = $form.find('.wppolls-step:visible');
            var step = parseInt($currentStep.data('step'));
            var data = $currentStep.find(':input').serializeArray();
            data.push({name: 'action', value: 'wppolls_handle_step'});
            data.push({name: 'step', value: step});

            $.post('<?php echo admin_url('admin-ajax.php'); ?>', data, function(response){
                if(response.success) {
                    if(response.data.finished) {
                        $('#wppolls-form').hide();
                        $('#wppolls-thanks').show();
                    } else {
                        $currentStep.hide();
                        $form.find('.wppolls-step[data-step="' + response.data.next_step + '"]').show();
                    }
                }
            });
        });
    })(jQuery);
    </script>
    <?php
    return ob_get_clean();
}

Как расширить функциональность многоэтапного опроса

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

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

Если хотите использовать готовые решения для создания опросов с расширенными возможностями, обратите внимание на плагин Quizle от WPSHOP. Он поддерживает создание многошаговых викторин и опросов с удобным визуальным редактором и аналитикой.

Советы по улучшению UX многоэтапных опросов

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

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

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