Как создать контактную форму при нажатии с Divi

В этом руководстве по Divi мы покажем вам, как создать контактную форму, которая появляется после нажатия кнопки (в виде наложения), не используя ничего, кроме Divi, некоторого кода jQuery и кода CSS.

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

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

Результат на рабочем столе

Результат на телефоне и планшете

Вдохновение

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

Создать раздел с помощью модуля кнопки

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

Хорошо, перейдем к этому руководству!

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

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

Вы можете стилизовать кнопку, как хотите, но вы должны убедиться, что URL-адрес кнопки начинается с символа «#», за которым следует что-то еще. Вы не можете просто оставить это поле пустым или использовать только символ "#". При добавлении символа «#» и некоторого текста страница не будет перемещаться после нажатия на кнопку. Если вы оставите поле пустым, страница будет обновляться при нажатии. А если вы используете только "#", вы попадете в верхнюю часть страницы.

Следующее, что нам нужно сделать, это назначить кнопке класс CSS. Мы будем использовать этот класс CSS позже в этом посте в коде jQuery, чтобы убедиться, что контактная форма появляется после нажатия. Класс, который нам нужно назначить кнопке, - это просто «кнопка».

Создание контактной формы на рабочем столе при нажатии

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

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

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

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

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

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

display: none;

Последнее, что нам нужно сделать на вкладке «Дополнительно», - это отключить раздел на телефоне и планшете в подкатегории «Видимость».

Добавить двухколоночную строку

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

Прокрутите вкладку «Дизайн» и используйте «30 пикселей» для верхнего, левого и правого отступов обоих столбцов в подкатегории «Интервал».

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

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

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

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

• Ориентация текста: по центру
• Шрифт текста: лобстер
• Стиль шрифта: полужирный
• Размер шрифта текста: 37
• Цвет текста: # 002282
• Высота текстовой строки: 1,7 мкм

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

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

• Ориентация текста: по центру
• Шрифт текста: Arial
• Размер шрифта текста: 13
• Цвет текста: # 002282
• Высота текстовой строки: 1,7 мкм

Добавить модуль подписки в социальных сетях

Двигаясь дальше, мы собираемся добавить модуль отслеживания социальных сетей в первый столбец. В данном случае мы выбрали три социальных иконки; Facebook, Twitter и Instagram. После того, как вы добавили эти значки социальных сетей на вкладку «Содержимое», измените форму ссылки на «Круг» в подкатегории «Значок».

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

padding-left: 40%;

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

Затем мы можем перейти ко второму столбцу строки. В этом столбце мы в первую очередь разместим модуль контактной формы. В этом примере мы выбрали только два поля; имя и адрес электронной почты. После добавления модуля контактной формы перейдите на вкладку «Дизайн» модуля контактной формы и внесите следующие изменения в подкатегорию «Текст поля формы»:

• Размер шрифта поля формы: 15
• Цвет текста поля формы: # 002282
• Высота линии поля формы: 1,7 мкм

На этой же вкладке внесите следующие изменения в подкатегорию кнопок:

• Использовать собственный стиль для кнопки: Да
• Размер текста кнопки: 20
• Цвет текста кнопки: #FFFFFF
• Цвет фона кнопки: # 0086c4
• Ширина границы кнопки: 2
• Радиус кнопки: 3

Перейдите на вкладку Advanced и добавьте верхний отступ 5%.

Добавить модуль Blurb

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

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

position: absolute;
top: -45px;
right: -30px;
cursor: pointer;

Применить градиентный фон к строке

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

• Первый цвет градиента: #FFFFFF
• Второй цвет градиента: # 0c71c3
• Тип градиента: линейный
• Направление градиента: 124 град.
• Стартовая позиция: 50%
• Конечная позиция: 50%

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

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

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

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

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

Добавьте также следующую строку кода CSS к основному элементу:

display: none;

Вместо того, чтобы отключать его для телефона и планшета, как мы это сделали для настольной версии, мы собираемся отключить его на рабочем столе в подкатегории Visibility:

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

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

Нам также необходимо убедиться, что следующие строки кода CSS добавлены к основному элементу в подкатегории Custom CSS:

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

Клонировать текст, отслеживание в социальных сетях и модуль контактной формы

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

Клонировать модуль Blurb и изменить код CSS на вкладке Advanced

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

position: absolute;
top: -15px;
right: -25px;
cursor: pointer;

Убедитесь, что CSS-класс close также используется для модуля Blurb.

Применить градиентный фон к строке

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

• Первый цвет градиента: #FFFFFF
• Второй цвет градиента: # 0c71c3
• Тип градиента: линейный
• Направление градиента: 180 градусов
• Стартовая позиция: 40%
• Конечная позиция: 40%

Добавить код jQuery в параметры темы

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

Для этого перейдите в панель управления WordPress> Divi> Параметры темы> Интеграция> и вставьте следующие строки кода jQuery в заголовок вашего веб-сайта:

<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>

Результат

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

И такой результат на планшетах и ​​телефонах:

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

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

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!

Лучшее изображение: La1n / shutterstock.com