Как создать многоступенчатую форму в WordPress [Плагин и код]

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

Что такое многошаговая форма и когда она работает лучше всего?

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

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

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

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

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

Шаг 1: Установите плагин Claspo

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

1. Создайте учетную запись, чтобы использовать наш конструктор виджетов для вашего сайта.
2. Перейдите в магазин плагинов WordPress, найдите «Claspo» и нажмите Скачать.
3. Войдите в административную панель WordPress.
4. Перейдите в Плагины > Загрузить.
5. Выберите и загрузите файл.
6. После установки перейдите в Claspo и найдите ID Скрипта. В левом боковом меню, перейдите к <> Скрипт.
7. Проверьте интеграцию, и вы готовы!

Шаг 2: Перейдите в Claspo и создайте новую форму

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

Вы познакомитесь с нашим каталогом шаблонов. В фильтре «Особенности» выберите «Многоэтапные», и вы увидите все шаблоны многоэтапных форм. Выберите тему многоэтапной формы для вашего сайта на WordPress.

Шаг 3: Создайте свою многоэтапную форму

Для демонстрации мы будем использовать следующий шаблон:

Попробовать этот шаблон

Эта контактная форма для WordPress уже имеет три шага: 

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

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

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

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

Почему бы не заменить изображение, чтобы сделать форму еще более динамичной? Допустим, наш бизнес обучает различным стилям — это отличная возможность подчеркнуть это.

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

Будет разумно добавить здесь кнопку Назад на случай, если пользователи захотят изменить что-то, что ввели ранее. Просто добавьте вторую кнопку на шаг, нажмите на нее, откройте вкладку «Общие» и выберите «Предыдущая страница» в разделе «Действие по клику». Таким образом, пользователи смогут вернуться и в любое время внести изменения.

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

Шаг 4: Настройте правила отображения

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

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

Вы могли заметить три дополнительных триггера:

• Триггер запуска: запускатор — это маленькая иконка, которая остается в нижнем углу страницы. Пользователи могут нажать на нее, чтобы открыть всплывающее окно в любое время. Вы можете настроить его на первом этапе создания всплывающего окна или добавить позже. Это идеально для предоставления пользователям большей контроля.
• Триггер клика HTML: с его помощью можно использовать любой кликабельный элемент на странице для отображения всплывающего окна. Например, оно может появиться, когда кто-то нажмет на изображение, кнопку или текстовую ссылку.
• API-триггер: этот вариант позволяет программно управлять, когда и как отображаются всплывающие окна. Это отлично подходит для расширенной настройки, интеграции с другими сервисами или улучшения пользовательского опыта, но требует некоторого технического сигнала.

Как использовать форму, решать вам; в этом руководстве мы остановимся на предотвращении выхода. 

Шаг 5: Интегрируйте ваши формы с ESP или CRM

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

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

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

Шаг 6: Тестирование и оптимизация

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

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

Этап создания пошаговой формы WordPress с использованием пользовательского кода

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

• UI/UX дизайнер для создания интуитивно понятного дизайна.
• Фронтенд-разработчик для реализации интерфейса и логики навигации, включая любые необходимые конфигурации блочных элементов разбиения страниц формы.
• Бэкенд-разработчик для обработки и хранения данных.
• Специалист по контролю качества для тестирования формы на различных устройствах и сценариях.

Для простейшей формы, которую вы хотите создать, этот процесс может занять у небольшой команды от 20 до 40 часов. Однако сложные формы с продвинутыми функциями, такими как проверка в реальном времени или интеграции, могут потребовать 60-100+ часов, в зависимости от масштаба.

Шаг 1. Определение цели и структуры

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

Шаг 2. Проектирование пользовательского интерфейса

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

Шаг 3. Разработка Фронтенда

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

Шаг 4. Добавление проверки и обратной связи

Проверка обеспечивает точность и полноту собираемой информации. Проверка ввода может происходить в реальном времени на фронтенде или после отправки на бэкенде.

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

Шаг 5. Реализация обработки данных

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

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

Шаг 6. Тестирование и доработка

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

Типы форм, которые лучше конвертируются в многошаговом формате

Точно так же, как существуют наилучшие области применения для простых одношаговых форм, многошаговые формы WordPress отлично подходят для:

1. Формы регистрации

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

Использовать этот шаблон

2. Формы генерации лидов

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

Использовать этот шаблон

3. Опросы и отзывы 

Оптимальное количество вопросов для формы обратной связи с несколькими страницами варьируется в зависимости от цели опроса, аудитории и желаемого времени его завершения. Однако исследования показывают, что 5-15 вопросов обычно достаточно для получения значимых данных. Если вы правильно сгруппируете свои вопросы и разбиваете форму на этапы, пользователям будет легче её заполнить.

Использовать этот шаблон

4. Формы предзаказа 

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

Использовать этот шаблон

5. Многошаговая форма регистрации в WordPress

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

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

Использовать этот шаблон

Советы по UX для улучшения конверсии многошаговых форм WP

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

Индикаторы прогресса формы

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

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

Один шаг = одна задача

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

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

Подсказки и инструкции

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

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

Экраны подтверждения и ошибок

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

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

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

Как и индикаторы прогресса, эти экраны являются стандартными в Claspo. Мы просто добавили их для каждой страницы вашей многошаговой формы. 

Мобильная удобоваримость

Сделать многошаговые формы удобными для мобильных устройств — это обязательное условие. Хотя средний размер экрана сегодня варьируется от 6.1 до 6.7 дюймов по диагонали — что может показаться достаточно места — нужно убедиться, что ваша форма легко взаимодействует. 

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

Многошаговый плагин для WordPress или дилемма с пользовательским кодом

Итак, перед вами стоит выбор: написать пользовательский код или использовать плагин для многошаговых форм WordPress, такой как Claspo. Давайте разберем это по простоте использования, времени выхода на рынок и стоимости — трем ключевым факторам для маркетологов, которым нужны быстрые результаты.

Простота использования

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

Время выхода на рынок

Создание пользовательских форм может занять дни (или даже недели) разработки и тестирования. С Claspo вы можете создать и запустить многошаговую форму для WordPress бесплатно и менее чем за 15 минут. Эта скорость позволяет быстро тестировать новые идеи, вносить изменения на лету и поддерживать вашу маркетинговую деятельность в темпе.

Стоимость

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

Главное

Для повседневных маркетологов плагин для создания форм-волшебников от Claspo является очевидным выбором. Он бесплатный, удобный и быстрый, позволяя воплотить ваши идеи в жизнь без проблем. Зачем тратить время и деньги на пользовательскую разработку, если можно достичь тех же (или лучших) результатов за считанные минуты с помощью Claspo?