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

Вы хотите создать многошаговую форму или многостраничную форму в WordPress? Этот Учебник по WordPress объясняет тебе все ?

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

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

Но раньше, если вы никогда не устанавливали WordPress, откройте для себя Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге 

Тогда вернемся к тому, почему мы здесь. 

Но зачем использовать многостраничные формы в WordPress?

Зачем добавлять многостраничную форму в WordPress?

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

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

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

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

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

В этом уроке мы будем использовать WPForms для создания многостраничных форм в WordPress. WPForms — лучший плагин для создания форм WordPress с помощью перетаскивания. И с более чем 3 миллионами активных установок это самый удобный инструмент для начинающих.

Лучше всего то, что у него есть как бесплатная, так и платная версия, но сегодня мы собираемся использовать Pro-версию WPForms для создания многостраничной формы в WordPress.

Также прочитайте наше руководство на Как настроить формы WPForms с помощью Elementor

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

Шаг 1: Создайте новую форму в WordPress

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

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

Зайти в меню WPForms -> Добавить для создания новой формы и отображения доступных шаблонов.

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

WPForms откроет шаблон формы в конструкторе форм перетаскивания для редактирования.

Как видите, форма пуста, поэтому мы начнем перетаскивать в нее поля. Мы собираемся удалить следующие поля: 

• Фaмилия
• Эл. адрес
• Комментарий или сообщение

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

Если вы хотите добавить более одного Контактная форма на свой веб-сайт WordPress вы также можете создавать следующие типы форм с помощью WPForms:

• Форма запроса
• Форма онлайн-заказа
• Типовая форма Стильная форма
• Форма загрузки файла

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

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

Шаг 2: Разделите форму на части

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

Для этого загляните под заголовок сложных полей и перетащите поле формы Разрыв страницы в правой панели.

Перетащите поле в форме туда, где вы хотите, чтобы оно было разделено.

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

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

Шаг 3. Настройте индикатор выполнения формы.

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

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

1. Соединители - Соединительные полосы и заголовки страниц для каждого шага вашей формы.
2. Cercles - Пронумерованные круги и заголовки страниц для каждого шага формы.
3. Индикатор - Индикатор прогресса пользователя по мере выполнения шагов формы.

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

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

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

Затем вы можете редактировать кнопку Страница suivante и текст, который переводит пользователей на следующую страницу вашей формы.

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

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

Когда вы закончите настройку индикатора выполнения, нажмите Регистрация и переходите к следующему шагу.

Шаг 4. Измените настройки формы

Теперь давайте перейдем к изменению настроек формы. Для этого перейдите на Настройки -> Общие.

В этом разделе вы можете установить следующие параметры:

• Название формы - Дайте вашей форме новое имя, если хотите.
• Описание формы - Добавьте описание в форму для справки.
• Отправить текст кнопки - Отредактируйте текст кнопки отправки.
• Включить защиту от спама  – Включите опцию защиты от спама, чтобы спамеры не рассылали нежелательные сообщения.

После настройки параметров нажмите Регистрация.

Шаг 5. Настройте уведомления формы

Настройки уведомлений в WPForms, отправка электронного письма при отправке формы на вашем сайте WordPress.

Вы можете найти настройки уведомлений, нажав Настройки -> Уведомления.

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

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

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

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

Шаг 6: Установите сообщение подтверждения формы

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

В WPForms есть 3 типа подтверждающих сообщений:

1. Сообщение – Простое сообщение, информирующее пользователей о том, что их форма была отправлена.
2. Показать страницу – Отправляйте пользователей на другую страницу, например страницу благодарности, после отправки формы.
3. Перейти по URL (перенаправление) – Отправляйте посетителей сайта на другой сайт после отправки формы.

Чтобы настроить подтверждающее сообщение, нажмите Настройки -> Подтверждение.

Затем выберите тип сообщения, которое вы хотите показывать своим посетителям после заполнения формы. Для этого урока мы выберем Сообщение.

Теперь настройте текст сообщения в соответствии с вашими потребностями и нажмите на Регистрация когда вы удовлетворены.

Теперь вы готовы добавить свою форму в WordPress.

Шаг 7: Добавьте форму в WordPress

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

Давайте посмотрим, как добавить многостраничную форму на страницу WordPress.

Чтобы начать, перейдите в админ-панель WordPress и нажмите Страницы -> Добавить.

Затем щелкните значок плюса в редакторе WordPress, чтобы добавить новый блок контента. В поле поиска введите WPForms, чтобы легко найти его.

Теперь нажмите на блок WPForms, чтобы добавить его на свою страницу.

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

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

И это все ! Вы узнали, как создать многостраничную форму.

Другие рекомендуемые ресурсы

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

• Использование различных фонов WordPress
• Как управлять URL-адресами изображений вашего блога WordPress
• Как настроить CloudFlare CDN для вашего блога WordPress
• Мошенничество с PayPal: как их распознать?

Заключение

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

Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.

А пока не забудьте оставить нам свой Комментарии и предложения в специальном разделе.

...