Всплывающие формы (pop-up forms) – мощный инструмент для привлечения внимания посетителей вашего сайта WordPress, сбора лидов, подписки на рассылку или предложения специальных акций. Хотя существует множество плагинов для создания всплывающих форм, иногда возникает необходимость реализовать эту функциональность без их использования. Это может быть связано с оптимизацией производительности, желанием полного контроля над кодом или просто необходимостью нестандартной реализации.
Преимущества создания всплывающей формы без использования плагинов
- Производительность: Отсутствие лишнего кода плагина может положительно сказаться на скорости загрузки сайта.
- Контроль: Полный контроль над HTML, CSS и JavaScript позволяет создать именно ту форму, которая вам нужна, без ограничений плагина.
- Минимализм: Избегаете установки дополнительных плагинов, что упрощает обслуживание сайта.
Недостатки использования самописного кода
- Сложность: Требуются знания HTML, CSS и JavaScript.
- Время: Разработка и отладка занимают больше времени, чем установка и настройка плагина.
- Поддержка: Ответственность за поддержку и обновление кода лежит на вас.
Когда стоит использовать плагин вместо самописного решения?
Если вам нужна сложная функциональность (A/B-тестирование, интеграция с CRM, расширенная аналитика) или вы не обладаете достаточными знаниями программирования, то использование плагина будет более целесообразным.
Подготовка: HTML структура всплывающей формы
Создание базового HTML-каркаса всплывающего окна (modal window)
Создадим базовую HTML-структуру всплывающего окна. Важно использовать семантические элементы и обеспечить доступность.
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>Подпишитесь на нашу рассылку!</h2>
</div>
</div>
Добавление полей формы (email, имя и т.д.)
Добавим необходимые поля формы, например, поле для ввода email и имени. Используйте лейблы для повышения доступности.
<form id="subscribeForm">
<label for="name">Имя:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<button type="submit">Подписаться</button>
</form>
Кнопка закрытия всплывающего окна
Кнопка закрытия необходима для удобства пользователя. Обычно ее располагают в верхнем правом углу модального окна.
<span class="close">×</span>
Полный HTML код структуры всплывающей формы будет выглядеть так:
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>Подпишитесь на нашу рассылку!</h2>
<form id="subscribeForm">
<label for="name">Имя:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<button type="submit">Подписаться</button>
</form>
</div>
</div>
Стилизация: CSS для привлекательной всплывающей формы
Базовое позиционирование и размеры всплывающего окна
Используем CSS для позиционирования и определения размеров всплывающего окна. Важно сделать его центрированным и читаемым.
.modal {
display: none; /* Скрыто по умолчанию */
position: fixed; /* Фиксированное положение */
z-index: 1; /* Размещаем поверх всего */
left: 0;
top: 0;
width: 100%; /* Полная ширина */
height: 100%; /* Полная высота */
overflow: auto; /* Включаем прокрутку, если контент не помещается */
background-color: rgba(0,0,0,0.4); /* Полупрозрачный фон */
}
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* Центрируем по вертикали и горизонтали */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Ширина контента */
}
Оформление полей формы и кнопки отправки
Придадим полям формы и кнопке отправки привлекательный вид, используя CSS.
input[type=text], input[type=email] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
Добавление анимации появления и исчезновения (fadeIn/fadeOut)
Добавим плавную анимацию для более приятного визуального эффекта.
/* Анимация fadeIn */
.modal.fade-in .modal-content {
animation: fadeIn 0.3s;
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
/* Анимация fadeOut (для закрытия, если нужно) */
@keyframes fadeOut {
from {opacity: 1;}
to {opacity: 0;}
}
.modal.fade-out .modal-content {
animation: fadeOut 0.3s;
}
Адаптивность для мобильных устройств
Убедитесь, что форма корректно отображается на мобильных устройствах, используя медиа-запросы.
@media screen and (max-width: 600px) {
.modal-content {
width: 90%;
}
}
Функциональность: JavaScript для открытия и закрытия всплывающей формы
Обработчик событий для кнопки открытия формы
Используем JavaScript для обработки события клика по кнопке открытия формы.
// @ts-check
/**
* Открывает модальное окно.
* @param {string} modalId - ID модального окна.
* @param {string} buttonId - ID кнопки открытия.
*/
function openModal(modalId: string, buttonId: string): void {
const modal: HTMLElement | null = document.getElementById(modalId);
const btn: HTMLElement | null = document.getElementById(buttonId);
if (!modal || !btn) {
console.error("Modal or button not found");
return;
}
btn.onclick = function(): void {
modal.style.display = "block";
}
}
openModal("myModal", "openModalButton"); // Пример использования. Предполагается, что у вас есть кнопка с id="openModalButton"
Обработчик событий для кнопки закрытия формы (и клика вне формы)
Добавим обработчики для закрытия формы при клике на кнопку закрытия и вне формы.
// @ts-check
/**
* Закрывает модальное окно.
* @param {string} modalId - ID модального окна.
*/
function closeModal(modalId: string): void {
const modal: HTMLElement | null = document.getElementById(modalId);
const span: HTMLElement | null = modal?.querySelector(".close");
if (!modal) {
console.error("Modal not found");
return;
}
if(span){
span.onclick = function(): void {
modal.style.display = "none";
}
}
// Закрытие при клике вне модального окна
window.onclick = function(event: MouseEvent): void {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
closeModal("myModal");
Простая валидация формы на стороне клиента (проверка email)
Реализуем простую валидацию email на стороне клиента.
// @ts-check
/**
* Проверяет, является ли строка корректным email-адресом.
* @param {string} email - Email адрес для проверки.
* @returns {boolean} - True, если email валиден, иначе false.
*/
function validateEmail(email: string): boolean {
const re: RegExp = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
return re.test(email);
}
/**
* Обрабатывает отправку формы, выполняя валидацию.
* @param {string} formId - ID формы для обработки.
*/
function handleFormSubmit(formId: string): void {
const form: HTMLFormElement | null = document.getElementById(formId) as HTMLFormElement;
if (!form) {
console.error("Form not found");
return;
}
form.onsubmit = function(event: Event): void {
event.preventDefault(); // Предотвращаем отправку формы по умолчанию
const emailInput: HTMLInputElement | null = form.querySelector("#email");
if (!emailInput) {
console.error("Email input not found");
return;
}
const email: string = emailInput.value;
if (!validateEmail(email)) {
alert("Пожалуйста, введите корректный email адрес.");
return;
}
alert("Форма отправлена!");
// Здесь можно добавить код для отправки данных на сервер
};
}
handleFormSubmit("subscribeForm");
Интеграция с WordPress: Добавление кода в тему
Добавление HTML и CSS в functions.php или отдельный файл
Рекомендуется создать отдельный файл, например, modal-form.php для HTML, и подключить его в functions.php вашей темы.
<?php
/**
* Подключает шаблон модального окна.
*/
function enqueue_modal_template(): void {
include_once( get_template_directory() . '/modal-form.php' );
}
add_action( 'wp_footer', 'enqueue_modal_template' );
/**
* Подключает стили для модального окна.
*/
function enqueue_modal_styles(): void {
wp_enqueue_style( 'modal-styles', get_template_directory_uri() . '/css/modal.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_modal_styles' );
Создайте файл modal-form.php в корне темы и поместите туда HTML код формы. Создайте файл css/modal.css и поместите туда CSS стили.
Добавление JavaScript в functions.php или отдельный файл (с использованием wpenqueuescripts)
Создайте JavaScript файл, например modal.js и добавьте в него код для открытия и закрытия формы. Подключите его через functions.php.
<?php
/**
* Подключает скрипты для модального окна.
*/
function enqueue_modal_scripts(): void {
wp_enqueue_script( 'modal-script', get_template_directory_uri() . '/js/modal.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_modal_scripts' );
Убедитесь, что JavaScript файл подключен с зависимостью от jQuery, если вы его используете, и расположен в нижней части страницы (true в wp_enqueue_script).
Тестирование и отладка: Проверка работоспособности на разных устройствах и браузерах
После интеграции необходимо тщательно протестировать форму на различных устройствах и браузерах, чтобы убедиться в ее корректной работе и адаптивности. Используйте инструменты разработчика для отладки JavaScript и CSS.