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

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

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

Код добавляем в блок Дополнительные настройки вашей формы.

После успешной отправки сообщения

Выводим алерт ‘Спасибо за Вашу заявку!’ — примитивно и некрасиво.

on_sent_ok: "alert('Спасибо за Вашу заявку!');"

Делаем редирект на страницу благодарности

on_sent_ok: "location='http://site.tu/thankyou/';"

Просто закрываем поп-ап — не самый лучший вариант, пользователь может не понять, все ли прошло успешно

on_sent_ok: $.fancybox.close();

 

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

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

Этот код добавляем в блок Дополнительные настройки вашей формы CF7:

on_sent_ok: "$.fancybox ( { href: '#popup_msg' } );"

Само окно имеет такой вид:

<div class="fancybox-hidden" style="display: none;">
  <div id="popup_msg">
    <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();
});

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

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

on_sent_ok: "location = 'http://site.ua/wp-content/uploads/2016/08/catalog.pdf';"

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

on_sent_ok: "window.open('http://site.ua/wp-content/uploads/2016/08/catalog.pdf', '_blank');"

UPD 11.10.2017

Метод, использующий on_sent_ok hook, больше не рекомендуется. Эта функция будет отменена к концу 2017 года.

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

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

Например, такой вариант для открытия модального окна с id="sentMessage":

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

Если у вас несколько форм, тогда для каждого 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

UPD 03.08.2018

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

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

Данный скрипт выведет на экран окно id='popup_msg' после успешной отправки одной из форм (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_msg'});
  }
}, false );

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

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

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

<div class="fancybox-hidden" style="display: none;">
  <div id="popup_msg">
    <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 и для разных форм использовать разные события после успешной отправки сообщения.