Как сделать форму с индикатором выполнения

Опубликовано: 2022-04-22

Хотите знать, как добавить индикатор выполнения в форму?

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

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

Что такое индикатор выполнения в формах?

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

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

Как сделать форму с индикатором выполнения

Вот шаги, которые мы собираемся предпринять:

WPForms — лучший плагин для создания форм WordPress. Получите это бесплатно!
    1. Установите плагин WPForms.
    2. Создать новую форму
    3. Добавьте разрывы страниц в форму
    4. Сохраните и опубликуйте форму
    5. Проверьте индикатор выполнения формы

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

1. Установите плагин WPForms

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

Вкладка «Скачать» в WPForms

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

Кнопка «Скачать WPForms»

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

Установка WPForms на ваш сайт

После того, как вы загрузили zip-файл, перейдите на свой сайт WordPress, где вы хотите установить WPForms. Затем в панели администратора перейдите в « Плагины » « Добавить новый » и нажмите кнопку « Загрузить плагин ».

Кнопка «Загрузить плагин» в WordPress

Отсюда нажмите кнопку « Выбрать файл» и выберите только что загруженный zip-файл WPForms.

Красная стрелка, указывающая на кнопку «Выбрать файл»

После загрузки файла нажмите кнопку « Установить сейчас» .

Кнопка «Установить сейчас» на WordPress

Это начнет процесс установки для вас. После установки плагина нажмите кнопку « Активировать плагин », чтобы активировать WPForms на вашем сайте.

Красная стрелка указывает на кнопку «Активировать плагин».

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

Вот и все! Теперь мы можем приступить к созданию новой формы.

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

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

Затем, чтобы создать новую форму, нажмите кнопку « Добавить новую », чтобы запустить конструктор форм WPForms.

Добавить новую форму WPForms

На странице «Настройка» построителя форм вы можете назвать свою форму в поле ввода « Имя формы» .

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

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

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

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

Выберите раздел шаблона в WPForms

Для выбора шаблона вы можете использовать категории в меню слева. Вы также можете использовать панель поиска в верхнем левом углу библиотеки шаблонов для поиска среди доступных вариантов.

Выделение функции панели поиска шаблона

Как только вы найдете нужный шаблон, наведите на него курсор и нажмите кнопку « Использовать шаблон ».

Стрелка, указывающая на большую оранжевую кнопку «Использовать шаблон»

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

3. Добавьте разрывы страниц в форму

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

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

Движущееся изображение перетаскивания поля разрыва страницы в конструктор форм

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

Настройка индикатора выполнения

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

Стрелка, указывающая на первую страницу/индикатор прогресса

Вы можете настроить индикатор выполнения в раскрывающемся списке « Индикатор прогресса» .

Стрелка, указывающая на параметры настройки индикатора выполнения

Затем вы можете выбрать один из трех стилей индикатора выполнения: Индикатор выполнения , Круги или Соединитель .

Индикатор:

Изображение индикатора прогресса в WPForms

Круги:

Стиль круга индикатора выполнения WPForms

Разъем:

Стиль соединителя для индикатора выполнения WPForms

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

Селектор цвета для функции индикатора выполнения в WPForms

Наконец, введите имя для первой страницы формы в поле « Заголовок страницы ».

Стрелка, указывающая на поле заголовка формы, чтобы переименовать форму

Однако, если вы довольны тем, как выглядит ваша форма, вы можете скрыть индикатор выполнения, выбрав « Нет ».

Стрелка, указывающая на кнопку стиля индикатора прогресса

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

4. Сохраните и опубликуйте форму

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

Большая оранжевая кнопка «Сохранить» для сохранения формы.

Затем вы можете использовать мастер встраивания, чтобы интегрировать форму на свой веб-сайт, нажав кнопку « Встроить ».

Кнопка встроить форму

Отсюда у вас будет возможность либо создать новую страницу для встраивания формы, либо выбрать существующую страницу для добавления формы.

Параметры встраивания в WPForms

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

Имя новой страницы для встраивания формы

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

Выберите вариант существующей страницы с помощью большой кнопки «Поехали».

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

Теперь вы можете просмотреть свою форму на выбранной странице. Либо перейдите на страницу, на которую вы его встроили, либо перейдите в WPForms »Все формы . Наведите указатель мыши на заголовок формы, чтобы отобразить дополнительное меню параметров. Когда параметры появятся, нажмите Предварительный просмотр .

Опция предварительного просмотра формы на WPForms

5. Проверьте индикатор выполнения формы

Теперь у вас будет форма с индикатором выполнения, подобным этому:

Пример того, как индикатор выполнения будет выглядеть на WPForm

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

Примечание . Поля разрыва страницы можно перемещать вверх или вниз по форме, если вы хотите настроить макет.

Затем станьте экспертом по созданию форм

Хотели бы вы расширить свои знания о создании WPForm? Обязательно ознакомьтесь с нашим полным руководством по полям форм и тому, как настроить поля в формах.

Готовы ли вы построить свою форму сейчас? Не забудьте подписаться на WPForms Pro, так как он включает в себя поле разрыва страницы и индикатор выполнения, сотни бесплатных шаблонов, а также мы предлагаем 14-дневную гарантию возврата денег.

Создайте свою форму WordPress сейчас

Если эта статья помогла вам, подпишитесь на нас в Facebook и Twitter, чтобы получить больше бесплатных руководств и руководств по WordPress.