Wpforms lite как настроить

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

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

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

Current Version: 1.7.0

Last Updated: 07.10.2021

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

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

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

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

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

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

Несколько причин для использования много-страничных форм:

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

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

Для создания пошаговых форм вы можете использовать разные плагины. В этой статье пример создания формы с помощью плагина WPForms.

1. Создайте форму

Установите и активируйте плагин. Чтобы создать новую форму, перейдите в WPForms — Add New.

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

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

Откройте форму, вы попадете в конструктор полей:

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

Форма обратной связи довольно короткая, вы можете создать более длинные формы:

• Форма запроса чего-либо
• Заявление о приеме на работу
• Форма заказа
• Форма опроса
• Голосование
• Форма регистрации
• И так далее

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

2. Разделение формы на несколько шагов

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

Поле Page Break находится в разделе Fancy Fields. Перетащите поле в нужное место:

Добавьте столько разрывов страниц, сколько вам нужно.

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

Спрашивайте только то, что нужно. Дополнительную информацию вы можете получить позже.

3. Настройка полоски прогресса

Полоска прогресса, или прогресс бар — аналог хлебных крошек.

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

В WPForms вы можете использовать 3 типа индикаторов:

• Коннекторы: Показывает название каждой страницы в мульти-шаговой форме.
• Круги: Показывает заполненный круг и название каждый страницы.
• Прогресс бар: Показывает движение посетителя по мере заполнения полей.

Чтобы настроить прогресс бар и название первой страницы формы, кликните по первому разрыву формы First Page:

Откроется настройщик поля, в котором вы можете выбрать, какой прогресс бар использовать.

Выберите цвет индикатора, и дайте название этой странице (если вы используете Круги или Коннекторы).

Если вы не назовете страницы, посетители увидят только индикатор прогресса без названий страниц.

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

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

Дайте название кнопке и нажмите Save.

4. Настройка формы

Чтобы сделать настройки формы, перейдите в Settings — General.

Здесь вы можете сделать такие настройки:

• Название формы (Form Name) — Замените название формы на свое.
• Описание формы (Form Description) — Дайте описание форме.
• Текст кнопки Отправить (Submit Button Text) — Замените текст на кнопке.
• Текст во время обработки формы (Submit Button Processing Text) — Добавьте ваш текст.
• Предотвращение спама (Spam Prevention) — Уменьшите количество спама с помощью невидимого поля (honeypot) или Google reCAPTCHA.
• AJAX Формы (AJAX Forms) — Включает ajax форму без перезагрузки страницы.
• Настройки GDPR — Вы можете отключить хранение информации, которую вводили посетители, и информацию об IP и браузере посетителей, чтобы соответствовать требованиям GDPR.

Когда все готово, нажмите Save.

5. Настройте оповещения формы

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

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

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

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

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

Перейдите в WPForms — Settings — Email — HTML Template — Header Image:

Загрузите вашу картинку, она будет отображаться в хедере всех писем:

6. Настройте подтверждение формы

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

Опять же, это особенно полезно с много-шаговыми формами.

В WPForms вы можете выбрать один из 3 типов подтверждений:

1. Сообщение (Message). Это тип подтверждений по умолчанию. Когда посетитель отправляет форму, ему показывается сообщение, которое вы можете настроить в поле ниже.
2. Редирект на другую страницу (Show Page). После отправки формы посетитель будет перенаправлен на выбранную страницу. Например, на страницу благодарности, или любую другую.
3. Редирект на другой сайт (Go to URL (Redirect)). Используйте эту опцию для перенаправления посетителя на другой сайт.

Подтверждения настраиваются в разделе Settings — Confirmation. Выберите один из типов подтверждения и сделайте остальные настройки.

7. Добавьте форму на сайт

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

Чтобы добавить форму на Страницу или в Пост, нажмите на иконку формы внутри блока Гутенберг:

Этот блок изменится на блок WPForms. В выпадающем меню выберите нужную форму:

Нажмите Обновить или Опубликовать:

Заключение:

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

Многошаговая форма — хороший инструмент для увеличения конверсии.

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

Читайте также:

Надеюсь, статья была полезна. Оставляйте комментарии.

Источник

WPForms: самый простой способ добавить контактную форму на ваш сайт

Здравствуйте, уважаемые подписики и читатели моего блога!

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

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

До сих пор?

WPForms — это совершенно новый плагин, который обеспечивает простой способ добавления формы контакта на ваш веб-сайт WordPress.

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

Зачем нужен новый плагин контактной формы?

Сейчас в репозитории Вордпресс имеются более тысячи плагинов контактных форм. Назревает вопрос — зачем создавать еще один плагин контактной формы, если их и так очень много?

Сайед Балхи, создатель плагина, объясняет:

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

Сайед Балхи и его партнер по разработке — Джаред Атчисон решили сосредоточиться на этой общей проблеме пользователей WordPress и решили разработать WPForms.

В чем отличия WPForms от других популярных плагинов контактных форм?

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

В настоящее время наиболее популярными плагинами контактных форм являются Contact Form 7, инструмент «Contact Form» в плагине Jetpack и плагин Gravity Forms. Хотя каждый из них имеет свои преимущества, им не хватает гибкости и удобства использования, которые предлагает WPForms.

Например, плагин Contact Form 7 рекламирует, что он «простой, но гибкий». Однако создание формы с использованием интерфейса — это точно не для новичка WordPress:

Отправная точка для создания новой формы в Contact Form 7. Если бы вы были новичком в WordPress это выглядело бы для вас просто?

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

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

Отличие WPForms

Важно отметить, что есть две версии плагина WPForms: платная версия и бесплатная версия «Lite».

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

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

2) Drag & Drop формы: Правильно. Создайте любую форму, которая вам нравится, даже не увидев строки кода. Просто нажмите на поле, которое вы хотите добавить и перетащите его в новую форму.

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

4) Простые настройки: очень просто настроить — куда отправляются уведомления из форм, какие уведомления будут указаны, и какой тип подтверждения пользователь увидит после отправки формы.

5) Самая простая интеграция форм: это, как правило, самая сложная часть плагина контактной формы, но я обнаружил, что WPForms делает ее простой:

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

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

с) И теперь ваша форма оживет!

6) Каждое поле, которое вам нужно: радиокнопки, выпадающие меню, параметры загрузки файлов, поля адреса/телефона, флажки, поля оплаты и т. д. Каждое поле, которое вам нужно для ваших форм — доступно.

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

8) Mobile-Ready, SEO Friendly и Fast: все формы, независимо от того, создаете ли вы свою собственную или используете шаблон, на 100% отзывчивы, то есть работают на мобильных устройствах, планшетах и ​​настольных компьютерах. Кроме того, они соответствуют лучшим практикам SEO и работают молниеносно.

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

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

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

А я с вами буду прощаться — до скорых встреч!

Источник