Как добавить многоэтапную форму в WordPress за 5 простых шагов

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

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

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

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

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

Что такое многошаговая форма?

Ну, как следует из названия, это форма с несколькими шагами, где вопросы/поля ввода разделены на разные шаги, а не помещаются все в один шаг. Если вы ищете определение, вот как HubSpot определяет многоступенчатую форму.

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

- Хабспот

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

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

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

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

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

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

Настройка, необходимая для создания многошаговой формы WordPress

Наряду с WordPress вам понадобятся еще два плагина для простого создания многошаговых форм в WordPress. Эти плагины WordPress:

1. Элементор (бесплатная версия)
2. Метформ (бесплатно и Pro)

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

После завершения установки вам необходимо создать страницу с помощью конструктора страниц Elementor, прежде чем вы сможете использовать Metform. Для этого перейдите в «Панель инструментов» ⇒ «Страница» ⇒ «Добавить новый ».

Теперь укажите подходящий заголовок , выберите Elementor Full Width в качестве шаблона, нажмите Publis h. После этого нажмите «Редактировать с помощью Elementor».

Наконец, вы готовы построить свою многоступенчатую форму. Итак, приступим к основному процессу.

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

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

В этом блоге вы научитесь создавать современную многошаговую форму с нуля всего за 5 простых шагов:

Шаг 1: Перетащите MetForm

Перейдя в режим « Редактировать с помощью Elementor », найдите MetForm и перетащите его в то место, где вы хотите, чтобы форма отображалась.

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

Нажмите на раздел формы, чтобы перейти к параметрам редактирования MetForm . Нажмите кнопку « Редактировать форму ».

Как только всплывает новое окно

• Выберите New (создать новую форму)
• Укажите имя формы для формы
• Выберите пустой шаблон,
• и нажмите на форму редактирования

Шаг 3: Создайте многошаговую форму с нуля, используя MetForm и конструктор страниц Elementor.

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

Добавить новый раздел

Перетащите поля ввода в соответствии с требованиями

Перетащите кнопку Prev/Next/Submit в зависимости от фразы формы

Укажите правильное название раздела

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

Форма бронирования Шаг первый – Личная информация:

• В разделе «Личная информация» нажмите значок Elementor + и выберите структуру с двумя равными столбцами .

• Найдите поле ввода текста и перетащите поле формы в левый столбец.

• Теперь, чтобы отредактировать атрибут этого поля ввода, щелкните знак редактирования, перейдите в « Содержимое» ⇒ «Содержимое » и отредактируйте следующие параметры:
  • Показать метку: включите этот параметр, чтобы отобразить метку поля ввода.
  • Позиция: вы можете расположить метку сверху или слева.
  • Метка: Дайте имя вашей метке. Я собираюсь использовать «Имя».
  • Имя: Поле имени является обязательным и должно быть уникальным. Поэтому обязательно дайте каждому полю другое имя и замените пробел на подчеркивание/дефис.
  • Заполнитель: Укажите текст заполнителя.
  • Текст справки: если вы хотите предоставить текст справки для пользователей, вы можете сделать это здесь.

• Затем перейдите в « Содержимое» ⇒ «Настройки », чтобы изменить следующие параметры:
  • Обязательно: чтобы сделать это поле формы обязательным, включите эту опцию.
  • Тип проверки: вы можете установить различные типы проверки для текстового поля в зависимости от длины символа, длины слова и выражения.
  • Предупреждающее сообщение: здесь вы можете установить предупреждающее сообщение, которое будет отображаться, если требование не будет выполнено.

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

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

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

• Теперь раздел для первого шага готов, чтобы дать правильное имя первому шагу
  • Нажмите на значок с шестью точками, чтобы открыть параметр настроек и перейти к макету ⇒ многошаговый .
  • Укажите имя в опции « Заголовок многошаговой вкладки» .
  • Выберите значок из библиотеки или загрузите SVG.
  • Нажмите на обновление, чтобы сохранить.

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

Форма бронирования Шаг второй – информация о бронировании:

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

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

• Наряду с упомянутой опцией настроек для текстового поля вы получаете следующие настройки для поля ввода даты в разделе « Содержимое» ⇒ «Настройки» .
  • Установить текущую дату как минимальную дату: включите этот параметр, чтобы установить текущую дату как минимальную дату.
  • Установите минимальную дату вручную: если вы не хотите устанавливать текущую дату в качестве минимальной даты, вы также можете установить минимальную дату вручную.
  • Установите максимальную дату вручную: Здесь вы можете установить максимальную дату.
  • Отключить список дат: вы можете использовать эту опцию, чтобы отключить некоторые даты. Чтобы отключить любую дату, нажмите кнопку + ДОБАВИТЬ ПУНКТ и выберите дату.
  • Ввод даты диапазона: Включив эту опцию, вы можете разрешить пользователям выбирать диапазон дат. Но для этой формы я оставлю эту опцию выключенной.
  • Ввод года: включите этот параметр, чтобы использовать год как часть ввода даты.
  • Ввод месяца: чтобы включить месяц как часть ввода даты, включите эту опцию.
  • Ввод даты: включите эту опцию, чтобы использовать дату (день) как часть ввода даты.
  • Формат даты: установите здесь формат ввода даты.
  • Локализация: выберите местоположение из раскрывающегося списка в зависимости от ваших предпочтений.
  • Хотите ввести время с ним: включите эту опцию, чтобы использовать время вместе с данными в качестве входных данных. Если вы включите эту опцию, вы получите другую опцию, которая включает время 24 часа. Используя эту опцию, вы можете включить 24-часовой формат.

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

• Скопируйте значение поля Имя поля ввода Check-In.
• Затем перейдите в Content ⇒ Conditional , включите опцию включения
• Выберите «И » в раскрывающемся списке «Критерии соответствия условию».
• В раскрывающемся списке «Действие» выберите « Показать это поле» .
• Нажмите + ДОБАВИТЬ ПУНКТ , в поле ввода if вставьте скопированное значение имени поля регистрации.
• Выберите « не пусто » в раскрывающемся списке «Совпадение» (сравнение).

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

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

И так как это промежуточный шаг, нам нужно включить кнопки Prev и Next .

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

Теперь второй шаг готов, переходим к третьему шагу.

Форма бронирования Шаг третий – дополнительная информация

Для третьего шага давайте добавим новый раздел с одним столбцом. И добавьте текстовое поле и назовите его «Дополнительная информация».

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

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

Чтобы дать имя третьему разделу, перейдите в макет ⇒ мультишаг и добавьте заголовок « Дополнительная информация » и добавьте значок.

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

Шаг 4: Включите опцию многошаговой формы в MetForm

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

• Перейдите в раздел «Содержимое» ⇒ «Настройки многошагового режима».
• Включите параметр «Включить многошаговый режим», чтобы активировать многошаговые параметры.
• Включите отображение многошаговой навигации, чтобы меню «Раздел» отображалось сверху. Вы также можете изменить различные настройки, такие как «Высота контейнера адаптивной формы», «Включить прокрутку вверх» и т. д.
• После внесения всех изменений нажмите «Обновить», чтобы сохранить

Шаг 5. Настройте подтверждение, уведомление и другие параметры для завершения

Теперь, когда вы разработали свою многоступенчатую форму. Давайте настроим все параметры формы, которые может предложить MetForm. Чтобы изменить настройки MetForm с панели инструментов WordPress, перейдите в MetForm ⇒ Forms ⇒ Нажмите на опцию «Редактировать » только что созданной формы.

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

Здесь вы найдете следующие настройки:

Общий:

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

Подтверждение:

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

Настройки уведомлений:

Вы также можете отправлять уведомления по электронной почте администратору с помощью MetForm. Включите параметр «Уведомление по электронной почте для администратора». Затем задайте тему сообщения электронной почты, адрес электронной почты, адрес электронной почты от, примечание администратора и т. д.

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

Помимо настроек, о которых я рассказал в этом блоге, вы также получаете интеграцию, такую ​​​​как REST API, Mail Chimp, Google Sheet и т. Д. Кроме того, интеграцию платежных шлюзов, таких как PayPal, Stripe. Интеграция с CRM, которая включает HubSpot, Zoho и т. д. Вы также получаете варианты аутентификации, такие как вход и регистрация . Для получения более подробной информации об этих настройках ознакомьтесь с нашей документацией MetForm.

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

Заворачивать

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

Теперь, когда вы знаете, как создать многоэтапную форму WordPress, вы можете создать собственную форму и логику. Я надеюсь, что вы используете возможности MetForm для создания замечательных многошаговых форм. Если у вас возникнут какие-либо проблемы на этом пути, поделитесь с нами, наша команда ответит как можно скорее.

Не забудьте проверить все удивительные функции, которые может предложить MetForm.