Как создать многошаговую форму в WordPress

Заполнение длинной формы может казаться утомительным. Когда посетители видят слишком много полей на одном экране, они чаще всего покидают форму, не заполнив её полностью. Разделяя форму на секции, вы позволяете пользователям концентрироваться по шагам. Это повышает вовлечённость и снижает утомляемость при заполнении формы. Если вы думаете, как настроить это в WordPress — не волнуйтесь, это не так сложно, как кажется. Мы покажем, как это можно сделать с помощью WPForms.

Шаг 1: Установите плагин для многошаговых форм

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

WPForms предлагает множество способов создания многошаговых форм. Можно использовать поле Page Break, чтобы разделить форму на страницы, или Lead Forms Addon для пошагового отображения по одному вопросу за раз. Также можно воспользоваться AI Form Builder для автоматического создания формы. Обратите внимание, что все эти способы доступны только в Pro-версии WPForms.

Если WPForms ещё не установлен, необходимо сначала установить и активировать Pro-версию через админ-панель WordPress. После установки можно приступать к созданию многошаговой формы.

Шаг 2: Создание новой формы и добавление полей

В админ-панели WordPress перейдите в WPForms → Add New для создания новой формы.

Задайте имя формы, например «WordPress Multi Step Form».

Можно начать с пустой формы (Blank Form) или выбрать шаблон, например Simple Contact Form, чтобы быстрее начать работу.

Слева отображается список доступных полей, которые можно добавлять в форму. Справа — редактируемый предварительный просмотр, где можно перетаскивать поля.

Пример полей для сбора информации о пользователе:

• Название компании — поле Single Line Text
• Веб-сайт — поле Website/URL из раздела Fancy Fields
• Отрасль — поле Checkbox с вариантами: IT, Производство, Розничная торговля, Здравоохранение
• Страна/Регион — поле Dropdown с выбором стран
• Как узнали о нас? — поле Dropdown с источниками (Google, Facebook, LinkedIn)

Любое поле можно редактировать или добавить новое. Основная цель — собрать именно ту информацию, которая необходима.

После добавления всех полей форма готова к разделению на шаги. Вот тут-то и начинается самое интересное.

Шаг 3: Разделение формы на несколько частей

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

Если необходимо разбить форму на разделы с индикатором прогресса и кнопками «Назад/Вперед», следует использовать поле Page Break. Этот способ чаще всего подходит для длинных форм, где пользователям важно видеть, насколько они продвинулись.

Если же цель — создавать формы, где задаётся по одному вопросу за раз, стоит обратить внимание на дополнение Lead Forms Addon. Оно особенно удобно для мобильных устройств и позволяет создать более сфокусированное оформление.

Наконец, всю многошаговую форму можно создать с помощью AI form builder. Не нужно сразу выбирать один метод — доступны все варианты, и можно выбрать тот, который лучше всего подходит для вашей формы.

Метод 1: Добавление поля Page Break

После того как все поля формы добавлены и настроены, нужно добавить поле Page Break в форму. Каждый раз, когда добавляется Page Break, форма разделяется, и создаётся новая страница.

Чтобы начать разделение формы, перетащите поле «Page Break», которое находится в разделе Fancy Fields, с левой панели на правую панель. Убедитесь, что оно расположено именно там, где должно произойти первое разделение. Обычно полезно продумать последовательность вопросов перед добавлением разрыва, чтобы избежать путаницы впоследствии.

Совет: используйте логические разделы для «Page Break» для интуитивного и удобного пользовательского опыта. Например, группируйте личную информацию на одной странице, предпочтения на другой, а детальные вопросы на последней странице, чтобы не перегружать пользователей.

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

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

Настройка индикатора прогресса многостраничной формы

Когда кто-то начинает заполнять длинную форму, полезно показать пользователю, насколько далеко он продвинулся. Используя индикатор прогресса, можно сообщить пользователю о различных разделах формы. Так пользователь всегда знает, на каком этапе он находится и сколько осталось заполнить до нажатия кнопки «Submit».

WPForms предоставляет три различных стиля индикатора прогресса для многошаговых форм:

• Connectors: показывает соединительную полосу и названия страниц каждого раздела формы.
• Circles: показывает по одному кругу и название страницы для каждой страницы формы.
• Progress Bar: показывает прогресс заполнения формы по мере прохождения пользователем шагов.

Для настройки индикатора прогресса и заголовка первой страницы многошаговой формы нажмите на секцию разрыва страницы First Page. В панели предварительного просмотра появится новая панель, где можно:

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

Совет: индикатор прогресса с чёткими метками существенно снижает вероятность того, что пользователь бросит заполнение формы, и задаёт правильные ожидания с самого начала. Используйте его разумно!

Настройка заголовка и текста кнопки следующей страницы

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

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

После выполнения всех настроек разрывов страниц необходимо сохранить изменения, нажав Save.

Метод 2: Использование Lead Forms Addon

Хотя поле «Page Break» подходит для большинства многошаговых форм, иногда необходимо более сфокусированное решение, особенно если цель — собирать лиды по одному вопросу за раз. В этом случае полезен Lead Forms Addon. Он позволяет пошагово вести пользователя через короткие, сфокусированные шаги, как викторину или быструю регистрацию.

Для начала перейдите в панель управления WordPress, затем WPForms » Addons. В строке поиска введите «Lead Forms». Когда аддон появится, нажмите Install Addon, затем Activate.

Включение режима Lead Form

После установки и активации Lead Forms Addon откройте форму, с которой работаете. Перейдите на вкладку Settings в конструкторе форм, затем выберите Lead Forms в меню. Появится опция Enable Lead Form Mode. Включите её.

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

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

После настройки формы можно изменить её внешний вид на сайте. Это одно из преимуществ использования Lead Forms Addon.

Настройка внешнего вида Lead Form

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

• Form Title — можно добавить собственный заголовок в верхней части формы, чтобы пользователям было сразу понятно, для чего она предназначена.
• Accent Colour — этот параметр изменяет внешний вид кнопок, линии прогресса и иконок. Встроенный выбор цвета позволяет легко подобрать оттенок под стиль сайта.
• Scroll Animation — при включении этой опции после нажатия кнопки «Next» пользователь автоматически прокручивается к верхней части формы. Это особенно полезно на длинных страницах, где форма может находиться ниже первого экрана.

Форма Lead Form может быть дополнительно настроена с помощью расширенных параметров оформления. Для доступа к ним необходимо активировать Advanced Style Settings.

Чтобы визуально отделить Lead Form от остальных элементов страницы, вы также можете включить опцию Form Container, которая оборачивает форму в отдельный контейнер.

Метод 3: Создание формы с помощью ИИ

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

Для начала перейдите в админ-панели WordPress в раздел WPForms » Add New и наведите курсор на фиолетовую кнопку Generate With AI. Затем нажмите Generate Form, чтобы открыть AI-конструктор форм.

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

После ввода запроса, например: “Create a multistep lead generation form with fields for name, email, company, country, product interest”, инструмент в течение нескольких секунд автоматически создаст форму. Важно отметить, что поля не добавляются в виде одного длинного списка. Если в запросе указано несколько тематических блоков, AI автоматически использует Page Break, чтобы разделить форму на логические шаги.

Готовую форму можно сразу просмотреть в интерфейсе. Если результат вас устраивает, нажмите Use This Form, после чего форма загрузится в конструктор. Здесь вы сможете вносить изменения, переставлять поля, менять порядок шагов и редактировать заголовки разделов.

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

После внесения всех правок обязательно нажмите Save, чтобы сохранить изменения.

Шаг 4: Настройка уведомлений и подтверждений

Следующий важный шаг — настройка уведомлений и сообщений подтверждения для многошаговой формы. Для начала перейдите к пункту Notifications на вкладке Settings в левой части конструктора форм.

Здесь вы можете отредактировать стандартные параметры уведомлений, например изменить тему письма или адреса получателей, если это необходимо.

Если вы используете Smart Tags, вы также можете настроить отправку уведомления на email пользователя после отправки формы. Таким образом пользователь будет проинформирован, что форма успешно отправлена и с ним свяжутся в ближайшее время.

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

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

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

Шаг 5: Добавление многошаговой формы на сайт WordPress

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

Наиболее распространённый вариант — вставка формы на страницу или запись. Чтобы начать, нажмите кнопку Embed в верхней части конструктора форм.

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

Затем выберите название страницы, на которой будет встроена форма, и нажмите кнопку Let’s Go. Сразу откроется редактор блоков WordPress, а многошаговая форма будет уже встроена.

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

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

Для быстрого изменения стиля формы можно выбрать готовую тему в разделе Form Theme. В этом примере используется тема Frost.

Можно попробовать и другие темы — вариантов много. Если хочется экспериментировать напрямую, можно также вручную настраивать отдельные элементы формы более точно.

Когда все настройки готовы, нажмите Publish, и многошаговая форма WordPress будет опубликована!

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

Источник: https://wpforms.com/how-to-create-a-multi-part-form-in-wordpress/

---

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520

---