WPForms и многошаговые формы: как создать и настроить многостраничную форму в WordPress

Автор: Виктория Ширяева | Опубликовано: 12.02.2026

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

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

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

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

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

Создание многошаговой формы в WPForms: пошаговое руководство

Для начала создайте новую форму или откройте существующую в редакторе WPForms:

Добавьте все необходимые поля, распределив их по логическим блокам.
Используйте поле Разделитель страницы (Page Break), чтобы разбить форму на шаги. Это ключевой элемент многошаговой формы.
Настройте заголовки и описания для каждого шага, чтобы пользователь понимал, что требуется на каждом этапе.
В настройках формы активируйте опцию «Показывать индикатор прогресса», чтобы отображать текущий шаг и общее количество шагов.
Сохраните форму и вставьте шорткод на нужную страницу сайта.

Вот пример простого кода, чтобы добавить многошаговую форму через шорткод:

[wpforms id="123" title="false" description="false"]

При этом форма с ID 123 уже должна содержать разделители страниц.

Кастомизация кнопок навигации и переходов между шагами

По умолчанию WPForms использует стандартные кнопки «Далее» и «Назад». Но часто нужно изменить текст или стили кнопок для улучшения UX.

Добавим кастомный текст на кнопки с помощью фильтра:

function wpformscustom_change_pagination_buttons( $args, $form_data ) {
    $args['prev_text'] = 'Назад';
    $args['next_text'] = 'Вперёд';
    return $args;
}
add_filter( 'wpforms_frontend_pagination_args', 'wpformscustom_change_pagination_buttons', 10, 2 );

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

Для более глубокой кастомизации можно использовать CSS, например:

.wpforms-page-next {
    background-color: #0073aa;
    color: #fff;
    border-radius: 4px;
    padding: 8px 16px;
    border: none;
    cursor: pointer;
}
.wpforms-page-prev {
    background-color: #ccc;
    color: #333;
    border-radius: 4px;
    padding: 8px 16px;
    border: none;
    cursor: pointer;
}

Валидация и сохранение данных между шагами

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

Для условной валидации можно использовать хук wpforms_process_validate:

function wpformscustom_conditional_validation( $fields, $entry, $form_data ) {
    if ( $form_data['id'] !== 123 ) {
        return;
    }
    // Проверяем поле с ID 4, если оно пустое, выдаём ошибку
    if ( empty( $fields[4]['value'] ) ) {
        wpforms()->process->errors[ $form_data['id'] ][4] = 'Это поле обязательно для заполнения';
    }
}
add_action( 'wpforms_process_validate', 'wpformscustom_conditional_validation', 10, 3 );

Для сохранения данных между шагами в сессии можно использовать JavaScript и PHP, но WPForms уже хранит введённые данные, пока форма не отправлена.

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

Многошаговые формы отлично сочетаются с интеграциями, например, отправка данных в CRM, email-маркетинг или SMS-уведомления. Для этого используйте стандартные интеграции WPForms или расширенные хуки.

Например, отправка данных после завершения всех шагов в Telegram с помощью кастомного обработчика:

function wpformscustom_send_telegram_notification( $fields, $entry, $form_data ) {
    if ( $form_data['id'] !== 123 ) {
        return;
    }
    $message = "Новая заявка с формы:\n";
    foreach ( $fields as $field ) {
        $message .= $field['name'] . ': ' . $field['value'] . "\n";
    }
    $token = 'ВАШ_TELEGRAM_BOT_TOKEN';
    $chat_id = 'ВАШ_CHAT_ID';
    $url = 'https://api.telegram.org/bot' . $token . '/sendMessage?chat_id=' . $chat_id . '&text=' . urlencode( $message );
    wp_remote_get( $url );
}
add_action( 'wpforms_process_complete', 'wpformscustom_send_telegram_notification', 10, 3 );

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

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

Чтобы ваша многошаговая форма была максимально удобной, учитывайте следующие моменты:

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

Также рекомендуем использовать плагин Clearfy Pro для оптимизации скорости загрузки и минимизации конфликтов скриптов на страницах с формами. Подробнее о Clearfy Pro с UTM-метками для wpform.ru вы можете узнать на официальной странице плагина.