Techbear
Сайт для тех, кто хочет использовать Вордпресс по максимуму, но не хочет разбираться в коде.
Если вам нужно создать форму с большим количеством полей, то лучше использовать пошаговую (многошаговую) или много-страничную форму.
Разделение длинной формы на несколько шагов или страниц — более оптимальное решение с точки зрения UX, потому что это увеличивает вовлечение пользователя.
Использование много-шаговой формы вместо одной длинной формы повышает конверсию.
В этой статье вы узнаете, как создать пошаговую форму с помощью плагина WPForms.
Содержание:
Зачем использовать много-шаговую форму
Как создать много-шаговую форму с помощью плагина WPForms
Если вам нужна форма с более чем тремя полями, лучше использовать пошаговую форму, которая разобьет длинную форму на несколько страниц.
Несколько шагов или страниц уменьшают усталость посетителя от длинной формы и увеличивают конверсию.
В этом исследовании говорится, что применение много-шаговых форм значительно увеличивает конверсию.
Несколько причин для использования много-страничных форм:
Для создания пошаговых форм вы можете использовать разные плагины. В этой статье пример создания формы с помощью платной версии плагина WPForms.
Установите и активируйте плагин. Чтобы создать новую форму, перейдите в WPForms — Add New.
Вы можете разбить любую форму на несколько частей или страниц, поэтому выберите один из готовых шаблонов, или создайте пустую форму.
В этом примере я буду использовать форму обратной связи. Выберите шаблон, дайте ему название, или используйте готовое название.
Откройте форму, вы попадете в конструктор полей:
В этом шаблоне уже есть готовые поля Имя, Е-мейл и Сообщение. Кликните по любому полю, чтобы отредактировать его или перетащить на другое место, или добавьте другие поля из левой части.
Форма обратной связи довольно короткая, вы можете создать более длинные формы:
Эти формы обычно длиннее и скорее всего потребуют потребуют несколько шагов, особенно если вы спрашиваете много информации.
После того, как вы настроили все нужные поля, добавьте поле Page Break из левой части, чтобы разбить форму в нужных местах.
Поле Page Break находится в разделе Fancy Fields. Перетащите поле в нужное место:
Добавьте столько разрывов страниц, сколько вам нужно.
Вы можете создать неограниченное количество полей и страниц, но не делайте формы слишком длинными.
Спрашивайте только то, что нужно. Дополнительную информацию вы можете получить позже.
Реклама
Простой способ выгодно купить полис
Полоска прогресса, или прогресс бар — аналог хлебных крошек.
В зависимости от того, что вам нужно, вы можете добавить прогресс бар, чтобы пользователь знал, в какой части формы он находится, и сколько осталось до конца.
В WPForms вы можете использовать 3 типа индикаторов:
Чтобы настроить прогресс бар и название первой страницы формы, кликните по первому разрыву формы First Page:
Откроется настройщик поля, в котором вы можете выбрать, какой прогресс бар использовать.
Выберите цвет индикатора, и дайте название этой странице (если вы используете Круги или Коннекторы).
Если вы не назовете страницы, посетители увидят только индикатор прогресса без названий страниц.
Чтобы настроить название следующей страницы и кнопку, с которой посетители переходят на следующую страницу, кликните раздел Page Break, который вы создали, когда добавляли разрыв страницы в форму.
Вы можете включить опцию, которая показывает кнопку Предыдущая страница, чтобы посетители могли вернуться на предыдущую страницу, если им это нужно.
Дайте название кнопке и нажмите Save.
Чтобы сделать настройки формы, перейдите в Settings — General.
Здесь вы можете сделать такие настройки:
Когда все готово, нажмите Save.
Вы можете настроить оповещения на е-мейл каждый раз, когда посетитель заполняет форму.
По умолчанию, когда кто-то заполняет форму и нажимает кнопку Отправить, вы будете получать об этом уведомление на почту.
Если вы используете Смарт Теги, вы также можете отправлять оповещения посетителям, когда они отправляют форму. Это даст им знать, что вы получили их сообщение и скоро свяжетесь с ними.
Эта функция особенно полезна с пошаговой формой, на которую пользователь потратил много времени. После отправки длинной формы пользователь хочет убедиться, что она прошла.
Чтобы ваши письма выглядели одинаково, вы можете добавить собственную картинку в заголовок шаблона писем.
Перейдите в WPForms — Settings — Email — HTML Template — Header Image:
Загрузите вашу картинку, она будет отображаться в хедере всех писем:
Подтверждение формы — это сообщение, которое показывается посетителю во фронт-энде после заполнения формы. Оно говорит людям, что их форма была обработана, и сообщает, какие шаги будут дальше.
В WPForms вы можете выбрать один из 3 типов подтверждений:
Подтверждения настраиваются в разделе Settings — Confirmation. Выберите один из типов подтверждения и сделайте остальные настройки.
После того, как вы создали форму, ее нужно добавить на сайт. Вы можете добавить формы WPForms на Страницы, в Посты и в сайдбар с помощью виджета.
Чтобы добавить форму на Страницу или в Пост, нажмите на иконку формы внутри блока Гутенберг:
Этот блок изменится на блок WPForms. В выпадающем меню выберите нужную форму:
Нажмите Обновить или Опубликовать:
Если вам нужно создать длинную форму с более чем 3-5 полями, лучше использовать пошаговую форму, потому что несколько страниц с 2-3 полями конвертируют лучше, чем одна длинная форма.
Многошаговая форма — хороший инструмент для увеличения конверсии.
Если вы считаете, что этот плагин может быть вам полезен, вы можете его купить на официальном сайте.
Читайте также:
Надеюсь, статья была полезна. Оставляйте комментарии.
Сайт для тех, кто хочет использовать Вордпресс по максимуму, но не хочет разбираться в коде.
Нет такого виджета
В платной версии плагина.