Обработка событий Contact Form 7

Узнайте, как эффективно обрабатывать DOM-события Contact Form 7, включая валидацию, обнаружение спама и коллбэки успешной отправки, на практических примерах.

24 октября 2024 г.2мин чтения

Плагин Contact Form 7, созданный и поддерживаемый Takayuki Miyoshi, — фактический стандарт создания форм в WP. Да, иногда встречается Gravity Forms, но это так же редко, как формы, написанные вручную, то есть — не особо часто.

CF7 из коробки даёт простой интерфейс, проверку nonce, AJAX-отправку и рассылку писем! Он надёжный, расширяемый и поставляется со встроенными интеграциями для CAPTCHA, антиспама и даже фильтрации.

Проблемы начинаются, когда он капризничает или когда от него нужно ещё что-то на странице: редирект после отправки, событие для аналитики, своя ошибка. Вот тут-то его причуды и кусаются. Этот пост — моя шпаргалка на такие случаи. Смело тащите себе.

Предварительные требования: заставляем CF7 работать правильно

Прежде чем переходить к событиям, убедитесь, что в вашей теме WordPress есть эти критически важные функции:

wp_head();  // Разместите в header
wp_footer(); // Разместите в footer

Эти функции правильно загружают JavaScript CF7 — пропустить их — распространённая ошибка, особенно в кастомных темах.

Основные события CF7 и когда их использовать

[contact-form-7 id="42"]

события на document

wpcf7beforesubmitдо того, как запрос уйдёт
POST …/contact-forms/42/feedbackвалидацияпроверка на спамотправка письма
wpcf7invalid | spam | mailsentодно из трёх, смотря что ответит сервер
wpcf7submitвсегда, и всегда последним

События настоящие — вставьте любой сниппет из этого поста в DevTools и отправьте форму ещё раз. Разве что не тот, что с редиректом. Напишите в сообщении про казино или оставьте email пустым. На самом деле ничего не отправляется.

Четыре события, к которым я реально обращаюсь:

1. Валидация формы (wpcf7invalid)

Срабатывает после того, как сервер обработал отправку и сказал «нет». В ответе обычно точно указано, какое поле не прошло и почему.

document.addEventListener('wpcf7invalid', function(event) {

  console.log('Form Invalid:', event.detail);

});

2. Обнаружение спама (wpcf7spam)

Особая разновидность «невалидной» отправки: сервер получил форму и решил, что от неё попахивает спамом. Срабатывает в тот же момент, что и wpcf7invalid.

document.addEventListener('wpcf7spam', function(event) {
    // Обработка потенциально спамных отправок
    console.log('Possible spam detected:', event.detail);
});

3. Успех! (wpcf7mailsent)

То самое событие, ради которого все здесь. Письмо ушло, так что делайте своё дело, например классический редирект на страницу «спасибо»:

document.addEventListener('wpcf7mailsent', function(event) {
    // Редирект после успешной отправки
    window.location.href = '/thank-you-page';
});

4. Отправка формы завершена (wpcf7submit)

Ловит всё подряд. Ему всё равно, чем дело кончилось.

document.addEventListener('wpcf7submit', function(event) {
    // Срабатывает независимо от результата
    console.log('Form submitted:', event.detail);
});

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

Советы

Эти события работают и с jQuery — просто используйте $(document).on('wpcf7mailsent',...)
Доступ к данным формы через event.detail.inputs
Тестируйте события с помощью инструментов разработчика в браузере
Письмо отправлено, но так и не пришло? Обычно дело в SPF, DKIM и DMARC, а не в CF7. Конструктор SPF и DMARC покажет, что на самом деле написано в ваших записях
События срабатывают по порядку: валидация → проверка на спам → отправка письма, а wpcf7submit всегда срабатывает последним, чем бы всё ни закончилось.

Комментариев здесь нет. Если что-то выше неправильно или вы застряли, мой email есть на странице контактов. Добраться до него — отдельная маленькая головоломка.