Contact Form 7 — один из самых популярных плагинов для создания форм обратной связи в WordPress. Однако иногда возникает задача не только отправлять форму, но и давать пользователю возможность отменить отправку, а также показывать подтверждающее окно (popup) вместо стандартного сообщения. В этой статье мы подробно разберём, как реализовать отмену отправки, а также выводить кастомное всплывающее окно подтверждения, используя Contact Form 7 и дополнительные скрипты.
Почему стандартная отправка Contact Form 7 не всегда удобна
По умолчанию Contact Form 7 при отправке формы показывает сообщение об успешной отправке или ошибке прямо под формой. Это бывает достаточно, но не всегда удобно с точки зрения пользовательского опыта. Например, если форма используется для важных заявок, пользователю может быть полезно увидеть всплывающее окно с возможностью подтвердить отправку или отменить её.
Кроме того, иногда пользователю нужно дать опцию отмены отправки после нажатия кнопки, что стандартными средствами Contact Form 7 реализовать сложно.
Реализация этих функций требует вмешательства в JavaScript-логику плагина и интеграции с внешними скриптами popup.
Отмена отправки формы Contact Form 7: практическое решение
Contact Form 7 использует событие wpcf7submit, которое срабатывает после отправки формы. Для отмены отправки нам нужно перехватить момент перед отправкой, а точнее — блокировать стандартное поведение кнопки submit и показать пользователю окно подтверждения.
Перехват события клика по кнопке отправки
Добавим кастомный JavaScript код, который будет блокировать отправку формы и показывать popup с вопросом «Вы точно хотите отправить форму?».
document.addEventListener('DOMContentLoaded', function() {
const forms = document.querySelectorAll('.wpcf7 form');
forms.forEach(function(form) {
form.addEventListener('submit', function(event) {
event.preventDefault(); // отменяем стандартную отправку
// показываем окно подтверждения
if (window.confirm('Вы точно хотите отправить форму?')) {
// если пользователь подтвердил - отправляем форму программно
document.querySelector('.wpcf7 form').removeEventListener('submit', arguments.callee);
form.submit();
} else {
// если отменил - просто ничего не делаем
}
});
});
});Этот скрипт добавляет базовое JavaScript-подтверждение. Однако для более красивых и удобных popup лучше использовать библиотеки, например, SweetAlert2.
Использование SweetAlert2 для подтверждения отправки
Первым шагом подключите SweetAlert2 к вашему сайту, добавив в header темы или через плагин:
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>Далее заменим стандартный confirm на SweetAlert2:
document.addEventListener('DOMContentLoaded', function() {
const forms = document.querySelectorAll('.wpcf7 form');
forms.forEach(function(form) {
form.addEventListener('submit', function(event) {
event.preventDefault();
Swal.fire({
title: 'Подтвердите отправку',
text: 'Вы точно хотите отправить форму?',
icon: 'question',
showCancelButton: true,
confirmButtonText: 'Отправить',
cancelButtonText: 'Отмена'
}).then((result) => {
if (result.isConfirmed) {
form.submit();
}
});
});
});
});Так пользователь увидит стильное всплывающее окно и сможет подтвердить или отменить отправку.
Вывод кастомного popup после успешной отправки формы
Contact Form 7 генерирует событие wpcf7mailsent после успешной отправки. Можно использовать его для показа кастомного popup с благодарностью или дальнейшими инструкциями.
Пример показа popup с использованием SweetAlert2
document.addEventListener('wpcf7mailsent', function(event) {
Swal.fire({
title: 'Спасибо!',
text: 'Ваша заявка успешно отправлена. Мы свяжемся с вами в ближайшее время.',
icon: 'success',
confirmButtonText: 'Закрыть'
});
}, false);Добавьте этот код после подключения SweetAlert2, и после успешной отправки формы пользователь увидит красивое окно подтверждения.
Альтернатива: плагин Popup Maker
Если вы предпочитаете работать с плагинами, можно использовать Popup Maker.
- Создайте новый popup с вашим сообщением.
- С помощью JavaScript откройте popup при событии
wpcf7mailsent:
document.addEventListener('wpcf7mailsent', function(event) {
PUM.open(1234); // 1234 - ID вашего popup
});Так вы получите более гибкое управление содержимым и стилем всплывающих окон.
Обработка ошибок и отмена отправки: советы и хитрости
При реализации отмены и подтверждений важно не нарушить логику валидации и отправки формы Contact Form 7.
Рекомендуется:
- Всегда использовать
event.preventDefault()в обработчике отправки, чтобы полностью контролировать процесс. - Не забывать снимать обработчик события при программном вызове
form.submit(), чтобы не возникала рекурсия. - Проверять совместимость с другими плагинами и темой, чтобы избежать конфликтов JavaScript.
- Тестировать на разных браузерах и мобильных устройствах.
Пример полноценной функции с префиксом contactform7ru_
function contactform7ru_initConfirmation() {
const forms = document.querySelectorAll('.wpcf7 form');
forms.forEach(function(form) {
function onSubmit(event) {
event.preventDefault();
Swal.fire({
title: 'Подтверждение',
text: 'Вы хотите отправить форму?',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Да',
cancelButtonText: 'Нет'
}).then((result) => {
if (result.isConfirmed) {
form.removeEventListener('submit', onSubmit);
form.submit();
}
});
}
form.addEventListener('submit', onSubmit);
});
}
document.addEventListener('DOMContentLoaded', contactform7ru_initConfirmation);Этот подход позволяет централизованно и удобно управлять подтверждением отправки.
Итог
Реализация отмены отправки формы и вывода кастомного подтверждающего popup значительно улучшает UX и повышает доверие пользователей. Используя события Contact Form 7 и современные библиотеки для popup, вы можете без труда внедрить эти функции на сайте.
В статье рассмотрены базовые и продвинутые методы с примерами кода. Далее вы можете адаптировать их под свои задачи и расширять функционал.