Как создать контактную форму Divi в WordPress

Ищете простой способ создать контактную форму Divi для своего сайта WordPress?

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

С модулем контактной формы Divi вы можете создавать и вставлять контактную форму без каких-либо сторонних сервисов. Это замечательно, если вам нужен простой способ добавить базовую контактную форму на свой сайт.

Однако вам понадобится мощный плагин для создания форм, такой как WPForms, для расширенных функций, таких как отправка данных пользователями, электронный маркетинг и многое другое.

Вот почему Divi Builder также поставляется с модулем WPForms, поэтому вы можете легко добавлять профессиональные контактные формы в несколько кликов.

В этом посте мы покажем вам эти два метода создания контактной формы Divi в WordPress:

• Создайте контактную форму с Divi Builder
• Создайте контакт Divi с помощью WPForms

Создание контактной формы с помощью Divi Builder

Если у вас еще нет Divi, сначала вам нужно зарегистрировать учетную запись Divi . Затем вы сможете получить доступ к панели инструментов и загрузить файл темы.

После того, как вы установите и активируете тему Divi на панели управления WordPress, откройте любую страницу или запись, на которую вы хотите добавить контактную форму Divi.

В редакторе сообщений вы увидите кнопку « Использовать Divi Builder ». Нажмите на кнопку, чтобы запустить конструктор в интерфейсе вашего сайта.

На следующем экране вы увидите варианты создания страницы с нуля, выбора готового макета или клонирования существующей страницы.

В этом уроке мы начнем с новой страницы и добавим контактную форму.

Затем вы увидите конструктор Divi, где вы можете выбрать шаблон строки, соответствующий вашим потребностям.

После добавления строки вы увидите панель « Вставить модуль », которая позволяет добавлять различные типы модулей содержимого.

Если вы прокрутите вниз, вы найдете модуль контактной формы . Просто нажмите на нее, чтобы вставить контактную форму Divi на свой сайт.

По умолчанию контактная форма состоит из трех полей формы: Имя, Электронная почта и Сообщение. Вы можете нажать кнопку « Добавить новое поле », чтобы добавить другие поля формы в соответствии с вашими потребностями.

Кроме того, вы найдете параметры для редактирования заголовка, сообщения об успешной отправке и текста кнопки отправки в настройках текста .

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

Кроме того, вы найдете другие полезные параметры, такие как перенаправление ссылок, защита от спама, фоновые настройки и многое другое.

С модулем контактной формы Divi вы можете легко добавить простую контактную форму на свой сайт WordPress. Существует множество вариантов настройки, поэтому вы можете соответствовать стилю своего бренда.

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

И это именно то, что мы собираемся сделать в следующем методе. Мы покажем вам, как создать контакт Divi с помощью самого мощного конструктора форм WordPress, WPForms.

Создайте контактную форму Divi с помощью WPForms

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

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

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

С более чем 5 миллионами активных установок WPForms любят все виды бизнеса по всему миру. Если вы являетесь пользователем Divi и хотите добавить удивительные контактные формы на свой сайт, вы также можете использовать WPForms.

Вот некоторые из причин, по которым вам следует создать контактную форму Divi с помощью WPForms:

• Простота использования и настройки
• Уведомления и подтверждения расширенной формы
• Функциональность загрузки файлов и отправки контента
• Встроенная система управления отправкой форм
• Интеграция с почтовым маркетингом для увеличения списка адресов электронной почты
• Опция отказа от формы для захвата частичных записей формы
• Поля формы для электронной коммерции и способы оплаты

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

Кроме того, вы можете использовать WPForms на любом сайте WordPress, с Divi или без него. Если вы когда-нибудь решите перестать платить за Divi, формы, которые вы создаете с помощью WPForms, останутся на вашем сайте.

С учетом сказанного давайте узнаем, как создать контактную форму с помощью WPForms + Divi.

Шаг 1: Установите и активируйте плагин WPFroms

Прежде всего, вам необходимо зарегистрировать учетную запись WPForms.

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

После регистрации вы сможете получить доступ к панели инструментов WPForms. Вы найдете файл плагина вместе с вашим лицензионным ключом на вкладке « Загрузки ».

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

После того, как вы установите и активируете WPForms на своем сайте, перейдите на вкладку WPForms »Настройки на панели администратора.

Здесь вам нужно будет ввести лицензионный ключ и нажать кнопку « Подтвердить ключ ».

Затем вы увидите сообщение об успешной проверке. Теперь вы можете приступить к созданию контактной формы с помощью WPForms.

Шаг 2: Создайте контактную форму

Чтобы создать новую форму, перейдите на вкладку « Добавить новую » на панели управления WordPress. Это запустит библиотеку шаблонов, где вы сможете найти подходящий шаблон контактной формы для вашего сайта.

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

Введите имя для своей контактной формы и нажмите кнопку « Использовать шаблон » на выбранном вами шаблоне формы.

На следующем экране вы увидите конструктор форм перетаскивания WPForm. Все поля формы находятся на левой стороне, а предварительный просмотр формы — на правой стороне страницы.

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

Чтобы вставить поле формы, вам нужно всего лишь перетащить его с левой стороны и разместить на предварительном просмотре формы.

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

После того, как вы добавите все необходимые поля в контактную форму Divi, нажмите кнопку « Сохранить » в верхней части конструктора форм.

Далее вам нужно настроить параметры формы, уведомления и подтверждения.

Шаг 3. Настройте параметры формы

Чтобы изменить настройки формы, откройте вкладку Настройки » Общие в левой панели меню построителя форм. Здесь вы можете изменить имя формы, описание формы, текст кнопки отправки и многое другое.

Также есть возможность включить защиту от спама на вашем сайте. Это настроит Google reCAPTCHA для вашей контактной формы.

Перейдите на вкладку « Настройки» »Уведомления , чтобы настроить уведомления по электронной почте для вашей контактной формы Divi. Вы увидите уведомление по умолчанию, которое отправляется на адрес электронной почты администратора.

Вы можете добавить несколько адресов электронной почты или нажать кнопку « Добавить новое уведомление », чтобы отправить более одного уведомления формы.

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

Если вам нужна дополнительная информация об этом, вы можете проверить наше руководство о том, как настроить правильные уведомления и подтверждения форм.

Точно так же WPForms позволяет вам решить, что произойдет после того, как пользователь отправит свою контактную информацию на ваш сайт. Перейдите на вкладку « Настройки» »Подтверждения , и вы увидите возможность выбрать действие подтверждения.

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

Когда вы закончите с настройками формы, не забудьте нажать кнопку Сохранить .

Теперь, когда ваша контактная форма готова, вы можете вставить ее на свой веб-сайт с помощью Divi Builder.

Шаг 4: Добавьте модуль WPForms в Divi

Чтобы добавить эту контактную форму на любую страницу или сообщение, откройте Divi Builder и выберите макет строки, как мы сделали для модуля контактной формы Divi.

Единственная разница здесь в том, что вам нужно искать модуль WPForms .

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

Вы даже можете изменить дизайн и стиль своей контактной формы с помощью Divi Builder. Когда вы довольны тем, как выглядит ваша контактная форма Divi, нажмите правую кнопку с галочкой.

Шаг 5: опубликуйте контактную форму Divi

Последний шаг — опубликовать контактную форму. Для этого нажмите кнопку с тремя точками в нижней части Divi Builder.

Затем вы увидите различные параметры, такие как масштабирование, адаптивный предварительный просмотр и многое другое. Справа есть две кнопки: « Сохранить черновик» и «Опубликовать».

Нажмите кнопку « Опубликовать », чтобы опубликовать свою страницу и контактную форму на своем сайте WordPress.

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

С WPForms вы можете легко решить эти проблемы. Он оснащен функциями и функциями, которые помогут вам создавать все типы контактных форм, от простых до профессиональных.

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

И это все на сегодня! Мы надеемся, что это руководство помогло вам научиться легко создавать контактную форму Divi в WordPress.

Если вам нужна дополнительная помощь по формам WordPress, вы можете воспользоваться этими ресурсами:

• Как создать форму регистрации на мероприятие в WordPress
• 8 лучших инструментов для захвата электронной почты и конструкторов форм для WordPress
• Как легко уменьшить количество заброшенных форм

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