События DOM Contact Form 7

Опубликовано автором

Для настройки целей в различных сервисах полезно знать как «отловить» действия пользователя при отправке электронных писем через Contact Form 7

Список пользовательских событий DOM Contact Form 7

  • wpcf7invalid — Срабатывает, когда отправка формы Ajax завершилась успешно, но письмо не было отправлено, потому что есть поля с недопустимым вводом.
  • wpcf7spam — Срабатывает, когда отправка формы Ajax завершилась успешно, но почта не была отправлена, поскольку была обнаружена возможная активность спама.
  • wpcf7mailsent — Срабатывает, когда отправка формы Ajax успешно завершена и письмо отправлено.
  • wpcf7mailfailed — Срабатывает, когда отправка формы Ajax завершилась успешно, но не удалось отправить почту.
  • wpcf7submit — Срабатывает, когда отправка формы Ajax завершилась успешно, независимо от других инцидентов.

Обработчик событий кодирования

Приведенный ниже код представляет собой простой пример регистрации обработчика событий. В этом примере функция прослушивает wpcf7submitсобытие и просто выдает предупреждение, когда событие происходит.

1
2
3
4
5
var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
  alert( "Fire!" );
}, false );

Как вы видите в примере, вы используете addEventListener()для регистрации функцию обработчика событий. Имейте в виду, что целью события ( wpcf7Elmв примере) является не formэлемент, а его родительский divэлемент, имеющий wpcf7класс.

Поскольку все wpcf7*события всплывают через дерево DOM к корню документа, если вам не нужно устанавливать конкретную цель события, вы можете упростить ее, установив documentсвойство в качестве цели события:

1
2
3
document.addEventListener( 'wpcf7submit', function( event ) {
  alert( "Fire!" );
}, false );

Данные, вводимые пользователем через целевую контактную форму, передаются обработчику события как detail.inputsсвойство объекта события. Структура данных detail.inputsявляется массивом объектов, и каждый объект имеет nameи valueсвойство.

Это пример доступа к введенному пользователем значению через поле «ваше имя»:

1
2
3
4
5
6
7
8
9
10
document.addEventListener( 'wpcf7submit', function( event ) {
  var inputs = event.detail.inputs;
  for ( var i = 0; i < inputs.length; i++ ) {
    if ( 'your-name' == inputs[i].name ) {
      alert( inputs[i].value );
      break;
    }
  }
}, false );

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

ИМУЩЕСТВО ОПИСАНИЕ
detail.contactFormId ID контактной формы.
detail.pluginVersion Версия плагина Contact Form 7.
detail.contactFormLocale Код языка контактной формы.
detail.unitTag Единичный тег контактной формы.
detail.containerPostId Идентификатор сообщения, в котором размещена контактная форма.

Например, если вы хотите сделать что-то только с определенной контактной формой (ID = 123), используйте detail.contactFormIdсвойство, как показано ниже:

1
2
3
4
5
6
document.addEventListener( 'wpcf7submit', function( event ) {
  if ( '123' == event.detail.contactFormId ) {
    alert( "The contact form ID is 123." );
    // do something productive
  }
}, false );

источник

Просмотры: 673