Не все посетители вашего сайта приходят сюда с одной и той же целью. Скорее всего, вы предоставляете клиентам и клиентам разнообразные товары или услуги, а не просто один. Вот почему наличие различных целевых контактных форм может помочь сгладить UX вашего сайта, чтобы ваши клиенты (и будущие клиенты) могли связаться с вами с минимальными трениями относительно того, что им нужно. Мы проведем вас через построение оптимального конвейера между вами и вашими пользователями с помощью модуля контактной формы Divi и нашей функции условной логики.
Краткий обзор формы условной связи
Когда все будет сказано и сделано, у вас будет что-то похожее на вашем веб-сайте, готовое для использования вашими посетителями.
Что такое условная логика?
Для начала мы хотели бы кратко определить условную логику. В этом уроке мы настроим последовательность контактных форм, которые будут отображаться в зависимости от выбора, который пользователь делает или не делает.
Например, у вас может быть единая контактная форма, которая меняется в зависимости от того, какая услуга или продукт нужен посетителю. Таким образом, вместо того, чтобы писать их, вы можете получить нужную информацию в нужном вам формате. Условная логика контактной формы помогает улучшить общение и ускорить работу с пользователями.
Создавайте потрясающие сайты
С лучшим бесплатным конструктором страниц Elementor
Начать сейчасИмея это в виду, давайте приступим к разработке целевых контактных форм.
Как использовать условную логику для создания контактных форм
Откройте Divi Builder.
Нам нужно будет войти в Divi Builder, потому что мы используем модуль Divi Contact Form. В этом руководстве мы будем использовать пакет макетов обслуживания ландшафта в качестве примера. Вы можете использовать любой макет или дизайн, который вам нравится, но вы должны уметь использовать и стилизовать модуль контактной формы Divi.
Для начала перейдите к Divi Builder в бэкэнде вашего сайта WordPress. Внутри редактора страниц вы заметите фиолетовую кнопку с надписью «Использовать Divi Builder» (или «Редактировать с помощью Divi Builder», если вы уже создали страницу).
Вставьте или найдите модуль контактной формы.
Затем либо укажите существующий модуль контактной формы на странице, либо щелкните значок «Черный круг» \ 002B и выберите «Контактная форма» в раскрывающемся меню.
Заполните настройки контактной формы
По умолчанию модуль контактной формы Divi включает три поля: имя, адрес электронной почты и сообщение. Мы создадим контактную форму, чтобы эти варианты не отображались, пока посетитель не предоставит нам достаточно информации, чтобы направить свой запрос.
Добавление первого условного вопроса
Заполните пропуски первым условным вопросом. Кнопка « Добавить новое поле » находится на вкладке «Содержимое» под любыми существующими полями формы. Просто нажмите на это.
Откроется окно « Параметры поля», в котором вы должны увидеть поля для идентификатора поля и заголовка . Идентификатор поля предназначен для вас. Это то, что появляется в настройках модуля, за которым вы можете следить. Заголовок - это текст, который ваши посетители увидят в интерфейсе формы. (Заголовок также будет отображаться в электронном письме, которое вы получите после отправки формы.)
Идентификатор поля помечен как «Условный», поскольку это первый вопрос, который посетитель увидит в форме. То, что они увидят дальше, будет зависеть от их реакции на это. Это простой способ отслеживать поток вопросов и ответов формы.
Добавить параметры поля
Прокрутите вниз до раздела «Параметры поля» под вкладкой «Содержимое». Здесь вы разместите параметры, из которых пользователь сможет выбирать. Каждый из них послужит поводом для дополнительного допроса. В этом примере в качестве типа ввода используются флажки. Это означает, что у потребителя есть возможность выбрать столько, сколько он пожелает.
Помимо флажков, Divi поддерживает следующие дополнительные функции: поле ввода и текстовое поле для вводимых пользователем ответов, раскрывающийся список и радио-кнопки для индивидуального выбора, а также поле электронной почты для ввода адреса электронной почты. Поле имени по умолчанию - это поле ввода, а поле сообщения по умолчанию - текстовое поле.
Установив флажки, мы введем параметры, которые хотим активировать впоследствии. Затем, чтобы предотвратить преждевременную отправку формы пользователем, мы хотим сделать это поле обязательным .
Стоит отметить, что на этом этапе мы не используем условную логику. Поскольку это триггер, он все равно будет отображаться пользователю.
Создать новые поля условного ответа
Однако для новых полей, которые мы добавляем в качестве последующих ответов, мы добавим условную логику дальше. Поскольку мы включили три варианта для первого вопроса, мы добавим в форму три новых эквивалентных поля. Вам нужно будет повторить шаги, описанные ниже, для каждого из них.
Назовите условные ответы на новые поля
Мы использовали практику именования Условный 1 (для обозначения первого условного триггера), за которым следуют 1a, 1b и 1c для последующих ответов. Мы также присвоили им соответствующие названия, чтобы знать, что они из себя представляют.
Как и в первом вопросе, мы введем заголовок в качестве вопроса, который увидит посетитель.
Добавление условной логики в поля ответа.
После этого перейдите в раздел « Условная логика » на вкладке « Содержимое» этого поля. Включите переключатель условной логики . Затем для этого выберите «Отношение», что означает, что вы можете установить для него любое (любое количество ответов может привести к отображению этого выбора) или все (только определенная комбинация ответов заставляет это поле отображаться).
Если вы используете только одно правило триггера, как мы, все или любое из них будет работать.
Вы заметите поле, которое активирует это поле в разделе «Правила», и справа вы можете выбрать, какой вариант будет его запускать. Квалификатор, например, равно, не равно, меньше чем, больше чем и т. Д., Расположен в центре. Для этого поля мы выбираем вопрос с условием 1, а затем выбор в нем, который явно вызывает появление этого поля.
Повторите этот шаг для всех условных ответов.
Поскольку мы представили три возможных ответа на наш единственный условный вопрос, мы сделаем то же самое для других полей. Для этого выбора создаются только соответствующие ответы.
Установите «Имя / Электронная почта / Сообщение» полей контактной формы, чтобы они отображались
После того, как вы настроили ответы для условной логики, мы хотим, чтобы посетитель мог отправить форму. Для этого мы изменим условную логику в полях « Имя» , « Электронная почта» и « Сообщение» . Поскольку подготовка к каждому из них одинакова, вы повторите это три раза.
Перейдите в раздел «Условная логика» в настройках полей «Имя», «Электронная почта» и «Сообщение». Включите его и введите столько окончательных ответов на условные дополнительные вопросы, сколько у вас есть. В этом примере у нас есть три дополнительных запроса, поэтому мы применяем три правила.
Выберите дополнительный вопрос в качестве триггера для каждого правила. Установите для квалификатора значение не пусто, что означает, что условие выполняется, пока посетитель ответил на вопрос. Последнее поле будет неактивным, что говорит о том, что любой ответ является адекватным.
Сохраните изменения, а затем повторите для любых других полей, которые вы хотите отобразить, чтобы разрешить отправку формы. Вот и все! Ваша форма автоматически адаптируется к потребностям ваших потребителей.
Конечные результаты
Вы можете увидеть, как условная логика работает на практике, на видео ниже.
Последние мысли
Одна из самых распространенных частей веб-сайта - это контактная форма. Практически на каждом веб-сайте он есть, и он нужен почти каждому веб-сайту. Однако не все люди посещают ваш сайт по одной и той же причине. Вы можете превратить свои контактные формы в динамический инструмент для общения ваших пользователей, используя функцию условной логики Divi.
