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

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

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

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

В этой статье вы узнаете, как создать пошаговую форму с помощью плагина 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 - Подтверждение отправки формы
Настройка сообщения об отправке формы
Курсы английского языка SkyEng

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

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

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

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

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

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

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

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

Заключение:

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

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

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

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

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

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

комментария 2

Ответить

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

Techbear

Сайт для тех, кто хочет использовать Вордпресс по максимуму, но не хочет разбираться в коде.

WordPress   WooCommerce   Membership   Elementor   ACF

Обновления блога

Subsription - Gray Footer
Techbear