Формы необходимы для любого веб-сайта — от простых контактных форм до сложных многошаговых регистрационных процессов. Elementor Pro включает встроенный виджет Формы, который устраняет необходимость в отдельном плагине формы во многих случаях. В этом руководстве мы рассмотрим, как создать контактные формы, регистрационные формы и многошаговые формы с использованием Elementor Pro, а также варианты интеграции для email-маркетинга и CRM-сервисов.
Этот учебник требует Elementor Pro. Бесплатная версия Elementor не включает виджет Формы.
Обзор виджета Формы Elementor
Виджет Формы Elementor поддерживает следующие типы полей:
| Тип поля | Случай использования | Примечания |
|---|---|---|
| Текст | Имя, компания, тема сообщения | Однострочный текстовый ввод |
| Сбор адресов электронной почты | Включает проверку формата email | |
| Текстовая область | Тело сообщения, комментарии, описания | Многострочный текст с настраиваемыми строками |
| Телефон | Номера телефонов | Вызывает цифровую клавиатуру на мобильных устройствах |
| Число | Количество, бюджеты, рейтинги | Проверка мин/макс/шагов |
| URL | Адреса веб-сайтов | Проверка формата URL |
| Выбор | Выпадающие списки (страна, категория) | Одиночный или множественный выбор |
| Радио | Один выбор из вариантов (тип услуги) | Видимые варианты без выпадающего списка |
| Чекбокс | Множественные выборы (интересы, услуги) | Разрешены множественные выборы |
| Дата | Даты встреч, даты событий | Нативный выбор даты |
| Время | Планирование встреч | Элемент управления выбором времени |
| Загрузка файла | Резюме, документы, отправка изображений | Настраиваемые типы файлов и ограничения по размеру |
| Согласие | Условия и положения, согласие GDPR | Обязательный чекбокс с ссылкой |
| Скрытое | Данные отслеживания (URL страницы, реферер) | Не видно пользователю |
| reCAPTCHA | Защита от спама | Чекбокс v2 или невидимый v3 |
| Honeypot | Антиспам (невидимый для людей) | Скрытое поле, которое ловит ботов |
Создание контактной формы
Шаг 1: Добавьте виджет Формы
- Откройте любую страницу в редакторе Elementor
- Найдите "Форма" в панели виджетов
- Перетащите виджет Формы в ваш макет
- По умолчанию форма включает поля Имя, Email и Сообщение
Шаг 2: Настройка полей формы
Для стандартной контактной формы такая конфигурация полей хорошо подходит:
- Имя (Текстовое поле, обязательно) – Заполнитель: "Ваше имя"
- Email (Поле Email, обязательно) – Заполнитель: "[email protected]"
- Тема (Текстовое поле, необязательно) – Заполнитель: "Как мы можем помочь?"
- Сообщение (Текстовая область, обязательно) – Заполнитель: "Расскажите нам о вашем проекте...", Строки: 5
- reCAPTCHA или Honeypot для защиты от спама
Шаг 3: Настройка действий после отправки
В разделе "Действия после отправки" настройте, что происходит, когда пользователь отправляет форму: For related information, see our guide on Elementor complete guide.
- Email: Отправить данные формы на ваш адрес электронной почты (или несколько адресов)
- Перенаправление: Перенаправить пользователя на страницу благодарности после отправки
- Всплывающее окно: Показать всплывающее окно с подтверждением
- Webhook: Отправить данные формы на внешний URL (Zapier, Make, пользовательский API)
- Mailchimp / ConvertKit / Drip: Добавить подписчиков в списки email-маркетинга
- Slack: Отправить уведомления в канал Slack
- Discord: Отправить уведомления на вебхук Discord
Шаг 4: Стилизация формы
На вкладке Стиль настройте визуальное оформление: For related information, see our guide on Elementor templates and kits.
- Макет формыut: Поля в столбик (на всю ширину) или в линию (рядом друг с другом)
- Стилизация полей: Граница, цвет фона, отступы, радиус границы, цвет состояния фокуса
- Стилизация меток: Шрифт, размер, цвет, расстояние
- Стилизация кнопок: Цвет фона, цвет текста, граница, эффекты при наведении, опция на всю ширину
- Сообщения: Цвета и типографика сообщений об успехе и ошибках
Создание многошаговой формы
Многошаговые формы полезны для длинных форм (регистраций, заявок, опросов), когда отображение всех полей сразу может перегрузить пользователей. Elementor Pro поддерживает многошаговые формы из коробки. For related information, see our guide on creating landing pages with Elementor.
Как настроить шаги
- Добавьте виджет формы на вашу страницу
- В списке полей формы добавьте тип поля "Шаг" между группами полей
- Каждое поле Шага создает новый шаг с кнопками "Далее" и "Назад"
- Пример структуры:
- Шаг 1: Имя, Email, Телефон (Личная информация)
- Шаг 2: Компания, Бюджет, Сроки (Детали проекта)
- Шаг 3: Сообщение, Загрузка файла (Дополнительная информация)
Многошаговые формы отображают индикатор прогресса, показывающий, на каком шаге находится пользователь. Это снижает воспринимаемую сложность и улучшает коэффициенты завершения по сравнению с отображением всех полей сразу.
Создание формы регистрации пользователя
Elementor Pro может создавать формы регистрации пользователей WordPress без отдельного плагина:
- Добавьте виджет формы и настройте поля (Имя пользователя, Email, Пароль)
- В разделе "Действия после отправки" добавьте действие "Зарегистрироваться"
- Сопоставьте каждое поле формы с соответствующим полем пользователя WordPress
- Установите роль пользователя по умолчанию для новых регистраций
- При желании перенаправьте пользователей на страницу их аккаунта после регистрации
Примечание: WordPress по умолчанию требует одобрения новых пользователей администратором. Вы можете изменить это в Настройки → Общие → Членство, если хотите, чтобы пользователи регистрировались свободно.
Интеграция с сервисами email-маркетинга
Elementor Pro интегрируется с популярными платформами email-маркетинга напрямую:
| Сервис | Тип интеграции | Шаги настройки |
|---|---|---|
| Mailchimp | Нативная (встроенная) | Добавить API ключ → Выбрать список → Сопоставить поля |
| ConvertKit | Нативная (встроенная) | Добавить API ключ → Выбрать форму → Сопоставить поля |
| ActiveCampaign | Нативная (встроенная) | Добавить API учетные данные → Выбрать список → Сопоставить поля |
| Drip | Нативная (встроенная) | Добавить API токен → Выбрать аккаунт → Сопоставить поля |
| GetResponse | Нативная (встроенная) | Добавить API ключ → Выбрать кампанию → Сопоставить поля |
| MailerLite | Нативная (встроенная) | Добавить API ключ → Выбрать группу → Сопоставить поля |
| HubSpot | Через Webhook | Создать соединение Zapier/Make с действием webhook |
Для каждой интеграции процесс следующий: введите API ключ вашего сервиса в настройках интеграции Elementor, затем выберите сервис как "Действие после отправки" в вашей форме. Сопоставьте поля вашей формы с полями сервиса, и подписчики будут добавлены автоматически при отправке формы.
Стратегии защиты от спама
Контактные формы привлекают спам-ботов. Elementor Pro предоставляет несколько опций для предотвращения спама:
- Google reCAPTCHA v3: Невидимая проверка на спам, которая оценивает отправки без взаимодействия пользователя. Рекомендуется для большинства форм
- reCAPTCHA v2: Чекбокс "Я не робот". Более заметный, но может снизить количество завершенных форм
- Поле Honeypot: Невидимое поле, которое заполняют боты. Если поле содержит данные, отправка отклоняется. Взаимодействие пользователя не требуется
- Поле согласия: Обязательный чекбокс (согласие GDPR, принятие условий), который также служит сдерживающим фактором для ботов
Мы рекомендуем использовать reCAPTCHA v3 в сочетании с полем Honeypot. Это обеспечивает два уровня защиты от спама без видимого воздействия на пользователей.
в пользовательском опыте.
Формы Elementor против специализированных плагинов форм
| Особенность | Формы Elementor | Gravity Forms | WPForms |
|---|---|---|---|
| Визуальный конструктор | В редакторе Elementor | Отдельный drag-and-drop | Отдельный drag-and-drop |
| Условная логика | Базовая (показать/скрыть поля) | Расширенная | Расширенная |
| Интеграция платежей | Кнопка PayPal | Stripe, PayPal, Square | Stripe, PayPal, Square |
| Расчеты | Нет | Да | Да (Pro) |
| Многоступенчатая форма | Да | Да | Да |
| Загрузка файлов | Да | Да | Да |
| Управление записями | Через отправки Elementor | Полный менеджер записей | Полный менеджер записей |
| Требуется конструктор страниц | Да (Elementor Pro) | Нет | Нет |
Формы Elementor достаточно для контактных форм, подписки на рассылки и простых регистрационных форм. Для сложных форм, требующих обработки платежей, расширенной условной логики или сложного управления записями, более подходящими являются специализированные плагины форм, такие как Gravity Forms или WPForms.
Часто задаваемые вопросы
Могу ли я использовать формы Elementor без Elementor Pro?
Нет. Виджет Формы доступен только в Elementor Pro. Если вам нужны формы с бесплатной версией Elementor, используйте отдельный плагин форм, такой как Contact Form 7 (бесплатно), WPForms Lite (бесплатно) или Gravity Forms (премиум).
Где хранятся отправки форм Elementor?
Отправки форм хранятся в базе данных WordPress и доступны в разделе Elementor → Отправки в административной панели. Вы можете просматривать, экспортировать (CSV) и удалять отправки. Отправки также отправляются на адреса электронной почты, которые вы настраиваете в действии Email.
Могут ли формы Elementor принимать загрузку файлов?
Да. Добавьте тип поля Загрузка файла в вашу форму. Вы можете настроить принимаемые типы файлов (PDF, JPG, PNG, DOCX и т.д.) и максимальный размер файла. Загруженные файлы хранятся в медиабиблиотеке WordPress и связаны с отправкой формы.
Как добавить условную логику в формы Elementor?
Elementor Pro поддерживает базовую условную логику: показывать или скрывать поля в зависимости от значения другого поля. В настройках поля включите "Условная" и задайте условия (например, показывать поле "Компания" только когда выбрана радиокнопка "Я бизнес"). Для расширенной условной логики (расчеты, многоуровневые условия) может быть более подходящим специализированный плагин форм.
Могу ли я создавать всплывающие формы с помощью Elementor?
Да. Создайте шаблон всплывающего окна в Elementor, добавьте в него виджет Формы и установите условия триггера (клик, процент прокрутки, намерение выхода, задержка времени). Это полезно для подписки на рассылки, лид-магнитов и рекламных предложений без добавления формы в основной макет страницы.
Как предотвратить спам в формах Elementor?
Используйте Google reCAPTCHA v3 (невидимая) в сочетании с полем Honeypot для двухуровневой защиты. Это блокирует автоматизированные боты, не создавая препятствий для реальных пользователей. Для форм с высоким объемом спама рассмотрите возможность добавления поля Принятие (обязательный флажок) в качестве третьего уровня.
Получите Elementor Pro с конструктором форм
Получите доступ к виджету Формы, Конструктору Тем, Конструктору WooCommerce и более 100 Pro виджетам. Создавайте формы визуально без дополнительных плагинов.
Посмотреть Elementor Pro →
