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

Многошаговая форма WPForms
Если вам необходимо создать форму с большим числом полей ввода, то лучше использовать пошаговую(многошаговую) или много-страничную форму.

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


Контактная форма от WPForms — генератор динамических форм для WordPress

Использование много-шаговой формы вместо одной длинной формы повышает конверсию.

В данной статье вы узнаете, как создать пошаговую форму при помощи плагина WPForms.

  • Обзор плагина WPForms

В данной статье мы рассмотрим:

Зачем использовать много-шаговую формуКак создать много-шаговую форму при помощи плагина WPForms

  1. Создайте форму
  2. Разделение формы на пару шагов
  3. Параметр полоски прогресса
  4. Параметр формы
  5. Настройте оповещения формы
  6. Настройте подтверждение формы
  7. Добавьте форму на веб-сайт

Заключение

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

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

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

В этом исследовании говорится, что применение много-шаговых форм значительно увеличивает конверсию.

Пару причин для использования много-страничных форм:

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

Как создать много-шаговую форму при помощи плагина WPForms

Для создания пошаговых форм вы можете без проблем использовать различные плагины. В данной статье пример создания формы при помощи плагина WPForms.

1. Создайте форму

Установите и активируйте плагин. Чтобы создать новую форму, перейдите в WPFormsAdd New.

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

В этом примере я буду использовать форму обратной связи. Выберите шаблон, дайте ему название, или используйте готовое название.

WPForms - Шаблон формы обратной связи
Шаблон формы обратной связи

Откройте форму, вы попадете в конструктор полей ввода:

WPForms- Форма обратной связи
Форма обратной связи

В этом шаблоне есть готовые поля ввода Имя, Е-мейл и Сообщение. Кликните по любому полю ввода, чтобы отредактировать его или перетащить на иное место, или добавьте иные поля ввода из левой части.

Форма обратной связи довольно короткая, вы можете без проблем создать более длинные формы:

  • Форма запроса чего-либо
  • Заявление о приеме на работу
  • Форма заказа
  • Форма опроса
  • Голосование
  • Форма регистрации
  • И так далее

Данные формы обычно длиннее и скорее всего потребуют потребуют пару шагов, особенно если вы спрашиваете много информации.

2. Разделение формы на пару шагов

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

Поле ввода Page Break находится в разделе Fancy Fields. Перетащите поле ввода в нужное место:

WPForms - Разделение формы
Разделение формы

Добавьте столько разрывов страниц, сколько вам необходимо.

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

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

3. Параметр полоски прогресса

Полоска прогресса, или прогресс бар — аналог хлебных крошек.

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

В WPForms вы можете легко использовать 3 типа индикаторов:

  • Коннекторы: Показывает название каждой страницы в мульти-шаговой форме.
  • Круги: Показывает заполненный круг и название каждый страницы.
  • Прогресс бар: Показывает движение пользователя по мере заполнения полей ввода.
WPForms-Прогресс бар
Прогресс бар

Чтобы изменить прогресс бар и название первой страницы формы, кликните по первому разрыву формы First Page:

WPForms - Кликните по First Page
Кликните по First Page

Откроется настройщик поля ввода, в котором вы можете выбрать, какой прогресс бар использовать.

Выберите цвет индикатора, и дайте название данной странице(если вы используете Круги или Коннекторы).

Если вы не назовете страницы, пользователи увидят только индикатор прогресса без названий страниц.

WPForms - Параметр прогресс бара
Параметр прогресс бара

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

WPForms - Параметр кнопки Следующая страница
Параметр кнопки Следующая страница

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

WPForms - Параметр кнопки Предыдующая страница
Параметр кнопки Предыдующая страница

Дайте название кнопке и нажмите Save.

4. Параметр формы

Чтобы сделать параметра формы, перейдите в SettingsGeneral.

WPForms - Параметр формы
Параметр формы

Здесь вы можете сделать такие параметра:

  • Название формы( Form Name) — Замените название формы на.
  • Описание формы( Form Description) — Дайте описание форме.
  • Текст кнопки Отправить( Submit Button Text) — Замените текст на кнопке.
  • Текст во время обработки формы( Submit Button Processing Text) — Добавьте текст.
  • Предотвращение спама ( Spam Prevention ) — Уменьшите число спама при помощи невидимого поля ввода (honeypot) или Google reCAPTCHA.
  • AJAX Формы ( AJAX Forms ) — Имеет ajax форму без перезагрузки страницы.
  • Параметра GDPR — Вы можете легко отключить хранение информации, которую вводили пользователи, и информацию об IP и браузере пользователей, чтобы соответствовать требованиям GDPR.

Когда все готово, нажмите Save .

5. Настройте оповещения формы

Вы можете без труда изменить оповещения на е-мейл каждый раз, когда пользователь заполняет форму.

WPForms - Параметр уведомлений
Параметр оповещений

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

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

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

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

Перейдите в WPFormsSettingsEmailHTML TemplateHeader Image :

WPForms - Параметр шаблона писем
Параметр шаблона писем

Загрузите картинку, она будет выводиться в хедере всех писем:

WPForms - Заголовок писем
Заголовок писем

6. Настройте подтверждение формы

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

Опять же, это особенно полезно с много-шаговыми формами.

В WPForms вы можете без труда выбрать один из 3 типов подтверждений:

  1. Сообщение ( Message ). Это тип подтверждений по умолчанию. Когда пользователь отправляет форму, ему показывается сообщение, которое вы можете без труда изменить в поле ввода ниже.
  2. Редирект на другую страницу ( Show Page ). После отправки формы пользователь будет перенаправлен на выбранную страницу. К примеру, на страницу благодарности, или любую другую.
  3. Редирект на другой веб-сайт ( Go to URL (Redirect) ). Используйте эту опцию для перенаправления пользователя на другой веб-сайт.

Подтверждения настраиваются в разделе SettingsConfirmation . Выберите один из типов подтверждения и сделайте остальные параметра.

WPForms - Подтверждение отправки формы
Параметр сообщения об отправке формы

7. Добавьте форму на веб-сайт

После того, как вы создали форму, ее необходимо добавить на веб-сайт. Вы можете добавить формы WPForms на Страницы, в Записи и в сайдбар при помощи виджета.

Чтобы добавить форму на Страницу или в Пост, нажмите на иконку формы внутри блока Гутенберг:

WPForms - Вставьте форму
Кнопка добавления формы в Гутенберг

Этот блок изменится на блок WPForms. В выпадающем меню выберите нужную форму:

WPForms - Блок Гутенберг
Блок Гутенберг

Нажмите Обновить или Опубликовать :

WPForms - Сохраните страницу
Сохраните страницу

Заключение:

Если вам необходимо создать длинную форму с более чем 3-5 полями ввода, лучше использовать пошаговую форму, так как пару страниц с 2-3 полями ввода конвертируют лучше, чем одна длинная форма.

Многошаговая форма — хороший инструмент для увеличения конверсии.

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

Читайте также :

  1. Обзор плагина WPForms
  2. Как создать опрос в WPForms
  3. Интеграция WPForms с Salesforce

Надеюсь, статья была полезна. Оставляйте комментарии.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *