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.