БЛОГ 2410

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

Как создать многостраничную форму в WordPress
Обсудим ваш проект?

Предлагаем обсудить, чем мы можем вам помочь. Забронируйте 15-минутную консультацию.

Поделиться статьей

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

Создание многостраничной формы в WordPress
Создание многостраничной формы в WordPress Изображение с сайта wpbeginner.com

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

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

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

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

Пример многоэтапной страницы оформления заказа
Пример многоэтапной страницы оформления заказа Изображение с сайта wpbeginner.com

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

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

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

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

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

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

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

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

Лицензионный ключ WPForms
Лицензионный ключ WPForms Изображение с сайта wpbeginner.com

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

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

Добавление новой формы в WPForms
Добавление новой формы в WPForms Изображение с сайта wpbeginner.com

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

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

Редактор форм в WPForms
Редактор форм в WPForms Изображение с сайта wpbeginner.com

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

Добавление полей формы в WPForms
Добавление полей формы в WPForms Изображение с сайта wpbeginner.com

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

Добавление поля разрыва страницы
Добавление поля разрыва страницы Изображение с сайта wpbeginner.com

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавить кнопку формы
Добавить кнопку формы Изображение с сайта wpbeginner.com

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

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

Выберите и вставьте многостраничную форму
Выберите и вставьте многостраничную форму Изображение с сайта wpbeginner.com

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

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

Предварительный просмотр страничной формы в WordPress
Предварительный просмотр страничной формы в WordPress Изображение с сайта wpbeginner.com

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

Свяжитесь с нами.

Узнайте, чем мы можем быть для вас полезны.

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

Агентство веб разработки.

Услуги программирования и веб разработки по фиксированной цене. Специализация: WordPress, разработка B2B решений и создание кастомных скриптов.

WordPress

Разработка шаблонов, плагинов, интернет магазинов на WooCommerce, создание сайтов

Подробнее

B2B решения

CRM, ERP, внутренние системы, автоматизация, калькуляторы, SaaS и индивидуальные решения

Подробнее

Программирование

Разработка кастомных скриптов, API, интеграции, Zapier, Integromat, автоматизация

Подробнее

Подписка

Безлимитные услуги графического дизайна и веб разработки по фиксированной цене

Подробнее