На каждом сайте должна быть контактная форма! Контактные формы полезны для множества целей, независимо от типа вашего веб-сайта. Они могут генерировать потенциальных клиентов, устанавливать связи и отношения, позволять пользователям сообщать о проблемах с вашим сайтом и обо всем, что между ними.
Для создания контактных форм в WordPress не обязательно быть техническим экспертом. Конструктор страниц Elementor упрощает создание красивых веб-сайтов.
Чтобы продемонстрировать, как создавать контактные формы с помощью Elementor, мы рассмотрим различные варианты и все, что нужно знать о контактных формах в Elementor.
Elementor уже довольно давно включает в себя виджет формы, а это означает, что вам больше не нужно никуда идти, чтобы создавать формы для вашего веб-сайта WordPress, что является благословением!
В прошлом вы могли столкнуться с трудностями при создании форм с некоторыми доступными plugin . Процесс проектирования и настройки форм может быть трудоемким и утомительным. К счастью для всех нас, с виджетом Elementor Form легко работать.
- Как лучше всего создать форму в Elementor?
- Как создать форму Elementor
- Структурированное формирование элементов Elementor
- Типы полей в форме
- Типы полей в форме элемента
- Ширина столбца формы
- Формы в Elementor для стилизации
- Действия с формой
- Создание шаблона обмена сообщениями контактной формы в Elementor
- Вывод
Прежде чем мы начнем с конструктора форм Elementor, давайте кратко рассмотрим некоторые из его наиболее важных функций.
Одна из самых отличительных особенностей, для начала, заключается в том, что она полностью интегрирована в интерфейс Elementor, что означает, что у вас есть доступ ко многим параметрам дизайна / стиля / макета, доступным в Elementor. Я не верю, что вы найдете автономный plugin формы с такой же надежной системой дизайна, как эта.
Оттуда вы можете создать до 18 различных типов полей:
- Текстовое электронное письмо Текстовое поле Текстовое поле
- URL-адрес и номер телефона следующие:
- Радиокнопки - это разновидность радиокнопок.
- Выберите из списка (раскрывающийся список)
- Флажки используются в чек-листах.
- Флажок всего один (принятие)
- reCAPTCHA
- Приманки - это контейнер, в котором хранится мед (предотвращает спам).
Вы также можете разделить свои формы на несколько страниц для создания многоэтапных форм, что удобно для приложений с длинными формами.
Elementor Pro имеет более 12 интеграций с популярными службами электронного маркетинга и системами управления взаимоотношениями с клиентами, чтобы помочь вам максимально использовать свои формы. Существует также комплексная интеграция Zapier, которая позволяет вам подключаться к любому из тысяч инструментов, доступных на платформе Zapier, если вашего инструмента нет в списке.
Есть еще несколько интересных альтернатив. Для экс amp ля, когда кто - то заполняет вашу форму, вы можете получать уведомления через провисание или раздор.
Говоря об уведомлениях, вы также можете персонализировать уведомления по электронной почте, которые вы получаете, и уведомления по электронной почте, которые получают отправители форм. После того, как они отправят форму, вы можете перенаправить их на созданную вами страницу с благодарностью.
Как лучше всего создать форму в Elementor?
Мы начнем с открытия редактора Elementor, а затем перетащим виджет формы в то место, где мы хотим построить нашу форму.
Как создать форму Elementor
Как и все остальное в Elementor, процесс создания форм осуществляется визуально. Нет необходимости использовать дополнительный plugin или выступать в качестве серверной части вашего веб-сайта.
Структурированное формирование элементов Elementor
Когда ваша форма готова, первым делом необходимо организовать информацию, содержащуюся в ней. Какие поля вам нужны и какого типа они должны быть? Что вы ищете?
При работе в редакторе Elementor поля формы добавляются и редактируются на вкладке «Содержимое». Как вы можете видеть в экс amp ле ниже формы включают в себя несколько полей по умолчанию. Выбрав «Добавить элемент» в раскрывающемся меню, вы можете создавать новые поля.
Дублирование поля также возможно, если выбрать значок, который выглядит как два документа, один перед другим, и щелкнуть по нему.
Типы полей в форме
Доступны многие типы полей формы, от простых текстовых полей до паролей, ReCaptcha и полей приманки.
Чтобы изменить поведение поля формы, сначала выберите поле, а затем, как в раскрывающемся меню «Тип», увидите доступные различные типы полей.
Типы полей в форме элемента
Ширина столбца формы
Эта функция позволяет использовать два поля формы в одной строке, регулируя настройку ширины столбца. Измените ширину окна, выбрав его из раскрывающегося списка и выбрав 50 процентов. Стоит отметить, что если вы сделаете это с двумя последовательными полями формы, вы заметите, что они появляются в одной строке вместе.
Формы в Elementor для стилизации
Создайте стиль для своих форм в Elementor так же, как и для других виджетов, перейдя на панель «Стиль», расположенную в интерфейсе редактирования Elementor.
Сама форма, поля, кнопки, любые шаги, сообщения об ошибках и подтверждающие сообщения могут быть настроены.
Для тех, кто уже знаком с Elementor, им нечего больше знать о стилизации форм Elementor.
Действия с формой
После нашего обсуждения создания формы в Elementor, давайте посмотрим на настройку того, что происходит после отправки вашей формы; это достигается с помощью действий формы или, как они упоминаются в Elementor, действия после отправки.
При отправке формы система обычно отправляет электронное письмо и перенаправляет пользователя на другую веб-страницу. Вы, конечно, можете включить в свои формы столько действий, сколько захотите, и комбинировать их любым удобным для вас способом. Как и следовало ожидать, существует специальное поле селектора без необходимости кодирования.
Каждое из добавленных вами действий будет отображаться как отдельная вкладка в главном меню. В настоящее время мы имеем вариант вкладки для электронной почты, но если бы я должен был включать в себя редирект Add Action Field, я хотел бы также видеть Перенаправление в моей вкладке опции, как показан на экс amp ля ниже.
В заключение я продемонстрирую, как настроить форму для приема отправок по электронной почте - это наиболее часто задаваемый вопрос о формах.
Когда вы выбираете Email на вкладке Content в редакторе, вам будет представлен экран, показанный ниже; здесь вы можете персонализировать отправленное письмо и ответное электронное письмо, а также можете добавить копию или скрытую копию для всех, кто должен получить копию представленных материалов из формы.
Создание шаблона обмена сообщениями контактной формы в Elementor
Многие люди удивляются, узнав, что редактор форм Elementor более мощный, чем кажется на первый взгляд, а одной из наиболее продвинутых функций является возможность настраивать обмен сообщениями для каждой формы.
Можно настроить сообщения формы, чтобы обеспечить более персонализированный процесс обратной связи для конечного пользователя, заполнившего вашу форму, вместо того, чтобы походить на скучного робота. Но, в частности, какие сообщения вы можете настроить для своей контактной формы Elementor:
Для начала вы должны сначала включить пользовательский обмен сообщениями, выбрав «Дополнительные параметры» в раскрывающемся меню, а затем переключив тумблер «Пользовательский обмен сообщениями» в положение «Да».
Настройка виджета контактной формы Elementor путем добавления пользовательских сообщений
Как видите, вы можете настроить четыре разных сообщения, включая перечисленные ниже:
Сообщение об успешном выполнении отображается для конечного пользователя после отправки формы и проверки правильности заполнения формы (например, отсутствия пропущенных обязательных полей и т. Д.).
Сообщение об ошибке - сообщение, которое отображается для конечного пользователя при возникновении неизвестной ошибки во время отправки формы.
Обязательное сообщение - появляется, когда обязательное поле формы не заполнено, форма отправлена, а форма не заполнена.
Если что-то в форме отправки неверно и не может быть отправлено, конечному пользователю отображается сообщение «Недействительное сообщение».
Возможность редактировать сообщения позволяет вам проявлять изобретательность и необычность или более формальный и деловой стиль, если у вас корпоративный сайт. Самое приятное то, что они полностью редактируемы, так что вы можете делать все, что хотите!
Вывод
Виджет формы Elementor позволяет легко создать контактную форму. Он поставляется с интуитивно понятным конструктором контактных форм с перетаскиванием и множеством опций настройки, которые отличают его от других plugin контактных форм, доступных на рынке. Вы можете легко настроить его стиль и цветовую схему, чтобы они соответствовали внешнему виду вашей компании. Также включены различные другие привлекательные виджеты, более 300+ профессиональных шаблонов и конструктор всплывающих окон в одном удобном пакете. Этот полнофункциональный конструктор страниц WordPress состоит из всех необходимых виджетов и функций, поэтому вам не придется покупать дополнительные конструкторы страниц для дальнейшей настройки вашего веб-сайта. Кроме того, он позволяет интегрировать более 30 маркетинговых услуг, поэтому сегодня это один из самых популярных plugin на рынке.
