Contact Form 7 — события отправки сообщений вместо «on_sent_ok» и «on_submit»

Друзья, Вы возможно, заметили, что популярный плагин Contact Form 7 постоянно меняется и совершенствуется.

В этот раз он заменил события on_sent_ok и on_submit. Начиная с версии плагина 4.9 данные события перестали работать. Но не стоит переживать — на смену этим событиям пришли новые, которые мы сегодня и рассмотрим. Итак, встречайте совершенно новые события: wpcf7submit и wpcf7mailsent и иные!

wpcf7submit

Событие wpcf7submit возникает после отправки формы, не зависимо от результата. Это новый аналог события «on_submit», который сработает в любом случаи, когда нажали на кнопку отправить форму. Учтите этот важный момент. То есть, независимо от того, что случилось с Вашей формой, отправилась она или нет, сам факт инициализации отправки формы — есть данное событие. Даже если пользователь не заполнил все поля или получил ошибку это событие будет срабатывать. Пример использования:

document.addEventListener( 'wpcf7submit', function( event ) {
 if(event.detail.contactFormId=="32"){ // 32 это id формы для отслеживания
 alert("Попытались отравить форму номер 32");
 }
}, false );

wpcf7mailsent

Новый аналог «on_sent_ok», срабатывает только когда пользователь получит сообщение о том что его сообщение «успешно отправлено». Очень удобное событие. Здесь мы можем настроить так, что будем переадресовывать человека на какую-либо страницу или, допустим, менять фон или шрифт. В общем огромный спектр действий мы можем делать с Вами, дорогие мои друзья!

document.addEventListener( 'wpcf7mailsent', function( event ) {
 if(event.detail.contactFormId=="32"){ // 32 это id формы для отслеживания
 alert("Формы №32 была отправлена успешно");
 }
}, false );

wpcf7invalid

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

document.addEventListener( 'wpcf7invalid', function( event ) {
 if(event.detail.contactFormId=="1322"){ // 1322 это id формы для отслеживания
 alert("Формы №1322 не была отправлена, заполнены не все поля");
 }
}, false );

Также есть еще дополнительные события: wpcf7spam: — срабатывает, когда есть подозрение что это спам и отправка формы не идет. wpcf7mailfailed: — новое событие, которое срабатывает когда сервер не может отправить письмо. (Очень удобно, для тех кто дорожит каждым заказом и хочет в метрике или аналитике отследить всех пользователей что не смогли отправить сообщение из сайта)

Как использовать события?

Чтобы использовать события, необходимо использовать вышеназванный код в своей теме. Для удобства Вы можете внедрять этот код в уже существующие кастомные (свои) личные файлы .js, но можете также использовать в конце Ваших файлов темы.

Вот и все события. Уверен, их будет достаточно, чтобы Вы выполнили львиную долю Ваших задач. Успехов Вам в познавании такого замечательного плагина для WordPress, как Contact Form 7.