Действия после успешной отправки формы CF7

Если форма расположена просто на странице, тогда там все понятно — там появляются сообщения об ошибках и сообщение после успешной отправки сообщения сразу под формой.

Рассмотрим, как можно изменить уведомления об отправке формы, или какие события можно добавить после отправки формы (редирект, сообщение об успешной доставке, скачивание файла).

Так же рассмотрим, какие могут быть интересные варианты событий после отправки формы CF7 в pop-up окне, то есть во всплывающем окне. Как сделать такую форму, я описывал в статье Как сделать форму обратной связи во всплывающем окне для WordPress.

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

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

Обработчик событий wpcf7submit

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

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

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

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

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

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

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

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 );

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

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

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

Выводим поп-ап окно «Спасибо за заказ» после успешной отправки сообщения

Например, такой скрипт для открытия модального окна с id="popup-success" после успешной отправки формы:

document.addEventListener( 'wpcf7mailsent', function( event ) {
  $('#popup-success').modal();
}, false );

Выводим поп-ап окно «Спасибо за заказ», при этом само окно находится в блоке с id="popup-success", внешний вид и стили нужно будет оформлять под свой дизайн, чтобы все было красиво + сделать кнопку ‘Закрыть’ окно благодарности.

<div class="fancybox-hidden" style="display: none;">
  <div id="popup-success" class="popup">
    <div class="popup-box">
      <div class="popup-title">Спасибо!</div> 
      <div class="popup-subtitle">Наш менеджер свяжется с вами в ближайшее время.</div>
      <span class="popup-close-btn">Закрыть окно</span>
    </div>
  </div>
</div>

Этот код всплывающего окна можно разместить где угодно, хоть в футере, хоть под формой, основной плюс в том, что это окно могут вызывать любые другие формы и не нужно делать под каждую форму отдельные попапы.

Для кнопки «Закрыть окно» добавляем такой код в файл скриптов:

$('.popup-close-btn').on('click', function() {
  $.fancybox.close();
});

Если у вас несколько форм, тогда для каждого ID формы можно создавать свои события:

document.addEventListener( 'wpcf7mailsent', function( event ) {
  var id = event.detail.contactFormId;
  if ( id == 4 || id == 44 || id == 45 ) {
    $.magnificPopup.open({
      items: {
        src: '#popup_msg'
      },
      type: 'inline'
    }, 0);
  }
}, false );

id — это номер формы
$.magnificPopup.open — в данном примере используется Magnific Popup

Создаем событие для конкретной формы после успешной отправки сообщения (используем обычный Easy Fancybox)

У многих возникают сложности с данным моментом, поэтому решил его все же вынести в статью.

Данный скрипт выведет на экран окно id='popup-success' после успешной отправки одной из форм (id == 17754 или id == 17758 или id == 17757):

document.addEventListener( 'wpcf7mailsent', function( event ) {
  var id = event.detail.contactFormId;
  if ( id == 17754 || id == 17758 || id == 17757 ) {
    $.fancybox({href: '#popup-success'});
  }
}, false );

Простой разбор кода

id == 17754 || id == 17758 || id == 17757 — окно будет показываться только для этих форм (или-или).

Окно с сообщением об успешной отправке (можно добавить его в код, или лучше в виджет футера например, если шаблон не хочется изменять, или еще 100 вариантов):

<div class="fancybox-hidden" style="display: none;">
  <div id="popup-success" class="popup">
    <div class="popup-box">
      <div class="popup-title">Спасибо!</div> 
      <div class="popup-subtitle">Наш менеджер свяжется с вами в ближайшее время.</div>
      <span class="popup-close-btn">Закрыть окно</span>
    </div>
  </div>
</div>

Если скрипт вы добавляете не в файл скриптов, а в футер или редактор js-кода, тогда оберните его в данный код:

jQuery(document).ready(function($) {
// code ...
});

Дальше все ограничивается только лишь фантазией, можно добавить условные операторы else(), else if() или switch и для разных форм использовать разные события после успешной отправки сообщения.

Как сделать скачивание файла pdf после заполнения формы c помощью плагина Contact Form 7

Открываем pdf-файл сразу на этой же странице

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  location = 'http://site.ua/wp-content/uploads/2016/08/catalog.pdf';
}, false );
</script>

Открываем pdf на новой странице

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  window.open('http://site.ua/wp-content/uploads/2016/08/catalog.pdf', '_blank');
}, false );
</script>

Редирект на другую страницу после успешной отправки формы

Теперь для редиректа на другую страницу после успешной отправки формы нужно также использовать событие wpcf7mailsent. Пример точно такой же как и с открытием файла.

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  location = 'https://example.com/';
}, false );
</script>

Открыть новую страницу в новой вкладке после отправки формы:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  window.open('https://example.com/', '_blank');
}, false );
</script>