Создание форм в Elementor Pro – полное руководство

1. Подготовка: установка и добавление виджета Form

1.1 Установка Elementor Pro

Функционал форм доступен только в платной версии Elementor Pro – в бесплатной редакции виджет Form отсутствует. Сначала установите и активируйте базовый плагин Elementor, затем приобретите и активируйте лицензию Elementor Pro.

1.2 Добавление виджета Form на страницу

В редакторе Elementor откройте нужную страницу и в левой панели виджетов найдите «Form» (или «Форма»). Перетащите его в область контента. После добавления автоматически создаётся базовая форма из трёх полей: Имя (Name), Электронная почта (Email) и Сообщение (Message), а также кнопка отправки.

2. Детальная настройка полей формы

2.1 Типы полей (Type)

Elementor Pro предлагает более 15 типов полей для любых сценариев сбора данных:

Тип поля	Назначение
Text (Текст)	Однострочное поле – для имени, компании, города и т.п.
Email (Эл. почта)	Автоматически проверяет формат (наличие @ и точки)
Textarea (Текстовая область)	Многострочное поле – для сообщений, комментариев, описания заявок
URL (Веб-адрес)	Проверяет правильность формата ссылки
Tel (Телефон)	Для номеров телефонов – на мобильных устройствах вызывает цифровую клавиатуру
Number (Число)	Принимает только цифровые значения
Select (Выпадающий список)	Позволяет выбрать один вариант из выпадающего меню
Radio (Радиокнопки)	Группа переключателей для выбора одного из нескольких вариантов
Checkbox (Флажки)	Множественный выбор или поле согласия с условиями
Date (Дата)	Всплывающий календарь для выбора даты
Time (Время)	Выбор времени
File Upload (Загрузка файлов)	Позволяет пользователям прикреплять файлы
Acceptance (Принятие условий)	Флажок для согласия с правилами (например, политикой обработки данных)
Password (Пароль)	Скрывает вводимый текст
Hidden (Скрытое поле)	Не отображается на странице, но передаёт данные (например, UTM-метки)
Step (Шаг)	Используется для создания многошаговых форм
reCAPTCHA	Защита от спама с помощью капчи
Honeypot (Ловушка)	Невидимая антиспам-проверка

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

2.2 Подписи полей (Label)

Подпись (Label) – это текст, который отображается над полем или слева от него. Он поясняет пользователю, что нужно вводить. Старайтесь давать понятные и краткие подписи. Даже если вы скроете подписи на фронтенде, они всё равно будут отображаться в письмах-уведомлениях, помогая идентифицировать данные.

2.3 Плейсхолдер (Placeholder)

Placeholder – это серая подсказка внутри поля, которая исчезает при начале ввода. Например, для поля «Email» можно указать «введите ваш e-mail» – это направит пользователя и упростит заполнение.

2.4 Обязательность (Required)

Включает или отключает обязательность заполнения поля. Если установить «Yes», пользователь не сможет отправить форму, не заполнив это поле – будет показано сообщение об ошибке. В контактной форме настоятельно рекомендуется сделать обязательными как минимум имя и e-mail.

2.5 Ширина колонки (Column Width)

Определяет, сколько процентов от ширины строки занимает поле. По умолчанию – 100% (поле на всю ширину). Если вы хотите разместить несколько полей в одной строке, установите для каждого 50% – они встанут рядом. Это удобно для коротких полей, например «Имя» и «Фамилия», и делает форму более компактной.

2.6 ID поля

Каждое поле должно иметь уникальный идентификатор (ID), который настраивается во вкладке «Advanced» (Дополнительно). ID не может быть пустым – иначе форма может работать некорректно. Этот ID используется в шорткодах для писем: например, [field id="imya"] подставит значение поля с таким ID. Давайте полям осмысленные и легко запоминающиеся ID (например, first_name, company_name) – это упростит настройку почтовых шаблонов.

2.7 Добавление и удаление полей

• Добавить поле – нажмите кнопку «+ Add Item» внизу блока «Form Fields».
• Дублировать поле – нажмите на иконку копирования рядом с полем.
• Удалить поле – нажмите на крестик (X).

3. Действия после отправки (Actions After Submit)

В этом разделе (вкладка «Content») настраивается, что происходит после того, как пользователь нажал кнопку отправки. Это сердце функциональности Elementor Pro. По умолчанию автоматически добавляются два действия:

1. Collect Submissions – сохраняет данные в базе данных WordPress (админка → Elementor → Submissions).
2. Email – отправляет уведомление на почту.

Нажав «+ Add Action», вы можете добавить дополнительные действия:

Действие	Описание
Email	Отправка письма (уже есть)
Email 2	Второе письмо – чаще всего используется для отправки подтверждения самому пользователю
Redirect	Перенаправление на другую страницу после отправки
Webhook	Отправка данных в сторонние сервисы (Zapier, Make и др.)
Mailchimp	Синхронизация с почтовым сервисом Mailchimp
Drip	Интеграция с платформой Drip

4. Подробная настройка почтовых уведомлений

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

4.1 Базовые настройки письма (Email)

Разверните блок «Email» – здесь доступны следующие параметры:

• To (Кому) – адрес(а) получателей. Можно несколько через запятую.
• Subject (Тема письма) – можно использовать шорткоды, например Новый запрос от [field id="name"].
• From Email (Адрес отправителя) – рекомендуется указывать почту с вашего домена (например, noreply@ваш-домен.ru).
• From Name (Имя отправителя) – отображаемое имя, например «Официальный сайт компании X».
• Reply To (Адрес для ответа) – обычно ставят [field id="email"].
• Message (Тело письма) – по умолчанию [all-fields], но можно кастомизировать.

4.2 Отправка подтверждения самому пользователю (Email 2)

Добавьте действие «Email 2», в поле «To» укажите [field id="email"], настройте тему и тело. Можно использовать HTML-формат.

4.3 Проблемы с доставкой писем и их решение

Elementor использует wp_mail(), что может вызывать проблемы. Рекомендуется настроить SMTP через плагин (например, WP Mail SMTP).

Проблема	Решение
Письма не отправляются	Проверьте ID полей и адреса
Письма попадают в спам	Настройте SMTP через внешний сервис
Конфликт с другими плагинами	Отключите плагины для проверки
Ограничения хостинга	Используйте качественный хостинг или внешний SMTP

5. Другие действия после отправки

5.1 Перенаправление (Redirect)

Добавьте действие «Redirect» и укажите URL страницы благодарности.

5.2 Интеграция через Webhook

Отправляет данные в Zapier, Make и т.д.

5.3 Интеграция с Mailchimp

Требует ввода API-ключа и выбора списка.

6. Валидация полей и условная логика

6.1 Валидация полей

Elementor автоматически проверяет Email, Number, URL. Можно добавить кастомную валидацию через плагины.

6.2 Условная логика

Встроенной нет, но можно добавить через плагин Conditional Fields for Elementor Form.

7. Оформление и стилизация формы

7.1 Настройка кнопки

Во вкладке «Button» – размер, ширина, текст, иконка.

7.2 Стилизация формы

Во вкладке «Style» – поля, подписи, кнопки, отступы, цвета.

8. Расширенные возможности

8.1 Многошаговые формы

Используйте тип поля «Step».

8.2 Динамические теги

Связь с ACF и другими источниками.

8.3 Загрузка файлов

Тип поля «File Upload».

9. Лучшие практики создания форм

• Чётко определите цель формы.
• Умно расставляйте обязательные поля.
• Используйте ширину колонок.
• Тщательно настройте письма и подключите SMTP.
• Предусмотрите страницу благодарности.
• Уделите внимание дизайну.
• Тестируйте перед публикацией.
• Проверяйте мобильную версию.