5 уникальных способов стилизовать модуль контактной формы Divi

Контактные формы являются важной частью многих веб-сайтов. Их основная цель - быть интуитивно понятными и помогать посетителям легко выходить на связь. Но это не значит, что все контактные формы должны выглядеть определенным и предопределенным образом. Вы можете легко совместить интуитивно понятный интерфейс с красивым дизайном. Именно этим мы и займемся в этом посте. Мы собираемся поделиться 5 уникальными дизайнами модулей контактной формы Divi, которые вы можете создать, используя только встроенные параметры Divi.

Давайте приступим к делу!

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

Рабочий стол

Давайте начнем с рассмотрения дизайна модуля контактной формы Divi на рабочем столе.

Мобильный

А вот как выглядит дизайн модуля контактной формы Divi на экранах меньшего размера:

5 уникальных способов стилизовать модуль контактной формы Divi

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

Создание контактной формы №1

Добавить новый раздел

Градиентный фон

Начнем с первого примера! Добавьте новый раздел, перейдите в настройки фона и добавьте градиентный фон.

• Цвет 1: # 4c00ff
• Цвет 2: # ffd400
• Тип градиента: радиальный
• Радиальное направление: внизу слева
• Стартовая позиция: 34%
• Конечная позиция: 34%

Интервал

Затем перейдите к настройкам интервалов и добавьте несколько значений пользовательского отступа.

• Верхний отступ: 200 пикселей
• Нижний отступ: 200 пикселей

Добавить новую строку

Структура столбца

Добавьте новую строку, используя следующую структуру столбцов:

Цвет фона столбца 1

Еще не добавляя никаких модулей, откройте настройки строки и добавьте градиентный фон столбца 1.

• Цвет фона столбца 1: rgba (255,255,255,0,55)

Фоновое изображение столбца 1

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

• Столбец 1: повторение фонового изображения: без повтора
• Столбец 1 Фоновое наложение изображения: Экран

Цвет фона столбца 2

И белый цвет фона для второго столбца.

• Цвет фона столбца 2: #ffffff

Размеры

Затем измените настройки размера.

• Выровнять высоту столбца: Да

Интервал

Удалите также все настраиваемые отступы по умолчанию.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Радиус границы столбца

Добавьте радиус границы к обоим столбцам на вкладке «Дополнительно».

border-radius: 10px;

Добавить текстовый модуль в столбец 1

Добавить содержимое

Пора начинать добавлять различные модули! Добавьте текстовый модуль в первый столбец с некоторым содержимым по выбору.

Настройки текста

Затем перейдите к настройкам текста и внесите некоторые изменения.

• Шрифт текста: Satisfy
• Цвет текста: # 333333
• Размер текста: 100 пикселей
• Высота текстовой строки: 1em
• Ориентация текста: по центру

Интервал

Также добавьте несколько пользовательских значений заполнения.

• Верхний отступ: 600 пикселей
• Нижний отступ: 100 пикселей

Коробка Тень

Чтобы добавить глубины дизайну, используйте легкую тень блока.

• Сила размытия тени коробки: 80 пикселей
• Сила распространения тени коробки: -16 пикселей
• Цвет тени: rgba (0,0,0,0.3)

Добавить модуль изображения в столбец 2

Загрузить изображение PNG

Продолжите, добавив модуль изображения во второй столбец. Загрузите любое изображение в формате PNG.

Размеры

Измените настройки размера этого модуля.

• Ширина: 25% (рабочий стол), 50% (планшет), 60% (телефон)
• Выравнивание модуля: по центру

Интервал

Создайте перекрытие, используя отрицательное верхнее поле.

• Максимальная маржа: -60%

Добавить текстовый модуль №1 в столбец 2

Добавить содержимое

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

Настройки текста

Измените текстовые настройки этого модуля.

• Шрифт текста: удовлетворительно
• Цвет текста: # 333333
• Размер текста: 44 пикс.
• Ориентация текста: по центру

Добавить текстовый модуль №2 в столбец 2

Добавить содержимое

Затем добавьте еще один текстовый модуль.

Настройки текста

Измените также текстовые настройки этого модуля.

• Шрифт текста: Arial
• Цвет текста: # ffd400
• Размер текста: 18 пикселей
• Расстояние между буквами текста: 2 пикселя
• Ориентация текста: по центру

Интервал

Затем добавьте нижнее поле.

• Нижнее поле: 100 пикселей

Добавить модуль контактной формы в столбец 2

Включите опцию "Сделать полную ширину" в поле имени и электронной почты

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

• Сделать полную ширину: Да

Добавить поле темы

Чтобы создать этот дизайн, мы добавили еще одно поле для темы.

Элементы

Далее отключите опцию captcha.

• Отображение Captcha: Нет

Настройки текста поля формы

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

• Цвет фона поля формы: rgba (255,255,255,0)
• Шрифт поля формы: Arial
• Плотность шрифта поля формы: Light
• Размер текста поля формы: 16 пикселей
• Расстояние между буквами поля формы: 2 пикселя

Настройки кнопок

Мы также изменяем внешний вид кнопки.

• Использовать пользовательские стили для кнопки: Да
• Цвет текста кнопки: # ffd400
• Ширина границы кнопки: 0 пикселей
• Расстояние между буквами кнопки: 2 пикселя
• Шрифт кнопки: Arial
• Стиль шрифта: подчеркивание
• Цвет подчеркивания: # 4c00ff

Интервал

Затем добавьте несколько пользовательских значений заполнения.

• Нижний отступ: 100 пикселей
• Отступ слева: 50 пикселей
• Отступ справа: 50 пикселей

Граница

И добавьте тонкую нижнюю границу к каждому из полей.

• Ширина нижней границы: 2 пикселя
• Цвет нижней границы: #efefef

Индивидуальный интервал поля

И последнее, но не менее важное: добавьте нижнее поле в каждое из отдельных полей, кроме поля сообщения.

• Нижнее поле: 20 пикселей

Создание контактной формы №2

Добавить новый раздел

Градиентный фон

Переходим к следующему примеру! Добавьте новый раздел с градиентным фоном.

• Цвет 1: # 562fef
• Цвет 2: #ffffff
• Тип градиента: линейный
• Стартовая позиция: 50%
• Конечная позиция: 50%

Интервал

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

• Верхний отступ: 200 пикселей
• Нижний отступ: 200 пикселей

Добавить новую строку

Структура столбца

Добавьте новую строку, используя следующую структуру столбцов:

Фоновый цвет

Еще не добавляя никаких модулей, откройте настройки строки и добавьте цвет фона для строки.

• Цвет фона: #ffffff

Столбец 2 градиентный фон

Добавьте градиентный фон во второй столбец следующей строки.

• Цвет 1: # 9932ff
• Цвет 2: # 562fef
• Столбец 2 Тип градиента: линейный
• Столбец 2 Направление градиента: 160 градусов

Размеры

Также измените настройки размера строки.

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да

Интервал

Затем добавьте несколько значений пользовательского интервала.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей
• Отступ сверху столбца 1: 100 пикселей.
• Отступ снизу столбца 1: 50 пикселей
• Колонка 1, отступ слева: 50 пикселей.
• Колонка 1, отступ справа: 50 пикселей.
• Верхний отступ столбца 2: 100 пикселей.
• Отступ нижнего столбца 2: 100 пикселей
• Колонка 2, отступ слева: 50 пикселей.
• Колонка 2, отступ справа: 50 пикселей.

Граница

Добавьте «20 пикселей» к каждой из границ ряда.

Коробка Тень

Наконец, добавьте к строке тонкую тень прямоугольника.

• Сила размытия тени коробки: 45 пикселей
• Сила распространения тени коробки: -11 пикселей
• Цвет тени: rgba (0,0,0,0.3)

Добавить текстовый модуль в столбец 1

Добавить содержимое

Пора начинать добавлять модули! Начните с текстового модуля в первом столбце.

Настройки текста

Измените текстовые настройки этого модуля.

• Толщина шрифта текста: Ультра полужирный
• Стиль шрифта текста: прописные.
• Цвет текста: # 562fef
• Текст Suze: 100 пикселей (рабочий стол), 80 пикселей (планшет), 60 пикселей (телефон)
• Расстояние между буквами текста: -10 пикселей
• Высота текстовой строки: 1em

Интервал

Также добавьте немного нижнего поля.

• Нижнее поле: 50 пикселей

Добавить модуль контактной формы в столбец 1

Элементы

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

• Отображение Captcha: Нет

Настройки текста поля формы

Затем измените цвет фона поля формы.

• Цвет фона поля формы: #ffffff

Настройки кнопок

Поэкспериментируйте с настройками кнопки, чтобы создать кнопку-значок вместо кнопки, содержащей текст.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 73 пикселей
• Цвет текста хлопка: rgba (0,0,0,0)
• Цвет фона кнопки наведения: rgba (255,255,255,0)
• Ширина границы кнопки: 0 пикселей
• Цвет значка кнопки: # 9932ff
• Показывать значок только при наведении курсора на кнопку: Нет

Коробка Тень

Наконец, добавьте тонкую тень прямоугольника на каждое из полей.

• Сила размытия тени коробки: 36 пикселей
• Сила размытия тени коробки: -14 пикселей
• Цвет тени: rgba (0,0,0,0.3)

Добавить текстовый модуль в столбец 2

Добавить содержимое

Первый модуль, который нам понадобится во втором столбце, - это еще один текстовый модуль.

Настройки текста

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

• Толщина шрифта текста: Ультра полужирный
• Цвет текста: #ffffff
• Размер текста: 23 пикс.
• Расстояние между буквами текста: -1px

Добавить модуль Blurb # 1 в столбец 2

Добавить содержимое

Второй модуль, который нам понадобится, - это модуль Blurb. Идите вперед и введите некоторую контактную информацию.

Выбрать значок

Затем выберите соответствующий значок.

Настройки значков

Измените настройки этого значка.

• Цвет значка: #ffffff
• Расположение значков: слева

Настройки текста заголовка

Затем внесите некоторые изменения в настройки текста заголовка.

• Размер текста заголовка: 15 пикселей
• Интервал между заголовками: -0,5 пикселей

Интервал

И добавьте немного верхнего поля.

• Верхнее поле: 120 пикселей

Клонировать модуль Blurb дважды

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

Изменить содержимое и значок обоих дубликатов

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

Изменить интервал между двумя дубликатами

Также необходимо изменить верхнее поле обоих дубликатов.

• Верхнее поле: 30 пикселей

Создание контактной формы №3

Добавить новый раздел

Фоновый цвет

К третьему примеру! Добавьте новый раздел со следующим цветом фона:

• Цвет фона: # 3491CE

Интервал

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

• Верхний отступ: 200 пикселей
• Нижний отступ: 200 пикселей

Добавить строку №1

Структура столбца

Затем добавьте новую строку, используя следующую структуру столбцов:

Добавить текстовый модуль

Добавить содержимое

Пора начинать добавлять модули! Первый модуль, который нам нужно добавить в первый столбец, - это текстовый модуль. Введите какой-нибудь контент по выбору.

Настройки текста

Затем измените настройки текста.

• Толщина шрифта текста: Ультра полужирный
• Цвет текста: rgba (255,255,255,0,24)
• Размер текста: 100 пикселей (рабочий стол), 86 пикселей (планшет), 60 пикселей (телефон).
• Высота текстовой строки: 1em
• Ориентация текста: по центру

Интервал

Также добавьте отрицательное нижнее поле.

• Нижнее поле: -100 пикселей

Добавить строку №2

Структура столбца

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

Градиентный фон

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

• Цвет 1: # 11CE84
• Цвет 2: # 10C77F
• Тип градиента: линейный
• Направление градиента: 160 градусов
• Стартовая позиция: 50%
• Конечная позиция: 50%

Размеры

Также измените настройки размера.

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да

Интервал

Затем добавьте несколько пользовательских значений заполнения.

• Верхний отступ: 150 пикселей
• Нижний отступ: 100 пикселей
• Отступ слева: 50 пикселей
• Отступ справа: 50 пикселей

Граница

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

• Ширина нижней границы: 10 пикселей
• Цвет нижней границы: # 1ba35a

Коробка Тень

Завершите настройку ряда, добавив тонкую тень блока.

• Сила размытия тени коробки: 80 пикселей
• Сила распространения тени коробки: -24px
• Цвет тени: rgba (0,0,0,0.3)

Добавить модуль контактной формы в столбец 1

Включите опцию "Сделать полную ширину" в поле имени и электронной почты

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

• Сделать полную ширину: Да

Элементы

Далее отключите капчу.

• Отображение Captcha: Нет

Настройки кнопок

И измените настройки кнопки.

• Использовать пользовательские стили для кнопки: Да
• Цвет текста кнопки: #ffffff
• Цвет 1: # 3AA0E3
• Цвет 2: # 3491CE
• Тип градиента: линейный
• Направление градиента: 155 градусов
• Стартовая позиция: 50%
• Конечная позиция: 50%
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 10 пикселей
• Сила распространения тени коробки: -2 пикселя
• Цвет тени: # 0a60af

Граница

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

Добавить текстовый модуль в столбец 2

Добавить содержимое

Во втором столбце первый модуль, который нам понадобится, - это текстовый модуль. Идите вперед и введите какой-нибудь контент.

Фоновый цвет

Затем измените цвет фона.

• Цвет фона: rgba (255,255,255,0,13)

Настройки текста

Поиграйте также с настройками текста.

• Толщина шрифта текста: легкий
• Цвет текста: #ffffff
• Размер текста: 15 пикселей
• Расстояние между буквами текста: -0,5 пикселей

Интервал

И добавьте немного настраиваемых отступов, чтобы дать модулю возможность дышать.

• Верхний отступ: 12 пикселей
• Нижний отступ: 12 пикселей
• Отступ слева: 10 пикселей
• Отступ справа: 10 пикселей

Граница

Мы также добавляем «20 пикселей» в верхний левый и нижний левый углы. Вдобавок мы добавим левую границу.

• Ширина левой границы: 34 пикселя
• Цвет левой границы: # edf000

Видимость

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

Клонировать текстовый модуль дважды

Как только вы закончите изменять первый текстовый модуль, продолжайте и дважды клонируйте модуль.

Изменить содержимое обоих дубликатов

Измените содержимое обоих дубликатов на другое.

Изменить интервал между двумя дубликатами

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

• Верхнее поле: 20 пикселей

Изменить границу обоих дубликатов

И последнее, но не менее важное: измените цвет левой границы каждого дубликата по отдельности.

• Цвет 1: # 00faff
• Цвет 2: # 00f76f

Создание контактной формы №4

Добавить новый раздел

Фоновый цвет

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

• Цвет фона: #FFBABD

Интервал

Удалите отступы по умолчанию для этого раздела.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Добавить новую строку

Структура столбца

Продолжите, добавив новую строку, используя следующую структуру столбцов:

Градиентный фон

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

• Цвет 1: #ffffff
• Цвет 2: rgba (41,196,169,0)
• Тип градиента: радиальный
• Радиальное направление: центр
• Стартовая позиция: 38%
• Конечная позиция: 38%

Размеры

Затем измените настройки размера.

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

И добавьте пользовательские отступы.

• Верхний отступ: 160 пикселей
• Нижний отступ: 160 пикселей

Добавить текстовый модуль

Добавить содержимое

Первый модуль, который нам нужен, - это текстовый модуль. Идите вперед и введите какой-нибудь контент.

Настройки текста

Соответственно измените настройки текста:

• Шрифт текста: Abril Fatface
• Цвет текста: # 640076
• Размер текста: 45 пикселей (рабочий стол), 34 пикселей (планшет), 20 пикселей (телефон)
• Высота текстовой строки: 1em
• Ориентация текста: по центру

Интервал

Затем добавьте несколько значений пользовательского интервала.

• Верхнее поле: 300 пикселей
• Верхний отступ: 50 пикселей
• Нижний отступ: 50 пикселей

Добавить модуль контактной формы

Включите опцию "Сделать полную ширину" в поле имени и электронной почты

Второй и последний модуль, который нам нужен, - это модуль контактной формы. Откройте поля для имени и электронной почты и измените настройки макета.

• Сделать полную ширину: Да

Элементы

Затем отключите опцию captcha в настройках элементов.

• Отображение Captcha: Нет

Настройки текста поля формы

Также внесите некоторые изменения в настройки текста поля формы.

• Цвет фона поля формы: # fff6f6
• Цвет текста поля формы: # ff7c7c

Настройки кнопок

Измените кнопку на кнопку со значком, используя следующие настройки:

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 88 пикселей
• Цвет текста кнопки: rgba (255,255,255,0)
• Цвет фона кнопки наведения: rgba (255,255,255,0)
• Ширина границы кнопки: 0 пикселей
• Цвет значка кнопки: # e60085
• Отображать значок только при наведении курсора на кнопку: Да

Размеры

И поэкспериментируйте со значениями размеров, чтобы дизайн соответствовал всем размерам экрана.

• Ширина: 42% (рабочий стол), 50% (планшет), 77% (телефон)
• Выравнивание модуля: по центру

Интервал

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

• Нижнее поле: 200 пикселей
• Отступ слева: 50 пикселей
• Отступ справа: 50 пикселей

Граница

И добавьте «10 пикселей» к каждому из углов.

Маржа кнопки

И последнее, но не менее важное: нажмите кнопку со значком вправо, используя следующую строку кода CSS на вкладке «Дополнительно»:

margin-right: -100px;

Создание контактной формы # 5

Добавить новый раздел

Градиентный фон

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

• Цвет 1: # 4bf2d0
• Цвет 2: #ffffff
• Тип градиента: радиальный
• Радиальное направление: влево
• Стартовая позиция: 36%
• Конечная позиция: 36%

Интервал

Затем перейдите к настройкам интервалов и добавьте пользовательские отступы.

• Верхний отступ: 250 пикселей
• Нижний отступ: 250 пикселей

Добавить новую строку

Структура столбца

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

Фоновый цвет

Еще не добавляя никаких модулей, откройте настройки строки и добавьте цвет фона.

• Цвет фона: #ffffff

Цвет фона столбца 1

Добавьте другой цвет фона к первому столбцу.

• Цвет фона столбца 1: # f9f9f9

Размеры

Затем измените настройки размера строки.

• Использовать нестандартную ширину: Да
• Единица: PX
• Специальная ширина: 1730 пикселей
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да

Интервал

И добавьте несколько значений пользовательского интервала для соответствия всем размерам экрана.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей
• Отступ сверху столбца 1: 200 пикселей (рабочий стол), 0 пикселей (планшет и телефон).
• Отступ снизу столбца 1: 150 пикселей (рабочий стол), 0 пикселей (планшет и телефон)
• Колонка 1, отступ слева: 50 пикселей.
• Колонка 1, отступ справа: 50 пикселей.
• Отступ сверху столбца 2: 200 пикселей (рабочий стол), 100 пикселей (планшет и телефон).
• Отступ нижнего столбца 2: 150 пикселей, 100 пикселей (планшет и телефон)

Коробка Тень

Последнее, что вам нужно сделать в настройках строки, - это добавить тонкую тень блока.

• Сила размытия тени коробки: 56 пикселей
• Сила распространения тени коробки: -17 пикселей
• Цвет тени: rgba (0,0,0,0.3)

Добавить текстовый модуль в столбец 1

Добавить содержимое

Пора начинать добавлять модули! Добавьте текстовый модуль в первый столбец.

Настройки текста

После того, как вы добавили контент, перейдите к настройкам текста и внесите некоторые изменения.

• Шрифт текста: Cambay
• Цвет текста: # 000000
• Размер текста: 26 пикселей
• Расстояние между буквами текста: -0,5 пикселей
• Ориентация текста: вправо

Интервал

Также добавьте немного верхнего поля.

• Верхнее поле: 60 пикселей

Видимость

И скройте модуль как на телефоне, так и на планшете.

Клонировать текстовый модуль дважды

Изменить содержимое обоих дубликатов

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

Изменить интервал между двумя дубликатами

Измените также верхнее поле обоих дубликатов.

• Верхнее поле: 80 пикселей

Добавить модуль контактной формы в столбец 2

Включите опцию "Сделать полную ширину" в поле имени и электронной почты

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

• Сделать полную ширину: Да

Элементы

Далее отключите опцию captcha.

• Отображение Captcha: Да

Настройки текста поля формы

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

• Цвет фона поля формы: rgba (255,255,255,0)
• Шрифт поля формы: Cambay

Настройки кнопок

И создайте уникальную кнопку, используя следующие настройки кнопки:

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 64 пикселей (рабочий стол), 50 пикселей (планшет), 40 пикселей (телефон)
• Цвет текста кнопки: # 000000
• Цвет 1: # 4bf2d0
• Цвет 2: rgba (41,196,169,0)
• Тип градиента: радиальный
• Радиальное направление: центр
• Стартовая позиция: 25%
• Конечная позиция: 25%
• Ширина границы кнопки: 0 пикселей
• Показывать кнопку только при наведении курсора на кнопку: Нет

Интервал

Также добавьте верхний запас к этому модулю.

• Верхнее поле: 50 пикселей

Граница

И используйте тонкую нижнюю границу для каждого поля.

• Ширина нижней границы: 0,5 пикселя
• Цвет нижней границы: # 000000

Индивидуальный интервал поля

И последнее, но не менее важное: добавьте следующее нижнее поле к каждому из полей индивидуально, и все готово!

• Нижнее поле: 50 пикселей

Предварительный просмотр

Рабочий стол

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

Мобильный

И это то, что вы можете ожидать от дизайна модуля контактной формы Divi на экранах меньшего размера:

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

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