Модуль Контактная Форма Divi

Как добавить, настроить и адаптировать под свои требования модуль Divi — Контактная форма.

Коммуникация — краеугольный камень любого бизнеса. С Divi вы можете легко добавлять контактные формы в любую часть вашего веб-сайта.

Как добавить модуль Контактная форма на свою страницу

Прежде чем вы сможете добавить модуль контактная форма на свою страницу, вам сначала нужно перейти в Divi Builder. После установки темы Divi на ваш веб-сайт вы увидите кнопку «Использовать Divi Builder» над текстовым редактором страницы каждый раз, когда создаете новую страницу. Нажатие этой кнопки активирует Divi Builder, предоставляя вам доступ ко всем модулям Divi Builder. Затем выберите один из трёх вариантов, чтобы запустить редактор страницы в визуальном режиме. Вы также можете нажать кнопку «Включить Visual Builder» при просмотре веб-сайта в интерфейсе пользователя, если вы вошли в свою панель управления WordPress.

После того, как вы вошли в Visual Builder, вы можете нажать серую кнопку с плюсом, чтобы добавить новый модуль на свою страницу. Новые модули можно добавлять только внутри строк. Если вы создаете новую страницу, не забудьте сначала добавить строку на свою страницу. У нас есть несколько уроков о том, как использовать строки и разделы Divi .

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

Пример использования: добавление контактной формы на страницу контактов

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

В этом примере я покажу вам, как добавить контактную форму на страницу контактов.

Используя Visual Builder, вставьте новый стандартный раздел со строкой в полную ширину (1 столбец). Затем добавьте модуль контактной формы в свою строку.

Обновите настройки контактной формы следующим образом:

Вкладка Контент

Заголовок: [enter title of form] I’m using this title section as a call to action more than a simple title.

Design Options

Заголовок шрифт: Playfair Display
Заголовок размер текста: 48px (desktop), 40px (tablet), 30px (phone)
Заголовок высота строки: 1.5em
Поля шрифт: Montserrat (Bold)
Поля размер текста: 14px
Поля цвет текста: #aaaaaa
Поля арсстояние между букв: 1px
Поля высота строки: 1.7em
Ввод цвет рамки: #d4d4d4
Использовать пользовательские стили для кнопка: YES
Кноака размер текста: 16
Кнопка цвет текста: #ffffff
Кнопка Background цвет: #202020
Кнопка ширина рамки: 12
Кнопка цвет рамки: #202020
Кнопка радиус рамки: 0
Кнопка расстояние между букв: 2
Копка шрифт: Montserrat
Кнопка икона: No

Сохраните настройки

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

Готово. Дизайн одновременно современный и намеренно простой, чтобы обеспечить удобочитаемость и удобство использования.

Теперь, когда вы увидели модуль контактной формы в действии, погрузитесь во ВСЕ его настройки в разделах ниже. Мы предоставили подробное изложение того, что вы найдете на каждой вкладке настроек модуля, и объяснение того, что каждая из них делает.

Вкладка Контент модуля Контактная форма

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

Заголовок

Определите заголовок для вашей контактной формы.

Сообщение об успешном завершении

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

Кнопка «Отправить»

Здесь вы можете определить текст кнопки отправки формы.

Электронный адрес

Введите адрес электронной почты, на который следует отправлять сообщения.
Примечание. Доставка электронной почты и предотвращение спама — сложные процессы. Мы рекомендуем использовать службу доставки, такую как Mandrill, SendGrid или другие аналогичные службы, чтобы обеспечить возможность доставки сообщений, отправляемых через эту форму.

Шаблон сообщения

Здесь вы можете определить собственный шаблон для электронного сообщения. Поля должны быть включены в следующем формате — %% field_id %%. Например, если вы хотите включить поле с id = phone и поле с id = message, вы можете использовать следующий шаблон: Мое сообщение — %% message %%, а номер телефона — %% phone %%. Оставьте поле пустым по умолчанию.

Use basic Captcha

Здесь вы можете включить или выключить капчу, используя эту опцию.

Включить URL переадресации

Здесь вы можете выбрать перенаправление пользователей на другой URL-адрес после успешной отправки формы.

URL ссылки модуля

Здесь вы можете ввести URL-адрес перенаправления, по которому вы хотите, чтобы пользователи переходили после отправки формы.

Фон

Эта опция изменяет фон ваших полей формы.

Метка администратора

Это изменит метку модуля в построителе для облегчения идентификации. При использовании представления WireFrame в Visual Builder эти метки будут отображаться в блоке модуля в интерфейсе Divi Builder.

Вкладка Дизайн модуля Контактная форма

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

Метка заголовок шрифт

Вы можете изменить шрифт текста заголовка, выбрав нужный шрифт в раскрывающемся меню. Divi поставляется с десятками отличных шрифтов на базе Google Fonts. По умолчанию Divi использует шрифт Open Sans для всего текста на вашей странице. Вы также можете настроить стиль текста, используя полужирный шрифт, курсив, заглавные буквы и подчеркивание.

Заголовок размер текста

Здесь вы можете настроить размер текста заголовка. Вы можете перетащить ползунок диапазона, чтобы увеличить или уменьшить размер текста, или вы можете ввести желаемое значение размера текста прямо в поле ввода справа от ползунка. Поля ввода поддерживают различные единицы измерения, что означает, что вы можете ввести «px» или «em» после вашего значения размера, чтобы изменить его тип единицы измерения.

Заголовок цвет текста

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

Заголовок расстояние между букв

Расстояние между буквами влияет на расстояние между буквами. Если вы хотите увеличить интервал между каждой буквой в тексте заголовка, используйте ползунок диапазона, чтобы отрегулировать интервал, или введите желаемый размер интервала в поле ввода справа от ползунка. Поля ввода поддерживают различные единицы измерения, что означает, что вы можете ввести «px» или «em» после вашего значения размера, чтобы изменить его тип единицы измерения.

Заголовок высота строки

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

Поля шрифт

Вы можете изменить шрифт текста поля формы, выбрав нужный шрифт в раскрывающемся меню. Divi поставляется с десятками отличных шрифтов на базе Google Fonts. По умолчанию Divi использует шрифт Open Sans для всего текста на вашей странице. Вы также можете настроить стиль текста, используя полужирный шрифт, курсив, заглавные буквы и подчеркивание.

Поля размер текста

Здесь вы можете настроить размер текста поля формы. Вы можете перетащить ползунок диапазона, чтобы увеличить или уменьшить размер текста, или вы можете ввести желаемое значение размера текста прямо в поле ввода справа от ползунка. Поля ввода поддерживают различные единицы измерения, что означает, что вы можете ввести «px» или «em» после вашего значения размера, чтобы изменить его тип единицы измерения.

Поля цвет текста

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

Поля расстояние между букв

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

Поля высота текста

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

Рамка

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

Цвет рамки

Этот параметр влияет на цвет вашей границы. Выберите собственный цвет в палитре цветов, чтобы применить его к границе.

Ширина рамки

По умолчанию границы имеют ширину 1 пиксель. Вы можете увеличить это значение, перетащив ползунок диапазона или введя настраиваемое значение в поле ввода справа от ползунка. Пользовательские единицы измерения поддерживаются, что означает, что вы можете изменить единицу измерения по умолчанию с «px» на что-то другое, например em, vh, vw и т. Д.

Стиль рамки

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

спользовать пользовательские стили для кнопки

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

Кнопка размер текста

Этот параметр можно использовать для увеличения или уменьшения размера текста внутри кнопки. Кнопка будет масштабироваться по мере увеличения и уменьшения размера текста.

Кнопка Background

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

Цвет фона кнопки

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

Кнопка ширина рамки

По умолчанию все кнопки Divi имеют границу размером 2 пикселя. Эта граница может быть увеличена или уменьшена в размере с помощью этой настройки. Границы можно удалить, введя значение 0.

Кнопка цвет рамки

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

Кнопка радиус рамки

Радиус границы влияет на то, насколько скруглены углы ваших кнопок. По умолчанию кнопки в Divi имеют небольшой радиус границы, который закругляет углы на 3 пикселя. Вы можете уменьшить это значение до 0, чтобы создать квадратную кнопку, или значительно увеличьте, чтобы создать кнопки с круглыми краями.

Кнопка расстояние между букв

Расстояние между буквами влияет на расстояние между буквами. Если вы хотите увеличить интервал между каждой буквой в тексте кнопки, используйте ползунок диапазона, чтобы отрегулировать интервал, или введите желаемый размер интервала в поле ввода справа от ползунка. Поля ввода поддерживают различные единицы измерения, что означает, что вы можете ввести «px» или «em» после вашего значения размера, чтобы изменить его тип единицы измерения.

Шрифт кнопки

Вы можете изменить шрифт текста кнопки, выбрав нужный шрифт в раскрывающемся меню. Divi поставляется с десятками отличных шрифтов на базе Google Fonts. По умолчанию Divi использует шрифт Open Sans для всего текста на вашей странице. Вы также можете настроить стиль текста, используя полужирный шрифт, курсив, заглавные буквы и подчеркивание.

Кнопка икона

Отключено, этот параметр удалит значки с вашей кнопки. По умолчанию все кнопки Divi отображают значок стрелки при наведении курсора.

Кнопка икона

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

Кнопка цвет иконки

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

Кнопка иконка размещения

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

Только показывать значок при наведении курсора мыши на кнопка

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

Вкладка Расширенный модуля Контактная форма

На вкладке «Расширенный» вы найдете параметры, которые могут оказаться полезными для более опытных веб-дизайнеров, например настраиваемые атрибуты CSS и HTML. Здесь вы можете применить собственный CSS к любому из множества элементов модуля. Вы также можете применить к модулю собственные классы CSS и идентификаторы, которые можно использовать для настройки модуля в файле style.css вашей дочерней темы.

CSS ID

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

Класс CSS

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

Пользовательский CSS

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

Отключить на:

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

Индивидуальные настройки модуля Контактная форма — вкладка Контент