JavaScript события, срабатывающие при отправке формы

При отправке формы плагином Contact Form 7 происходит ряд JavaScript событий, которые можно отловить и использовать в своих целях.

Список событий DOM плагина Contact Form 7:

• wpcf7submit - срабатывает каждый раз, когда нажимают на кнопку "Отправить" (вне зависимости от других событий)
• wpcf7invalid - срабатывает, когда на форме есть поля с неверно заполненными значениями (например, не заполнены все обязательные поля);
• wpcf7mailsent - срабатывает, если письмо успешно отправлено;
• wpcf7mailfailed - срабатывает, если письмо отправить не удалось по каким-то техническим причинам;
• wpcf7spam - срабатывает, если письмо не было отправлено, потому что есть подозрение, что это спам.

Чтобы отловить эти события надо разместить код приведенный ниже в файле скриптов используемого шаблона WordPress. Как подключать скрипты в WordPress читаем здесь.

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

	if( '555' == event.detail.contactFormId ) {

		var inputs = event.detail.inputs;

		// здесь что-то делаем

	}

}, false );

В этом коде мы отлавливаем событие wpcf7mailsent (строка 1) и затем проверяем, что оно было сформировано нужной нам формой.  Соответственно в строке 2 вместо 555 надо подставить ID нужной формы. Дальше в строке 3 читаем в переменную inputs массив данных введенных в поля формы. 

Вместо события wpcf7mailsent можно подставить любое событие из перечисленных выше.

До 5-ой версии плагина использовались параметры on_submit и on_sent_ok, которые размещались на вкладке "Дополнительные настройки" шаблона формы. Теперь надо использовать систему событий как показано в этой статье. Эти параметры хоть и работают, но плагин пишет предупреждения в журнале ошибок WordPress что они устарели. Так что в какой-то момент их могут убрать вовсе.