Шаг 1: Простое применение

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

Шаг 2: Индивидуальные стили

Кроме добавления индивидуальных стилей к контактным формам, можно использовать плагин от Divi для Contact Form 7, который предоставляет дополнительные функциональные возможности. Этот плагин предлагает встроенные интеграции с Divi Builder, позволяя легко создавать и настраивать контактные формы визуально. Вы можете выбирать из различных типов полей, настраивать макет формы, устанавливать правила проверки и добавлять пользовательские стили.

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

Шаг 4: Скрытие надписей о валидации

Еще одной полезной функцией, которую можно добавить к контактным формам с использованием Контактной формы 7 и Divi, является скрытие надписей о валидации после определенного времени. Вы можете использовать JavaScript, чтобы сделать это. Например, вы можете задать таймер на 7 секунд для отображения сообщения о валидации, а затем автоматически скрыть его. Это обеспечит более элегантный пользовательский интерфейс без постоянного присутствия сообщений о валидации

document.addEventListener(‘wpcf7mailsent’,function (response) {
messages.forEach((message) => {
if (message.textContent === "") {
setTimeout(() => {
messages.forEach((message) => {
message.textContent = "";
});
},7000);
}
});
},false);

Шаг 5: Закрытие модальных окон

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

document.addEventListener(‘wpcf7mailsent’,function (response) {
messages.forEach((message) => {
if (message.textContent === "") {
setTimeout(() => {
messages.forEach((message) => {
message.textContent = "";
});
},7000);
}
});
setTimeout(() => {
document.querySelector(‘.da-close’).click();
},5000);

},false);