Elementor Forms: как создать контактную форму Elementor

Опубликовано: 2022-06-07

Elementor — один из самых популярных конструкторов страниц с широкими функциональными возможностями. Но вас может удивить, что у них нет многофункционального конструктора форм на панели инструментов. То, что предлагает Elementor Form, очень простое и понятное. Если вы хотите использовать более продвинутые параметры, такие как прием платежей или проведение опросов, вам все равно понадобится специальный плагин для создания форм. Более того, для управления отправкой форм вам необходимо установить дополнительный плагин для управления вашими записями с помощью Elementor. В этой статье мы узнаем, как сделать лучшую контактную форму Elementor и управлять данными с помощью того же плагина.

Fluent Forms — самый удобный конструктор форм для начинающих. Загрузите сейчас и начните создавать красивые формы БЕСПЛАТНО!!!

Как создать форму Elementor

Мы покажем вам два метода создания контактной формы Elementor, чтобы помочь вам выбрать в соответствии с вашими потребностями.

Создайте контактную форму с Elementor Pro
Лучший способ создать контактную форму Elementor (бесплатно)

Создайте контактную форму с Elementor Pro

Если вы хотите создать форму с помощью Elementor, вам необходимо приобрести Elementor pro. С профессиональной лицензией вы можете получить доступ к виджету формы и создать свою форму в конструкторе страниц Elementor. У вас также будет доступ к огромному количеству шаблонов форм. Кроме того, у вас будет ряд интересных функций, которые могут преобразить ваш сайт.

Шаги создания контактной формы с Elementor –

1. Добавление формы Elementor на вашу страницу

Чтобы добавить форму на страницу, вам нужно открыть страницу или добавить новую, а затем нажать «Изменить» с помощью Elementor. Теперь найдите формы на панели виджетов слева. Если у вас нет лицензии Pro, вы не можете воспользоваться этой функцией.

Теперь перетащите виджет на страницу, на которой вы хотите создать форму Elementor. На вашей странице появится основная контактная форма.

2. Добавление различных полей в вашу форму Elementor

Вы можете видеть, что форма Elementor имеет множество функций на рукаве. Вам просто нужно исследовать и создавать желаемые формы за считанные минуты. Теперь, как насчет того, что вам нужны другие поля и параметры, а не предварительно заполненные. Вы можете добавить более 18 полей в свои формы Elementor, и это —

Текст
Эл. адрес
Текстовая область
URL-адрес
Тел.
Радио
Выбирать
Флажок
Принятие
Число
Свидание
Время
Файл загружен
Пароль
HTML
Скрытый
reCAPTCHA
Горшок меда

Это хорошее количество типов полей для игры. Вы можете создавать различные формы с помощью этого конструктора форм. Теперь вам нужно настроить параметры и создать форму, чтобы она привлекала внимание.

3. Настройка отправки формы

После отправки формы вы можете настроить каталог электронной почты и данные, которые хотите получить при отправке формы. Это не ракетостроение. Вы можете настроить все параметры, например –

К
Предмет
Сообщение
Из электронной почты
От имени
Ответить на
CC
BCC

Все возможности отправки письма.

4. Создайте свою форму Elementor

Есть несколько вариантов дизайна вашей формы. От изменения ширины столбцов до изменения цвета фона вашей формы, от настройки заполнителя до изменения типографики — вы можете делать со своей формой все, что захотите.

Перейдите к опции «Стиль», чтобы придать своей форме уникальный вид.

Почему формы Elementor недостаточно для вас

Прежде всего, вы не можете использовать все параметры обычного плагина для создания форм в формах Elementor. Тем не менее, он предлагает только основы. Если вы попытаетесь создать разные формы и проанализировать данные, вам понадобится еще один конструктор форм в вашем техническом стеке WordPress.

Во-вторых, нет встроенных функций для управления представлениями. Для этого вам нужно установить другой плагин. Что не является оптимальным шагом для вашего сайта. Вам нужно выбрать плагин для создания форм, который предлагает различные поля, функции и интеграции, а также службу управления данными для анализа ваших лидов.

В-третьих, Elementor поставляется с виджетом шорткода, который помогает интегрировать любые плагины WordPress, у которых есть опция шорткода. Хотя вы можете использовать виджет шорткода Elementor для добавления своих форм, вы не можете настроить свою форму с помощью Elementor. Вот почему вам нужно выбрать конструктор форм, который можно редактировать в макете Elementor, поскольку для этого они предлагают необходимые дополнения.

Лучший способ создать контактную форму Elementor (бесплатно)

Формы являются одним из ключевых компонентов любого веб-сайта. От сбора потенциальных клиентов до проведения опросов, от приема платежей до проведения викторин, современный конструктор форм должен иметь эти опции в своем пакете.

Кроме того, вы должны иметь возможность настроить форму в макете Elementor, чтобы придать ей яркий и привлекательный вид. Многие конструкторы форм имеют функцию шорткода, но вы не можете редактировать их без пакета Elementor.

Fluent Forms дает вам полную гибкость для редактирования и настройки ваших форм в конструкторе страниц Elementor. Виджет «Формы» для Elementor включает в себя несколько параметров для изменения цвета и типографики для каждого поля в вашей форме. Вы можете стилизовать общее текстовое содержимое формы по своему выбору.

Вы можете выбрать цвет шрифта, размер, тип и многие другие параметры для формы вашего веб-сайта, которые идеально соответствуют внешнему виду вашего веб-сайта.
Вы можете иметь доступ к параметрам типографики для каждого текстового содержимого формы.
Также доступны варианты цвета для всех полей формы.
Кроме того, специальные параметры цвета и типографики для меток форм, сообщений об ошибках и сообщений об успешном завершении.

Вы также можете получить доступ ко всем этим основным функциям Fluent Forms:

Более 50 полей ввода и более 70 готовых шаблонов для экспериментов
Автозаполнение адресов и автозаполнение методом перетаскивания
Многоуровневая защита от спама
Визуализация и анализ данных по мере необходимости
Загрузка файлов и управление данными
Разговорные формы
Модуль викторины
Условная логика
Функция целевой страницы

Теперь, когда вы знаете о преимуществах использования Fluent Forms, давайте быстро создадим контактные формы Elementor.

Как добавить контактную форму Elementor

Самый простой способ настроить контактную форму Elementor — это Fluent Forms. Вам не нужно устанавливать разные надстройки отдельно, как в других конструкторах форм, и вам не нужно настраивать форму вне Elementor.

Вот шаги для создания контактных форм Elementor с помощью Fluent Forms.

Установите и активируйте Fluent Forms Pro

Установка Fluent Form аналогична установке любых других плагинов WordPress. Вы можете установить и активировать его с панели инструментов WordPress или загрузить с WordPress.org, если хотите.

Чтобы установить с панели управления WordPress, перейдите в панель администратора WordPress и нажмите «Плагины» → «Добавить новый». Теперь найдите Fluent Forms, нажмите «Установить», а затем «Активировать плагин».

Чтобы скачать с WordPress.org, нажмите на эту ссылку Fluent Forms и загрузите. Теперь перейдите в панель администратора WordPress и нажмите «Добавить новый из плагинов». Теперь загрузите файл .zip и найдите Fluent Forms в списке установленных плагинов, нажмите «Активировать».

Хотя в бесплатной версии Fluent Forms есть огромное количество полей и функций, вам необходимо перейти на профессиональную версию, чтобы получить доступ ко всем функциям Fluent Forms. Сравните функции Fluent Forms Pro и Free здесь.

Обновление до версии Pro довольно просто. Нажмите на ссылку, чтобы узнать, как перейти на Fluent Forms Pro.

Сделать контактную форму Elementor

С Fluent Forms вы создаете красивые и креативные формы за считанные минуты. Чтобы создать контактную форму Elementot, перейдите на панель инструментов WordPress и наведите указатель мыши на Fluent Forms с левой стороны. Нажмите на опцию «Новая форма».

Появится новая страница, нажмите «Новая пустая форма», и вы будете перенаправлены в интерфейс редактора форм.

Добавьте поля по вашему выбору, чтобы создать контактную форму для вашего сайта. Мы добавили опцию «Имя», «Электронная почта», «Тема» и «Ваше сообщение» для нашей простой контактной формы Elementor.

Индивидуальная настройка, такая как оставшаяся часть и расположение метки, в Fluent Forms очень проста. Вы также можете настроить условную логику для своих полей, чтобы сделать более сложную форму. Но поскольку мы сохраняем простоту, нам не нужны никакие другие поля для заполнения формы. Длинные формы могут утомить пользователей, вы можете использовать многоэтапную форму или диалоговую форму, чтобы избежать отказа от формы.

Теперь сохраните форму и скопируйте шорткод. Вы можете использовать функцию шорткода Fluent Forms, которая работает со всеми доступными компоновщиками страниц, включая Elementor, Oxygen, Divi, Visual Composer и т. д. И эта функция дает вам прямую поддержку виджетов Elementor в вашей форме, чтобы использовать на один плагин меньше.

Настройте формы по своему усмотрению, и вы получите доступ к многочисленным параметрам Elemetor. От выравнивания входного текста до изменения размера и формы полей ввода, от добавления классических и градиентных цветов фона до изменения типографики. Вы можете делать все, что хотите, со своими формами Elementor.

Последние мысли

Неважно, используете ли вы формы для развлечения или для бизнеса, красивая и хорошо отполированная форма всегда привлекает людей. Конструктор страниц Elementor поставляется со всем, кроме многофункционального встроенного конструктора форм. С Fluent Forms вы можете получить все это и создать желаемый контакт Elementor.

Более того, вы можете опубликовать свою форму на другой странице или внутри блога, где хотите. Попробуйте разные макеты и дизайны, попробуйте разные варианты полей и создайте формы Elementor по своему выбору. Мы надеемся, что эта статья помогла вам создать контактную форму Elementor для вашего сайта WordPress.

Получить Fluent Forms Pro

Если у вас есть какие-либо вопросы, прокомментируйте ниже. Дайте нам знать, как мы можем улучшить наш плагин, и следите за нами в наших социальных сетях.