Форми є необхідними для будь-якого вебсайту — від простих контактних форм до складних багатоступеневих реєстраційних процесів. Elementor Pro включає вбудований віджет Форм, який у багатьох випадках усуває потребу в окремому плагіні для форм. У цьому посібнику ми розглянемо, як створити контактні форми, реєстраційні форми та багатоступеневі форми за допомогою Elementor Pro, а також варіанти інтеграції для email-маркетингу та CRM-сервісів.
Цей посібник вимагає Elementor Pro. Безкоштовна версія Elementor не включає віджет Форм.
Огляд віджета Форм Elementor
Віджет Форм Elementor підтримує такі типи полів:
| Тип поля | Випадок використання | Примітки |
|---|---|---|
| Текст | Ім'я, компанія, тема листа | Однорядний текстовий ввід |
| Збір адрес електронної пошти | Включає валідацію формату електронної пошти | |
| Текстова область | Текст повідомлення, коментарі, описи | Багаторядковий текст з налаштовуваними рядками |
| Телефон | Номери телефонів | Викликає числову клавіатуру на мобільному |
| Число | Кількості, бюджети, рейтинги | Валідація мін/макс/кроку |
| 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.
- Макет форми
- Типи полів: Поля, що розташовані вертикально (на всю ширину) або в ряд (поряд)
- Стилізація полів: Межа, колір фону, відступ, радіус межі, колір у стані фокусу
- Стилізація міток: Шрифт, розмір, колір, відстань
- Стилізація кнопок: Колір фону, колір тексту, межа, ефекти при наведенні, опція на всю ширину
- Повідомлення: Кольори та типографіка повідомлень про успіх та помилку
Створення багатоступеневої форми
Багатоступеневі форми корисні для довгих форм (реєстрації, заявки, опитування), де показ усіх полів одночасно може перевантажити користувачів. Elementor Pro підтримує багатоступеневі форми на базовому рівні. For related information, see our guide on creating landing pages with Elementor.
Як налаштувати кроки
- Додайте віджет форми на вашу сторінку
- У списку полів форми додайте тип поля "Крок" між групами полів
- Кожне поле Крок створює новий крок з кнопками "Далі" та "Назад"
- Приклад структури:
- Крок 1: Ім'я, Електронна пошта, Телефон (Особиста інформація)
- Крок 2: Компанія, Бюджет, Термін (Деталі проекту)
- Крок 3: Повідомлення, Завантаження файлу (Додаткова інформація)
Багатоступеневі форми відображають індикатор прогресу, який показує, на якому кроці знаходиться користувач. Це зменшує сприйняту складність і покращує показники завершення в порівнянні з показом усіх полів одночасно.
Створення форми реєстрації користувача
Elementor Pro може створювати форми реєстрації користувачів WordPress без окремого плагіна:
- Додайте віджет форми та налаштуйте поля (Ім'я користувача, Електронна пошта, Пароль)
- У розділі "Дії після відправлення" додайте дію "Зареєструвати"
- Прив'яжіть кожне поле форми до відповідного поля користувача 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 Окремий перетягування Окремий перетягування Умовна логіка Базова (показувати/приховувати поля) Розширена Розширена Інтеграція платежів Кнопка 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 з конструктором форм
Отримайте доступ до віджету Форми, Theme Builder, WooCommerce Builder та 100+ Pro віджетів. Створюйте форми візуально без додаткових плагінів.
Переглянути Elementor Pro →
