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

06.07.2016

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

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

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

Так же рассмотрим, какие могут быть интересные варианты событий после отправки формы 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 );

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

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

Например, если вы хотите сделать что-то только с определенной контактной формой (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>

Рекомендую к прочтению:

Комментарии (43) к “Действия после успешной отправки формы CF7”

Ирина
31.01.2017
при этом само окно находится в блоке с id="popup_msg"
Подскажите, а где должен быть сам блок?
Ответить
- Denis Creative
  05.02.2017
  Обновил немного статью – вот ссылка
  Ответить
Дмитрий
25.02.2017
Добрый день ! Подскажите как засунуть свой “див” в “алерт” ?
Есть кнопка с красивой всплывающей формой на странице я её скрываю “дисплей ноне” и хотелось бы что бы эта же форма всплывала после отправки формы нажатием кнопки отправки в сонтакт форм 7
Кнопка которая вызывает окно имеет атрибут "data-ultimate-target="#modal-trg-txt-wrap-6292"
Можно ли как то это совместить с on_sent_ok: ? Или это нужно знать переменную плагина которая выводит это окно ?
Использую “Modal” из визуала композера, отличная вещь только нуждается каждый раз в доработке :(
Ответить
Сергей
11.10.2017
on_sent_ok: "location='http://site.tu/thankyou/';" уже не актуально,
https://contactform7.com/redirecting-to-another-url-after-submissions/
просьба обновить статью)
Ответить
- Denis Creative
  11.10.2017
  Действительно, статью перепишу.
  Теперь нужно использовать скрипт:
```
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'http://example.com/';
}, false );
</script>
```
  Метод, использующий on_sent_ok hook, больше не рекомендуется. Эта функция будет отменена к концу 2017 года.
  Ответить
  - vadim
    02.12.2017
    куда вставить этот скрипт чтобы после заполнения формы отправлялся файл?
    Ответить
    
    Denis Creative
    06.12.2017
    Или в основной скрипт, который использует шаблон, или в футер.
    Ответить
Вячеслав
30.11.2017
Здравствуйте! Подскажите пожалуйста, а как вставить окно из плагина Easy Modal? Вроде все варианты перепробовал, не выходит.
Ответить
Владимир
12.04.2018
Здравствуйте.
Подскажите пожалуйста, как для данного скрипта:
```
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'http://example.com/';
}, false );
```
Сделать исключение…. Если на странице используются не сколько форм и для одной из них не требуется перенаправление.
Подскажите как это реализовать ?
Ответить
михаил
12.04.2018
здравствуйте! Отличная статья! подскажите а как сделать так, чтобы после успешной отправки. сначало открывалось благодарственное попап-окно..а через 5 секунд, включалось перенаправление на главную страницу
Ответить
Назар
06.06.2018
Больше не актуально т.к. on_sent_ok убрали из contact form 7
Ответить
- Denis Creative
  08.06.2018
  во второй половине статьи есть эта информация
  Ответить
Дмитрий
15.06.2018
Добрый день! Подскажите пожалуйста как реализовать скачивание фаила пользователем, после заполнения всех полей формы и нажатием кнопки “Скачать”.
Ответить
- Дмитрий
  18.06.2018
  Использую следующий скрипт для одной из форм:
```
document.addEventListener( 'wpcf7mailsent', function( event ) {
  var id = event.detail.contactFormId;
  if ( id == 2202 ) {

  }
	location = 'https://скачиваемый фаил';
}, false );
```
  ID формы прописано, файл скачивается. Но данный скрипт работает для всех форм на сайте а нужно только для определенной по ID!
  Подскажите пожалуйста, как исправить?
  Ответить
  - Denis Creative
    03.08.2018
    Надеюсь, вы уже решили эту проблему.
    Если нет, то ответ в том, что location нужно было поместить внутрь условия if() { ... }
    document.addEventListener( 'wpcf7mailsent', function( event ) { var id = event.detail.contactFormId; if ( id == 2202 ) { location = 'https://скачиваемый фаил'; } }, false );
    Ответить
Андрей
03.08.2018
on_sent_ok пишет – устаревший вид ввода, пишите на джава скрипте, что только не пробовал написать не появляется всплывающее окно после отправки
Ответить
- Denis Creative
  03.08.2018
  Во второй половине статьи есть эта информация, и в комментариях выше.
  Ответить
- Denis Creative
  03.08.2018
  Обновил статью, найдёте решение внизу статьи.
  Ответить
Mihail
06.11.2018
Как сделать, чтобы перенаправление после отправки письма происходило с задержкой?
Ответить
- Denis Creative
  07.11.2018
  Использовать setTimeout
  Ответить
  - Бобсон
    13.02.2019
    А как? подскажите, что прописать в setTimeout и где его ставить?
    Ответить
    
    Denis Creative
    13.02.2019
    Попробуйте так:
    jQuery(document).ready(function($) { document.addEventListener( 'wpcf7mailsent', function( event ) { var id = event.detail.contactFormId; if ( id == 34560 ) { // после успешной отправки формы с id=34560 через 3 секунды происходит редирект setTimeout(function() { window.open('http://test.ru/wp-content/uploads/2018/11/logo-retina.png', '_blank'); }, 3000); } }, false ); });
    только поменяйте 34560 на id своей формы.
    Ответить

Юрий

25.11.2018

Здравствуйте, подскажите что дописать чтобы скачивание файла или страничка открывались в отдельной вкладке

document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'http://test.ru/wp-content/uploads/2018/11/logo-retina.png'; 
}, false );

Ответить

Denis Creative

28.11.2018

Попробуйте так:

document.addEventListener( 'wpcf7mailsent', function( event ) {
   window.open('http://test.ru/wp-content/uploads/2018/11/logo-retina.png', '_blank');
}, false );

Ответить

Владимир
13.02.2019
Никак не могу разобраться. Форма работает, но вот сделать закрывающееся окно никак не получается. Вставлял код в functions.php – ругается на ошибки, сайт висит. Ставлю код в main.js – тишина, вообще ничего не происходит.
мой код закрывающегося окна после отправки сообщения:
```
jQuery(document).ready(function($) {
  document.addEventListener( 'wpcf7mailsent', function( event ) {
    var id = event.detail.contactFormId;
    if ( id == 34560 ) {
      $('.popup-close-btn').on('click', function() {
        $.fancybox.close();
      });
    }
  }, false );
});
```
Что не так то?
Простая строчка в настройках CF7 on_sent_ok: $.fancybox.close(); теперь превратилась в адский геморой. Помогите решить вопрос.
Ответить
- Denis Creative
  13.02.2019
  Ничего не понятно из вашего сообщения.
  Что за закрывающееся окно? Окно с сообщением об успешной отправке сообщения?
  У вас внутри условия if ( id == 34560 ) { ... } стоит код для того, чтобы при клике на кнопку .popup-close-btn всплывающее окно закрылось, но никак не код для вызова того самого окна.
  Попробуйте такой код – он должен открывать окно с благодарностью после отправки сообщения (этот код нужно добавить в main.js):
```
jQuery(document).ready(function($) {
  document.addEventListener( 'wpcf7mailsent', function( event ) {
    var id = event.detail.contactFormId;
    if ( id == 34560 ) {
      $.fancybox({href: '#popup_msg'});
    }
  }, false );
});
```
  При этом код самого окна должен быть примерно таким (обязательно id="popup_msg") – этот код нужно добавить в свой html, footer.php или, если через админку, то в какой-то виджет в футере:
```
<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>
```
  Ответить
  - Владимир
    13.02.2019
    Спасибо за ответ. С кодом разобрался. Взял пример из вашей другой статьи на эту тему. Мне нужно было чтоб окно с формой закрывалось после успешной отправки, взял этот пример:
    add_action( 'wp_footer', 'mycustom_wp_footer' ); function mycustom_wp_footer() { ?> (function($) { document.addEventListener( 'wpcf7mailsent', function( event ) { $.fancybox.close(); }, false ); })( jQuery ); <?php }
    разместил его в functions.php всё работает, но окно закрывается очень быстро, не видно сообщения об успешной отправке. Хочу сделать чтоб оно закрывалось через 4 секунды, пытаюсь вставить setTimeout 4000 но не пойму куда. Да я не программист, мне код сложно осваивать, пытаюсь разобраться.
    Ответить
    
    Denis Creative
    13.02.2019
    document.addEventListener( 'wpcf7mailsent', function( event ) { setTimeout(function() { $.fancybox.close(); }, 3000); }, false );
    Ответить
    
    Владимир
    13.02.2019
    Спасибо огромное! Куда я только её не пихал, эту setTimeout. Оказалось, надо ещё в одну функцию завернуть.
KoolPal
22.03.2020
Hi,
I am using this within the CF7 form. My form shortcode is [contact-form-7 id="8" title="Contact Form Flat"]
document.addEventListener( 'wpcf7mailsent', function( event ) { var id = event.detail.contactFormId; if ( id == 8 ) { $.magnificPopup.open({ items: { src: '#popup_msg' }, type: 'inline' }, 0); } }, false );
However, this form is not closing after submission. Please guide me.
Thanks
Ответить
Юрий
27.05.2020
Здравствуйте, Денис. Пытаюсь сделать ссылку на скачивание файла после заполнения всех полей и нажатия на кнопку скачать.
Форма находится на отдельной странице.https://kitkraken.by/kupon-sea/
В дополнительные настройки прописываю:
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
location = ‘https://kitkraken.by/wp-content/themes/plattform/inc/img/big.jpg’;
}, false );
Ничего не происходит. Письмо отправляется, но ссылка на скачивание (или автоматическое скачивание) не показывается.
Подскажите в чем ошибка? Спасибо
Ответить
- Denis Creative
  28.05.2020
  Возможно, вы исправили, но меня редиректнуло на картинку и лучше бы эта картинка открывалась в новой вкладке.
  Ответить
  - Юрий
    28.05.2020
    Да, спасибо, Денис. Исправил (скрипт прописал в футере). Картинку я так просто поместил. Будет ПДФ-файл.
    Ответить
  - Юрий
    01.06.2020
    Денис, добрый день
    Что-то не хочет в другой вкладке открываться.
    Пишу
    document.addEventListener( 'wpcf7mailsent', function( event ) { var id = event.detail.contactFormId; if ( id == 3191 ) { location = 'https://www.getalit.by/wp-content/themes/plattform/inc/img/actions_tam/kupony/Kupon_2.pdf','_blank'; } }, false );
    Ответить
    
    Denis Creative
    01.06.2020
    Попробуйте так
    window.open('https://...', '_blank');
    https://... – там впишите нужный урл
    Ответить
    
    Юрий
    01.06.2020
    Да, отлично. Спасибо, Денис.
    
    Denis Creative
    01.06.2020
    Успехов!
Юрий
10.06.2020
Денис, опять к Вам. Новая задача возникла. Вместо открытия файла, должно быть сразу скачивание без открытия.
Прописал
```
document.addEventListener( 'wpcf7mailsent', function( event ) {
  var id = event.detail.contactFormId;
  if ( id == 3229 ) {
    download('https://www.getalit.by/wp-content/themes/plattform/inc/img/actions_tam/kupony/Kupon_10.pdf');
  }
}, false );
```
Ничего не происходит
Ответить
- Denis Creative
  10.06.2020
  По моему, файлы pdf не скачиваются, попробуйте использовать предыдущий код, но не pdf, а архив.
  Ответить
  - Юрий
    10.06.2020
    Вообще, странные вещи происходят. Хром начал блокировать всплывающие окна. ПДФ файл перестал даже открываться. При window.open архив тоже не помог. Заменил на location =
    Вроде работает… посмотрим
    Ответить
Игорь
27.01.2021
Добрый день! Прочитал статью, перепробовал различные варианты и ничего не получается. Вкратце о реализации контактной формы:
– сайт на wordpress
-контактная форма CF7, вызывается popup окном, которое создано плагином JetPopup
-на сайте установлен Google Tag Manager, через который есть возможность прослушивать успешную отправку формы.
Что не получается? Т.к. я уже упомянул ранее что контактная форма появляется в popup окне при клике на кнопку на сайте, то при успешной ее отправке хотелось бы чтобы popup окно с формой закрывалось и появлялось новое (уже подготовленное в плагине Jet Popup) popup окно с благодарностью.
Заранее спасибо!
Сайт: https://saa-finance.weboptimus.eu/
Ответить
- Denis Creative
  27.01.2021
  Добрый день, я не работал с плагином JetPopup.
  Для плагина Easy FancyBox вот пример простого кода, чтобы после отправки формы, появлялся попап с сообщением “Успешно отправлено” (#popup-success) или “Подписка оформлена” (#popup-success-subscribe), если id формы 210 (если это форма подписки):
```
document.addEventListener( 'wpcf7mailsent', function( event ) {
  var id = event.detail.contactFormId;

  if ( id == 210 ) {
    $.fancybox({href: '#popup-success-subscribe'});
  } else {
    $.fancybox({href: '#popup-success'});
  }
}, false );
```
  Принцип тот же, просто вызов попапа может быть другой.
  По необходимости нужно скрыть уведомление об ошибках под формой, чтобы уведомление не отображалось при повторном вызове попапа с формой:
```
 .wpcf7-response-output {
    display: none !important;
}
```
  Или скрыть только уведомление об успешной отправке
```
.sent .wpcf7-response-output {
    display: none !important;
}
```
  Ответить
Антон
25.03.2021
Добрый день! Подскажите, пожалуйста, вариант вашего кода, чтобы был редирект в новое окно после отправки формы при условии, что был выбран нужный чек-бокс (если пользователь отметил при вводе формы “хочу забронировать”, после отправки формы его перекидывает на бронирование).
Ответить

Оставить комментарий

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

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

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

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

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

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

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

Комментарии (43) к “Действия после успешной отправки формы CF7”

Ирина

Дмитрий

Сергей

vadim

Вячеслав

Владимир

михаил

Назар

Дмитрий

Дмитрий

Андрей

Mihail

Бобсон

Юрий

Владимир

Владимир

Владимир

KoolPal

Юрий

Юрий

Юрий

Юрий

Юрий

Юрий

Игорь

Антон