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

Опубликовано: 2017-07-14

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

Сегодня я собираюсь показать вам, как создать встроенную контактную форму для вашего веб-сайта с помощью Divi Visual Builder. Работа, необходимая для этого, на самом деле сводится к настройке как ширины, так и выравнивания полей формы. Для этого мы воспользуемся конструктивными особенностями контактного модуля, а также добавим несколько настраиваемых CSS на вкладке «Дополнительно».

Если вы новичок в Divi, не позволяйте вкладке «Дополнительно» удерживать вас от изучения этого руководства. Я изо всех сил старался, чтобы все было просто и понятно.

Наслаждаться.

Вот пример того, как будет выглядеть встроенная контактная форма

встроенная контактная форма

Концепция и вдохновение

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

Реализация дизайна с помощью Divi

Подпишитесь на наш канал Youtube

Мы начинаем с добавления регулярного раздела с одной строкой структуры столбца.

встроенная контактная форма

Поскольку остальные наши элементы будет трудно увидеть на белом фоне, давайте продолжим и добавим цвет фона в наш раздел, перейдя в Настройки раздела и обновив следующее:

Параметры содержимого

Цвет фона: # 006ea5

встроенная контактная форма

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

Теперь мы можем добавить наш модуль контактной формы в строку.

встроенная контактная форма

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

Параметры содержимого

Текст кнопки «Отправить»: «Получить расценки»
Электронная почта: [Введите адрес электронной почты, на который следует отправлять сообщения]
Отображение Captcha: НЕТ
Цвет фона формы: rgba (255,255,255,0)

встроенная контактная форма

Варианты дизайна

Шрифт поля формы: Lato
Размер шрифта поля формы: 24 пикселя
Цвет текста поля формы: #ffffff
Радиус входной границы: 3 пикселя
Использовать границу: ДА
Цвет границы: #ffffff
Ширина границы: 1 пикс.
Размер текста кнопки: рабочий стол 24 пикселей, планшет 20 пикселей, смартфон 20 пикселей
Цвет текста кнопки: # 0c71c3
Цвет фона кнопки: # f4f11f
Ширина границы кнопки: 3 пикселя
Радиус границы кнопки: 3

встроенная контактная форма

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

Вернитесь на вкладку «Содержимое» и удалите поле сообщения, щелкнув значок корзины справа от панели поля. Затем добавьте новое поле, нажав кнопку с серым кружком со знаком белого плюса, расположенную под отдельными полосами поля. Это будет поле "Телефон".

встроенная контактная форма

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

Параметры содержимого

Идентификатор поля: «Телефон»
Название: Телефон

встроенная контактная форма

Варианты дизайна

Сделать полную ширину: НЕТ
Допустимые символы: только цифры (0-9)

встроенная контактная форма

Расширенные настройки

Введите следующий настраиваемый CSS в поле « Главный элемент» : 

Max-width: 18%;
Float: left;
Margin-top: -1.5%;
Clear: none !important;

встроенная контактная форма

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

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

встроенная контактная форма

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

Параметры содержимого

Идентификатор поля: «Почтовый индекс».
Название: Почтовый индекс

встроенная контактная форма

Расширенные настройки

Введите следующий настраиваемый CSS в поле « Главный элемент» : 

Max-width: 17%;
Margin-top: -1.5%;

встроенная контактная форма

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

Пока мы отрегулировали ширину и выравнивание полей «Телефон» и «Почтовый индекс». Теперь нам нужно сделать то же самое с полями «Имя» и «Электронная почта».

Перейдите к настройкам поля Имя и обновите Дополнительные параметры с помощью следующего настраиваемого CSS внутри поля основного элемента : 

Max-width: 20%;
Margin-top: -1.5%;

встроенная контактная форма

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

Затем перейдите к настройкам поля Электронная почта и обновите дополнительные параметры, добавив следующий настраиваемый CSS в поле основного элемента : 

Max-width: 20%;
Margin-top: -1.5%;

встроенная контактная форма

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

Важное примечание: обратите внимание, что пользовательский CSS, используемый для каждого из полей, имеет свойство max-width, установленное на определенный процент. Этот процент определяет, насколько широкие поля будут соотноситься с шириной области содержимого. Например, размер области содержимого Divi по умолчанию составляет 1080 пикселей, поэтому поле имени составляет 20% от 1080 пикселей. Это важно знать, если вы хотите освободить больше места для встроенной формы. Все, что вам нужно сделать, это настроить процентное значение для свойства max-width по мере необходимости.

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

Пользовательский отступ: 12 пикселей сверху, 14 пикселей снизу

встроенная контактная форма

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

Теперь перейдите в Параметры строки на вкладке Дизайн и обновите следующее:

Пользовательский отступ: 48 пикселей сверху, 0 пикселей справа, 0 пикселей снизу, 0 пикселей слева

встроенная контактная форма

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

Делаем это отзывчивым

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

@media (max-width: 767px) {

p.et_pb_contact_field {
max-width: 100% !important;
}
}

Вот как форма реагирует на разные размеры экрана.

встроенная контактная форма

Создание встроенной контактной формы с тремя полями

встроенная контактная форма

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

  1. Отредактируйте только что созданную встроенную форму или скопируйте форму.
  2. Удалить поле почтового индекса (теперь у вас всего три поля)
  3. Обновите настройки поля телефона (или третьего поля) на вкладке «Дополнительно» с помощью следующего настраиваемого CSS в поле 
    Main Element box:max-width: 25%;
float:left;
margin-top: -1.5%;
clear: none !important;
  4. Обновите настройки поля электронной почты (или другого поля) на вкладке «Дополнительно» с помощью следующего настраиваемого CSS в поле «Главный элемент»: 
    max-width: 25%;
margin-top: -1.5%;
  5. Обновите настройки поля имени (или любого другого поля) на вкладке «Дополнительно» с помощью следующего настраиваемого CSS в поле «Главный элемент»: 
    max-width: 25%;
margin-top: -1.5%;

Примечание. Обратите внимание, что свойство max-width для каждого поля теперь составляет 25%, чтобы увеличить ширину полей.

Создание встроенной контактной формы с двумя полями

встроенная контактная форма

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

  1. Отредактируйте только что созданную встроенную форму или скопируйте форму.
  2. Удалите поле почтового индекса и поле телефона, чтобы у вас было только два поля (имя и адрес электронной почты)
  3. Обновите настройки поля имени (или любого другого поля) на вкладке «Дополнительно» с помощью следующего настраиваемого CSS в поле «Главный элемент»: 
    max-width: 37%;
margin-top: -1.5%;
  4. Обновите настройки поля электронной почты (или другого поля) на вкладке «Дополнительно» с помощью следующего настраиваемого CSS в поле «Главный элемент»: 
    max-width: 37%;
margin-top: -1.5%;
clear: none !important;

Добавление других типов полей

Это руководство предназначено в основном для обычных типов полей ввода, но вы можете легко изменить его на другой тип поля. Например, если вы хотите использовать тип поля для выбора в раскрывающемся списке, вы можете применить тот же стиль, что и для других полей. Однако вам нужно будет добавить цвет фона (# 006ea5) в это конкретное поле, чтобы вы могли видеть параметры.

Вот как будет выглядеть раскрывающееся поле…

встроенная контактная форма

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

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

Будем рады услышать от вас в комментариях.