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

/

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

Создание многостраничной формы в WordPress

Зачем и когда вам нужна многостраничная форма в WordPress?

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

Однако длинные формы пугают пользователей и увеличивают отказ от формы.

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

Пример многоэтапной страницы оформления заказа

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

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

Создание многостраничной формы WordPress с помощью WPForms

Мы будем использовать WPForms, который является наиболее удобным для новичков плагином контактной формы для WordPress. Вам понадобится как минимум базовая лицензия, которая стоит 39,50 долларов.

Вы можете использовать купон WPForms: SAVE50, чтобы получить скидку 50% на покупку любого плана WPForms.

Первое, что вам нужно сделать, это установить и активировать плагин WPForms. Для получения дополнительной информации см. Наше пошаговое руководство по установке плагина WordPress.

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

Скопируйте лицензионный ключ, а затем перейдите на страницу WPForms »Настройки на вашем сайте WordPress. Вставьте лицензионный ключ и нажмите кнопку подтверждения ключа.

Лицензионный ключ WPForms

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

Просто перейдите на страницу WPForms »Добавить новую, и она запустит конструктор форм.

Добавление новой формы в WPForms

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

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

Редактор форм в WPForms

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

Добавление полей формы в WPForms

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

Добавление поля разрыва страницы

Вы заметите, что WPForms добавит маркер разрыва страницы внизу и маркер первой страницы вверху страницы.

Он также переместит кнопку отправки на следующую страницу, а на вашей первой странице теперь будет кнопка «Далее».

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

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

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

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

Изменить заголовок страницы и текст следующей кнопки

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

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

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

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

Добавление многостраничной формы в сообщения и страницы WordPress

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

Создайте новый пост / страницу или отредактируйте существующий. В верхней части редактора сообщений вы увидите кнопку «Добавить форму».

Добавить кнопку формы

При нажатии на нее откроется всплывающее окно с формой вставки.

Выберите форму из раскрывающегося списка и нажмите кнопку «Добавить форму».

Выберите и вставьте многостраничную форму

Вы заметите, что шорткод WPForms добавлен в ваш пост / страницу. Теперь вы можете сохранить или опубликовать этот пост или страницу.

Посетите свой веб-сайт, чтобы увидеть свою многостраничную форму в действии.

Предварительный просмотр страничной формы в WordPress

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

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как добавить свой сайт на WordPress в Инструменты Яндекса для веб-мастеров

Хотите подключить свой сайт к инструментам Яндекс для веб-мастеров? Инструменты для веб-мастеров, такие как консоль поисковой системы от Google и

Как отключить кнопку параметров экрана в WordPress

Вы хотите отключить кнопку параметров экрана в WordPress? Кнопка параметров экрана позволяет отображать и скрывать элементы на разных страницах в

Как создать плагин WordPress TinyMCE

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

Как перенести WordPress с локального сервера на живой сайт (2 метода)

Один из способов ускорить разработку веб-сайта - создать веб-сайт локально на вашем собственном компьютере с помощью программного обеспечения,