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

Опубликовано: 2020-07-24

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

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

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

Прежде всего, вам нужно убедиться, что WPForms установлен на вашем сайте WordPress.

Теперь перейдите в WPForms » Add New , чтобы создать новую форму.

В этом руководстве я создам простую контактную форму.

Я уверен, что вы находитесь на вкладке Настройка формы .

Теперь назовите свою форму и выберите шаблон , который хотите использовать.

Простой шаблон контактной формы
Создание простого контакта с помощью плагина WPForm

Здесь я выбираю шаблон простой контактной формы .

WPForms создаст простую контактную форму в конструкторе перетаскивания.

Простая контактная форма с использованием WPForms
Простая контактная форма с использованием WPForms

Теперь вы автоматически перенаправляетесь на вкладку «Поля» , откуда вы можете добавлять дополнительные поля в свои формы, просто перетаскивая их.

Получить плагин WPForms

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

Следующим шагом будет разделение вашей формы на разные части.

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

Поле «Разрыв страницы» находится под « Причудливыми полями », сразу под « Стандартными полями» .

Причудливое поле разрыва страницы в WPForms
Причудливое поле разрыва страницы в WPForms

Поместите поле из того места, где вы хотите разделить форму.

Вы можете добавить поле «Разрыв страницы» в любое место. И что интересно, вы можете добавить оттуда дополнительные поля формы, чтобы завершить форму.

Двигаясь вперед, пришло время настроить индикатор выполнения.

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

Чтобы упростить задачу, в WPForms есть три разных индикаторных полосы в виде цепочек:

  1. Соединители: показывает соединительную полосу и заголовки страниц каждой части вашей многоэтапной формы.
  2. Круги: показывает один круг и заголовок страницы на страницу в вашей многошаговой форме.
  3. Индикатор выполнения: показывает ход заполнения формы по мере ее заполнения пользователем.
Раздел разрыва первой страницы.
Раздел разрыва первой страницы.

Для настройки индикатора выполнения вам нужно щелкнуть раздел разрыва первой страницы .

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

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

Раздел «Разрыв второй страницы» в wpforms
Раздел «Разрыв второй страницы» в wpforms

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

Отображать кнопку предыдущей страницы в разрыве страницы wpform
Отображать кнопку предыдущей страницы в разрыве страницы wpform

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

После этого нажмите Сохранить .

Время настройки параметров формы

На вкладке « Настройки » перейдите в « Общие ».

Общие настройки формы в WPForms
Общие настройки формы

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

  • Имя формы: Здесь вы можете изменить имя формы.
  • Описание формы: Вы можете добавить описание формы.
  • Текст кнопки отправки: настройте текст кнопки отправки.
  • Предотвращение спама: остановите спам в контактной форме с помощью функции приманки или Google reCAPTCHA.

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

  • Формы AJAX: включите настройки AJAX без перезагрузки страницы.
  • Усовершенствования GDPR: вы можете отключить сохранение входной информации и сведений о пользователе, таких как IP-адреса и пользовательские агенты, чтобы соответствовать требованиям GDPR.

После этого нажмите Сохранить .

Перейдем к настройке уведомлений формы.

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

Уведомления формы
Управление уведомлениями формы

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

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

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

В WPForms есть три типа подтверждения на выбор:

  • Сообщение: это тип подтверждения по умолчанию в WPForms. Когда посетитель сайта отправит форму, появится простое сообщение, подтверждающее, что его форма была обработана. Посмотрите здесь несколько отличных сообщений об успехе, которые помогут повысить удовлетворенность клиентов.
  • Показать страницу: этот тип подтверждения перенаправляет посетителей сайта на определенную веб-страницу на вашем сайте, поблагодарив их за отправку формы. Чтобы сделать это, ознакомьтесь с нашим руководством по перенаправлению клиентов на страницу благодарности. Также обязательно ознакомьтесь с нашей статьей о создании эффективных страниц благодарности для повышения лояльности клиентов.
  • Перейти к URL-адресу (перенаправление): этот параметр используется, когда вы хотите направить посетителей сайта на другой веб-сайт.

Для начала нажмите на вкладку Подтверждение . Теперь выберите тип подтверждения из раскрывающегося списка. Здесь я собираюсь выбрать тип сообщения.

Управление подтверждением WPForms
Управление подтверждением WPForms

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

После этого нажмите Сохранить .

Теперь все готово для добавления формы на ваш сайт.

Для начала создайте новую страницу или пост в своем WordPress. После этого щелкните внутри первого блока, найдите WPForms и выберите значок WPForms .

Встраивание WPForms в страницу WordPress
Встраивание WPForms в страницу WordPress

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

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

Опубликуйте свой пост или страницу, чтобы контактная форма появилась на вашем сайте.

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