Многостраничные формы — отличный способ разбить длинную форму на удобные части, улучшить пользовательский опыт и повысить конверсию. В этой статье подробно расскажем, как с помощью WPForms создать многостраничную форму в WordPress, настроить навигацию, сохранять прогресс и добавить кастомные стили. Рассмотрим и примеры кода для расширенной настройки.
Что такое многостраничные формы в WPForms и зачем они нужны
Многостраничные формы (multi-page forms) позволяют делить длинные формы на несколько шагов или страниц. Это удобно, когда нужно собрать много информации, но не хочется перегружать пользователя одной большой формой. Пользователь видит прогресс, не устаёт и с большей вероятностью завершит заполнение.
WPForms Pro поддерживает многостраничные формы из коробки с помощью поля "Страница" (Page Break). Это самый простой способ разделить форму на несколько экранов.
Основные преимущества многостраничных форм:
- Улучшение удобства заполнения
- Сокращение количества отказов от формы
- Возможность группировать вопросы логически
- Показ прогресса заполнения
Как создать многостраничную форму в WPForms: пошаговая инструкция
Для начала убедитесь, что у вас установлена и активирована версия WPForms Pro, так как бесплатная версия не поддерживает разбиение на страницы.
Далее следуйте инструкции:
- В админке WordPress перейдите в WPForms > Добавить новую.
- Выберите шаблон или создайте пустую форму.
- В конструкторе форм добавьте необходимые поля.
- Чтобы разделить форму на страницы, перетащите поле "Разделитель страницы" (Page Break) в нужное место формы.
- Добавьте столько разделителей, сколько необходимо страницам.
- Настройте заголовки страниц и текст кнопок "Далее" и "Назад" в настройках поля "Разделитель страницы".
- Сохраните форму и вставьте её на страницу с помощью шорткода или блока WPForms.
После этого пользователи смогут переходить между страницами формы, видя прогресс.
Настройка прогресс-бара и навигации
В настройках поля "Разделитель страницы" есть опция включения прогресс-бара, который отображает процент или шаги заполнения. Это мотивирует пользователей завершить форму.
Вы также можете настроить кнопки "Далее" и "Назад", чтобы изменить текст или стиль.
Сохранение прогресса многостраничной формы WPForms
Стандартно WPForms не сохраняет промежуточные данные формы, если пользователь покинет страницу. Это может быть проблемой для длинных форм с несколькими страницами.
Решение — использовать дополнение WPForms «Save and Resume» или написать собственный код для сохранения данных в сессии или cookie.
Пример кода для сохранения данных формы в сессии
Ниже пример, как с помощью хуков WPForms сохранить введённые данные после каждого шага и восстановить их при возврате к форме.
add_action('wpforms_process', 'wpform_save_progress', 10, 3);
function wpform_save_progress($fields, $entry, $form_data) {
if (session_status() == PHP_SESSION_NONE) {
session_start();
}
$_SESSION['wpform_progress'] = [];
foreach ($fields as $field_id => $field) {
$_SESSION['wpform_progress'][$field_id] = $field['value'];
}
}
add_filter('wpforms_field_value', 'wpform_restore_progress', 10, 3);
function wpform_restore_progress($value, $field_id, $form_data) {
if (session_status() == PHP_SESSION_NONE) {
session_start();
}
if (!empty($_SESSION['wpform_progress'][$field_id])) {
return $_SESSION['wpform_progress'][$field_id];
}
return $value;
}Этот код сохраняет введённые данные в сессии после отправки каждого шага и восстанавливает их при повторном открытии формы.
Для полноценной работы нужно добавить логику очистки сессии после успешной отправки формы, а также учесть особенности хостинга.
Кастомизация стилей многостраничных форм WPForms
По умолчанию WPForms выводит многостраничные формы с базовым стилем. Чтобы адаптировать внешний вид под дизайн сайта, можно добавить свои CSS.
Пример CSS для изменения прогресс-бара и кнопок:
.wpforms-page-progress {
background-color: #e0e0e0;
border-radius: 5px;
height: 10px;
margin-bottom: 20px;
overflow: hidden;
}
.wpforms-page-progress .wpforms-page-progress-bar {
background-color: #0073aa;
height: 100%;
transition: width 0.3s ease;
}
.wpforms-page-next, .wpforms-page-prev {
background-color: #0073aa;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 3px;
}
.wpforms-page-next:hover, .wpforms-page-prev:hover {
background-color: #005177;
}Добавьте этот CSS в файл стилей вашей темы или в раздел «Дополнительные стили» в настройках кастомайзера WordPress.
Расширенные возможности многостраничных форм с WPShop
Для тех, кто хочет расширить функционал многостраничных форм, советуем обратить внимание на плагины из WPShop, например, Clearfy Pro для оптимизации и ускорения работы сайта с формами или WPRemark для персонализации сообщений после отправки формы.
Также WPStories поможет красиво оформить инструкции или подсказки для каждого шага многостраничной формы.
Советы по улучшению UX многостраничных форм
- Минимизируйте количество полей на каждом шаге — не более 5–7.
- Добавляйте подсказки и пояснения к сложным вопросам.
- Используйте прогресс-бар, чтобы пользователи видели, сколько осталось шагов.
- Позаботьтесь о мобильной адаптивности формы.
- Тестируйте форму с разными сценариями заполнения.