Перейти к содержимому 
Создание контактной формы с помощью Elementor Pro
Лучший способ это использование платной версии Elementor Pro. С приобретением лицензии Pro Вы получите доступ к виджету форм, а также к широкому набору шаблонов. В Elementor Pro доступны дополнительные возможности для настройки и оформления, что делает его мощным инструментом для работы с формами.
Шаги по созданию формы с Elementor Pro:
1. Добавление формы на страницу
Для начала откройте нужную страницу или создайте новую. Затем выберите опцию “Редактировать с помощью Elementor”. В панели виджетов найдите и добавьте виджет формы на страницу. Если у Вас нет лицензии Pro, эта опция будет недоступна.
Теперь перенесите виджет на страницу, на которой Вы хотите создать свою форму Elementor. Вы увидите, что на Вашей странице появится базовая контактная форма.
2. Добавление полей в форму
Elementor предлагает более 18 различных типов внутренних полей для форм, такие как :
- Text (Текст)
- Email (Электронная почта)
- Textarea (Текстовая область)
- URL (Ссылка)
- Tel (Тел)
- Radio (Радио)
- Select (Выберите)
- Checkbox (Флажок)
- Acceptance (Принятие)
- Number (Номер)
- Date (Дата)
- Time (Время)
- File Upload (Отправить файл)
- Password (Пароль)
- HTML
- Hidden (Скрыто)
- reCAPTCHA (защита от спама)
- reCAPTCHA V3 (защита от спама)
- Honeypot
- Step
Вы можете добавлять и настраивать нужные поля, чтобы создать форму, полностью соответствующую Вашим требованиям.
Разберем подробнее для чего нужно каждое поле:
1. TEXT – это самое распространённое поле для ввода текстовой информации. Оно используется для получения текстовых данных от пользователя, таких как имя, фамилия, адрес или любые другие строки текста.
2. Email – для заполнение почты отправителя, для создания обратной связи с клиентом.
3. Textarea – часто используется в формах для обратной связи, заявок или опросов, где требуется более подробный ответ от пользователя. Также Вы можете регулировать высоту (Rows) данного поля.
4. URL – в форме обратной связи служит для ввода пользователями веб-адресов (ссылок). Каждое поле можно регулировать по ширине (Column Width).
5. Tel – используется для ввода телефонных номеров.
6. Radio – в форме обратной связи позволяет пользователям выбрать один вариант из нескольких предложенных. Это полезно для создания простых опросов, анкет или выбора определенных опций в формах.
Введите каждый параметр в отдельной строке. Чтобы различать метку и значение, разделите их символом (“|”).
7.Select – в форме обратной связи в Elementor используется для предоставления пользователям возможности выбрать один вариант из предложенного списка. Оно похоже на поле Radio (радиокнопки), но экономит место на странице за счет использования выпадающего меню.
8. Checkbox– используется для того, чтобы предоставить пользователю возможность выбора одного или нескольких вариантов из списка. В отличие от радиокнопок (Radio и Select), чекбоксы позволяют выбрать сразу несколько опций одновременно.
9. Acceptance– используется в форме обратной связи в Elementor Pro — это специальный тип поля, предназначенный для получения согласия пользователя на определенные условия, правила или политику перед отправкой формы. Обычно это поле используется для подтверждения того, что пользователь ознакомился с определенными положениями, такими как условия использования, политика конфиденциальности, или что-то, требующее явного согласия пользователя.
10. Number – используется для ввода числовых данных. Это поле предназначено для случаев, когда пользователь должен ввести исключительно цифры (например, количество, возраст, цену и т.д.). В отличие от стандартного текстового поля, поле Number автоматически блокирует ввод букв и символов, разрешая только числовые значения.
11. Date – поле позволяет пользователю выбрать или ввести конкретную дату с помощью встроенного календаря, который автоматически открывается при клике на поле. Поле Date упрощает ввод данных, связанных с временем, и гарантирует, что данные будут введены в правильном формате.
12. Time – в форме обратной связи используется для ввода времени, на пример назначит встречу, доставку, заказать звонок по времени и т.д.
13. File Upload – это поле позволяет пользователям загружать и отправлять файлы через форму. Это полезно, когда нужно получить от пользователя определённые документы, изображения, резюме или другие типы файлов. В нем можно настраивать размер загружаемых файлом, их количество и формат.
14. Password – в форме обратной связи предназначено для ввода паролей. Это поле используется в формах, где требуется от пользователя создать или ввести пароль для доступа к учетной записи, регистрации или аутентификации.
15. HTML – в Elementor Pro предоставляет возможность добавлять собственный код HTML в форму или на страницу. Это поле не предназначено для ввода пользователями информации, как другие элементы формы, а используется разработчиком или дизайнером для встраивания кастомизированных HTML-элементов или контента, который не доступен через стандартные блоки Elementor.
16. Hidden – это тип поля, которое не отображается пользователю, но передает определенные данные вместе с формой при её отправке. Это поле полезно для скрытого сбора информации (название страницы, товара и т.д.), которая не требует вмешательства пользователя.
17. reCAPTCHA
18. reCAPTCHA V3
Это сервисы, разработанные Google для защиты веб-форм от спама и автоматизированных бот-атак. Они работают за счёт того, что различают поведение реальных пользователей и ботов. Однако между ними есть несколько ключевых различий.
reCAPTCHA — это более ранняя версия, которая требует от пользователя выполнения определенного действия, чтобы подтвердить, что он не бот. Есть несколько вариантов:
Галочка “Я не робот” (reCAPTCHA v2 Checkbox): Пользователь ставит галочку, что он человек, а система анализирует его поведение на странице. Если система сомневается, что это реальный пользователь, может быть предложена дополнительная проверка в виде задания (например, выбрать изображения с машинами, светофорами и т.д.).
Классическая reCAPTCHA (изображения): Иногда система сразу предлагает пользователю решить визуальную задачу, например, выбрать все изображения с определёнными объектами (автомобилями, мостами и т.д.).
reCAPTCHA v3 — это более новая версия, которая не требует взаимодействия пользователя. В отличие от предыдущих версий, она оценивает действия пользователя в фоновом режиме и присваивает “оценку” (score), основанную на поведении, что помогает определить, является ли пользователь ботом.
Отсутствие необходимости действия от пользователя: Пользователю не нужно ставить галочку или решать задачи с изображениями. Все проверки происходят на уровне анализа поведения, такого как движение мыши, нажатие клавиш и другие факторы, которые помогают определить, является ли это действие человеческим.
Оценка (score): reCAPTCHA v3 присваивает оценку на основе вероятности того, что действие совершено ботом (например, 1.0 означает, что это, скорее всего, человек, а 0.0 — что это бот). На основе этой оценки можно настроить действия на сайте — например, потребовать дополнительные проверки, если оценка низкая.
19. Honeypot – то метод защиты веб-форм от спам-ботов, который работает на принципе создания скрытого поля в форме, видимого только для автоматических ботов, но не для реальных пользователей. Это одно из популярных решений для борьбы с автоматическими отправками спама, которое не требует никакого взаимодействия от реальных пользователей, как это делается, например, с помощью reCAPTCHA.
20. Step – это поле в форме, чаще всего используется в числовых полях, таких как Number, или в полях для ввода дат и времени (Date и Time). Параметр Step задаёт шаг изменения значения — то есть, с каким интервалом пользователь может изменять значение внутри этих полей.
Поля формы
Название формы (Form Name)– текст, введенный в этом поле, будет отправлен Вам вместе с заявкой. Это особенно удобно, если у Вас на сайте несколько форм, так как Вы сразу будете знать, с какой формы поступил запрос.
Тип поля (Type)– здесь можно выбрать тип вводимого поля. В Elementor доступно множество вариантов, и по названию типа можно легко понять, для чего оно предназначено. Ниже приведем описание некоторых типов полей, которые могут быть не совсем очевидны:
Ярлык (Label) – это название поля, которое будет отображаться рядом с ним.
Заполнитель (Placeholder) – текст, отображаемый внутри поля как подсказка для пользователя.
Обязательное (Required)– опция для включения или отключения обязательного заполнения поля.
Ширина колонки (Column Width) – параметр, определяющий ширину поля. Если два поля настроены на 50% ширины, они будут отображаться в одной строке.
Другие настройки – при выборе разных типов полей появляются дополнительные опции и настройки. Здесь описаны лишь основные параметры. Во вкладке “Расширенные” можно изменить шорткод поля, который можно использовать для создания уникального письма.
Размер и стили полей
- Размер поля (Input Size) – предустановленные стили для регулировки размеров полей ввода.
- Ярлык (Label) – возможность скрыть ярлыки (названия) у всех полей формы.
- Значок “Обязательно” (Required Mark) – настройка для отображения значка, указывающего на обязательность заполнения поля.
Кнопка отправки (Buttons)
- Текст кнопки (Size)– текст, отображаемый на кнопке отправки формы.
- Ширина колонки ( – определяет ширину кнопки отправки.
- Выравнивание ( – задает расположение кнопки: слева, по центру, справа или по всей ширине.
- Иконка(Icon) – добавление иконки к кнопке с возможностью настройки её положения и отступов.
Действия после отправки (Actions After Submist)
- Добавить действие – эта настройка позволяет выбрать, что произойдет после отправки данных с формы. Можно выбрать несколько действий, таких как отправка на email или перенаправление на страницу с сообщением об успешной отправке. По умолчанию выбран вариант с отправкой на email, но можно добавить дополнительные действия, например, отправку на другой email или перенаправление на другую страницу.
Настройки Email
- Настройка email – здесь можно указать получателя, тему и содержание письма, которое отправится после отправки формы. Содержимое письма формируется с использованием шорткодов, которые настраиваются во вкладке “Расширенные” у каждого поля формы.
Дополнительные параметры (Additionai Options)
- ID формы – уникальный CSS ID для формы. Убедитесь, что данный идентификатор не используется на других элементах страницы. Для ID можно использовать символы от A до Z, цифры и подчеркивания, без пробелов.
- Пользовательские сообщения – при активации этой опции можно изменить тексты уведомлений, которые появляются при успешной отправке или ошибке.
3. Настройка параметров отправки
После создания формы важно настроить параметры отправки, такие как email-уведомления и содержание сообщений. Вы можете указать получателя, тему письма и другие параметры для точной настройки работы формы.
Вкладка "Дополнительно"
На этой вкладке не так много опций. Но существующие усложняются, если Вы их не используете.
Значение по умолчанию: оно отличается от заполнителя и значения поля по умолчанию. Если Вы не добавили никакого значения, это значение будет отправлено при отправке.
ID: данные поля сохраняются, и Вам не нужно их изменять.
Короткий код: если Вы хотите получить поле на другой странице, этот код Вам поможет. В противном случае Вам не обязательно его использовать.
4. Оформление формы
Настроить внешний вид формы можно через опцию “Стиль”. Изменяйте цвета, шрифты, выравнивание и другие элементы, чтобы сделать форму визуально привлекательной и удобной.
Параметры формы
- Разрыв колонок – задает расстояние между полями формы по горизонтали, обеспечивая удобное расположение элементов на странице.
- Разрыв рядов – регулирует промежутки между полями в вертикальной плоскости, что помогает создать аккуратную и логичную структуру формы.
- Ярлык – позволяет настроить отступ, цвет и типографику текста, который отображает название поля.
Параметры полей
- Цвет текста – позволяет выбрать цвет для текста, который будет отображаться в полях формы.
- Типографика – отвечает за настройку размера, стиля и семейства шрифтов, используемых для текста в полях формы.
- Цвет фона – изменяет цвет фона внутри полей формы, что помогает визуально выделить их или адаптировать под дизайн сайта.
- Цвет границы – задает цвет границ полей формы, создавая четкие или минималистичные рамки.
- Толщина границы – регулирует толщину линии границ вокруг полей формы.
- Скругление углов – определяет степень скругления углов полей формы, добавляя плавность или угловатость.
Параметры кнопки
Все параметры кнопки аналогичны настройкам полей формы. Можно изменять:
- Цвет текста кнопки.
- Цвет фона кнопки.
- Типографику для текста на кнопке.
- Цвет и толщину границы.
- Скругление углов, чтобы сделать кнопки более плавными или строгими.
Просмотр отправленных данных
Отправленные формы можно просмотреть и загрузить, перейдя на страницу Elementor – “Отправленные” (Submissions).
Вы можете фильтровать, искать и выполнять массовые действия с отправлениями, используя поля над таблицей.
Экспортируйте все отправленные файлы, нажав на “Экспортировать все в CSV”.
Теперь пришло время опубликовать Вашу форму для пользователей Вашего сайта. Нажмите на кнопку Обновить в нижней части набора форм, показанного на изображении ниже.
Поздравляем! Вы сделали успешную форму обратной связи. Теперь она будет отображаться на странице в режиме реального времени, и Вы сможете собирать больше потенциальных клиентов и подписчиков.
Давайте взглянем на окончательный вид контактной формы.
