Как построить форму условной логики Elementor за 5 шагов

Добавление условной логики в форму Elementor может повысить скорость отправки форм.

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

Знаете ли вы, что самое лучшее в условной логической форме Elementor?

Что ж, самое приятное то, что построение условной логической формы Elementor — действительно простая задача. Особенно, если вы следите за этой статьей. Потому что в этом блоге вы узнаете, как построить форму условной логики Elementor всего за 5 шагов.

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

Итак, продолжайте читать….

Что такое условная логика в формах?

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

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

Зачем и когда использовать условную логику в форме Elementor?

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

Интересно, как?

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

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

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

По сути, условная форма в Elementor следует логике «Если условие». Например, если условие А истинно, то произойдет действие Х, иначе - нет. Вы также можете настроить множество условий для одного действия. Например, действие X будет иметь место только в том случае, если условие A и условие B оба истинны, или одно из них истинно.

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

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

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

Подводя итог, вот преимущества использования условной логики в форме Elementor:

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

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

Как построить форму Elementor с условной логикой: пошаговое руководство

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

Шаг 1: Установите необходимые плагины

Чтобы добавить условную логику в форму Elementor вместе с бесплатной версией Elementor, вам необходимо установить конструктор форм Elementor MetForm. Вам понадобятся оба

1. Метформ (бесплатно)
2. МетФорм Про

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

Примечание . Вам не нужна версия Elementor Pro, чтобы следовать этому процессу.

Шаг 2. Перетащите виджет MetForm на свою страницу Elementor.

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

Теперь найдите MetForm, как только вы найдете виджет, перетащите его на страницу.

Шаг 3. Создайте/добавьте форму на свою страницу.

Теперь вы можете либо выбрать существующую форму, либо создать новую. Чтобы создать новую форму или добавить уже существующую, нажмите кнопку «Редактировать форму».

Я уже создал одну демо-форму бронирования, так что я собираюсь

• Выберите «Выбрать форму»
• Выберите мою существующую форму с именем «Форма условной логики Elementor» из раскрывающегося списка .
• затем нажмите «Редактировать форму».

Шаг 4: Добавьте условную логику в поля формы Elementor

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

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

Отредактируйте поле и включите условную логику

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

  Установите критерии и действие

Теперь выберите критерии соответствия условию как И/ИЛИ и тип действия как Показать это поле/скрыть это поле из раскрывающегося списка.

Установите условие

Теперь пришло время поставить условие, поставить условие

• Нажмите на + ДОБАВИТЬ НОВЫЙ элемент
• В поле Если добавьте имя поля, для которого вы хотите добавить условие
• В раскрывающемся списке « Соответствие (сравнение) » выберите условие.

Например, я хочу сделать поле «Электронная почта» видимым только тогда, когда поле «Полное имя» не пустое. В результате, когда кто-то заполняет свое имя, поле электронной почты становится видимым. Для этого я собираюсь

• Скопируйте имя из текстового поля полного имени
• Вернитесь в раздел условной логики поля электронной почты и вставьте его в поле «Если».
• Наконец, выберите « Не пусто » в раскрывающемся списке «Совпадение (сравнение)».

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

Примечание . Если вы хотите установить условия для полей формы, таких как «Радио» или «Флажок », где у вас есть несколько параметров, вам нужно поместить имя поля в поле «Если» и установить значение параметров радио/флажка в поле «Значение совпадения».

Например, чтобы поле «Другой статус» появлялось только тогда, когда некоторые выбирают другие в качестве своего материального статуса, вам нужно  

• Выберите Match (сравнение) как равные
• Скопируйте название поля «Семейное положение».
• Вставьте его в опцию «Если» условной логики другого статуса.
• Скопируйте значение параметра «Другие» из поля «Соотношение семейного положения ».
• затем вставьте его в параметр «Сопоставить значение» условной логики другого статуса.

Я выполнил те же шаги, чтобы сделать форму Need Pet Sitters видимой только тогда, когда Number of Pets больше 1 .

Шаг 5: Настройте параметры формы, связанные с подтверждением, уведомлением о завершении

Когда вы закончите добавлять всю условную логику в форму Elementor, нажмите НАСТРОЙКИ ФОРМЫ , чтобы настроить различные параметры. Ты сможешь

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

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

Нажмите « ОБНОВИТЬ И ЗАКРЫТЬ », чтобы сохранить только что созданную условную форму.

Теперь, если вы нажмете кнопку предварительного просмотра, вы увидите условную форму Elementor, как показано ниже:

Как использовать готовый шаблон MetForm для добавления условной формы в Elementor

Теперь, если вы ищете готовый шаблон формы условной логики Elementor, то лучшего варианта, чем MetForm, вам не найти. Потому что этот конструктор форм WordPress предоставляет более 6 готовых шаблонов форм условной логики Elementor.

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

Когда форма загрузится, нажмите «ОБНОВИТЬ И ЗАКРЫТЬ» и, наконец, сохраните свою страницу. Вот предварительный просмотр готовой условной логической формы Elementor от MetForm:

Заключительные слова

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

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

Не забывайте о готовых шаблонах форм условной логики Elementor. Кроме того, я настоятельно рекомендую вам ознакомиться со всеми замечательными функциями MetForm. Расширенные функции этого плагина WordPress помогут вам создавать более оптимизированные формы Elementor.