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”
Ирина
при этом само окно находится в блоке с id="popup_msg"
Подскажите, а где должен быть сам блок?
Denis Creative
Обновил немного статью – вот ссылка
Дмитрий
Добрый день ! Подскажите как засунуть свой “див” в “алерт” ?
Есть кнопка с красивой всплывающей формой на странице я её скрываю “дисплей ноне” и хотелось бы что бы эта же форма всплывала после отправки формы нажатием кнопки отправки в сонтакт форм 7
Кнопка которая вызывает окно имеет атрибут
"data-ultimate-target="#modal-trg-txt-wrap-6292"
Можно ли как то это совместить с on_sent_ok: ? Или это нужно знать переменную плагина которая выводит это окно ?
Использую “Modal” из визуала композера, отличная вещь только нуждается каждый раз в доработке :(
Сергей
on_sent_ok: "location='http://site.tu/thankyou/';"
уже не актуально,https://contactform7.com/redirecting-to-another-url-after-submissions/
просьба обновить статью)
Denis Creative
Действительно, статью перепишу.
Теперь нужно использовать скрипт:
Метод, использующий
on_sent_ok hook
, больше не рекомендуется. Эта функция будет отменена к концу 2017 года.vadim
куда вставить этот скрипт чтобы после заполнения формы отправлялся файл?
Denis Creative
Или в основной скрипт, который использует шаблон, или в футер.
Вячеслав
Здравствуйте! Подскажите пожалуйста, а как вставить окно из плагина Easy Modal? Вроде все варианты перепробовал, не выходит.
Владимир
Здравствуйте.
Подскажите пожалуйста, как для данного скрипта:
Сделать исключение…. Если на странице используются не сколько форм и для одной из них не требуется перенаправление.
Подскажите как это реализовать ?
михаил
здравствуйте! Отличная статья! подскажите а как сделать так, чтобы после успешной отправки. сначало открывалось благодарственное попап-окно..а через 5 секунд, включалось перенаправление на главную страницу
Назар
Больше не актуально т.к. on_sent_ok убрали из contact form 7
Denis Creative
во второй половине статьи есть эта информация
Дмитрий
Добрый день! Подскажите пожалуйста как реализовать скачивание фаила пользователем, после заполнения всех полей формы и нажатием кнопки “Скачать”.
Дмитрий
Использую следующий скрипт для одной из форм:
ID формы прописано, файл скачивается. Но данный скрипт работает для всех форм на сайте а нужно только для определенной по ID!
Подскажите пожалуйста, как исправить?
Denis Creative
Надеюсь, вы уже решили эту проблему.
Если нет, то ответ в том, что
location
нужно было поместить внутрь условияif() { ... }
Андрей
on_sent_ok пишет – устаревший вид ввода, пишите на джава скрипте, что только не пробовал написать не появляется всплывающее окно после отправки
Denis Creative
Во второй половине статьи есть эта информация, и в комментариях выше.
Denis Creative
Обновил статью, найдёте решение внизу статьи.
Mihail
Как сделать, чтобы перенаправление после отправки письма происходило с задержкой?
Denis Creative
Использовать setTimeout
Бобсон
А как? подскажите, что прописать в
setTimeout
и где его ставить?Denis Creative
Попробуйте так:
только поменяйте 34560 на id своей формы.
Юрий
Здравствуйте, подскажите что дописать чтобы скачивание файла или страничка открывались в отдельной вкладке
Denis Creative
Попробуйте так:
Владимир
Никак не могу разобраться. Форма работает, но вот сделать закрывающееся окно никак не получается. Вставлял код в functions.php – ругается на ошибки, сайт висит. Ставлю код в main.js – тишина, вообще ничего не происходит.
мой код закрывающегося окна после отправки сообщения:
Что не так то?
Простая строчка в настройках CF7
on_sent_ok: $.fancybox.close();
теперь превратилась в адский геморой. Помогите решить вопрос.Denis Creative
Ничего не понятно из вашего сообщения.
Что за закрывающееся окно? Окно с сообщением об успешной отправке сообщения?
У вас внутри условия
if ( id == 34560 ) { ... }
стоит код для того, чтобы при клике на кнопку.popup-close-btn
всплывающее окно закрылось, но никак не код для вызова того самого окна.Попробуйте такой код – он должен открывать окно с благодарностью после отправки сообщения (этот код нужно добавить в main.js):
При этом код самого окна должен быть примерно таким (обязательно
id="popup_msg"
) – этот код нужно добавить в свой html, footer.php или, если через админку, то в какой-то виджет в футере:Владимир
Спасибо за ответ. С кодом разобрался. Взял пример из вашей другой статьи на эту тему. Мне нужно было чтоб окно с формой закрывалось после успешной отправки, взял этот пример:
разместил его в
functions.php
всё работает, но окно закрывается очень быстро, не видно сообщения об успешной отправке. Хочу сделать чтоб оно закрывалось через 4 секунды, пытаюсь вставить setTimeout 4000 но не пойму куда. Да я не программист, мне код сложно осваивать, пытаюсь разобраться.Denis Creative
Владимир
Спасибо огромное! Куда я только её не пихал, эту setTimeout. Оказалось, надо ещё в одну функцию завернуть.
KoolPal
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
Юрий
Здравствуйте, Денис. Пытаюсь сделать ссылку на скачивание файла после заполнения всех полей и нажатия на кнопку скачать.
Форма находится на отдельной странице.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
Возможно, вы исправили, но меня редиректнуло на картинку и лучше бы эта картинка открывалась в новой вкладке.
Юрий
Да, спасибо, Денис. Исправил (скрипт прописал в футере). Картинку я так просто поместил. Будет ПДФ-файл.
Юрий
Денис, добрый день
Что-то не хочет в другой вкладке открываться.
Пишу
Denis Creative
Попробуйте так
https://...
– там впишите нужный урлЮрий
Да, отлично. Спасибо, Денис.
Denis Creative
Успехов!
Юрий
Денис, опять к Вам. Новая задача возникла. Вместо открытия файла, должно быть сразу скачивание без открытия.
Прописал
Ничего не происходит
Denis Creative
По моему, файлы pdf не скачиваются, попробуйте использовать предыдущий код, но не pdf, а архив.
Юрий
Вообще, странные вещи происходят. Хром начал блокировать всплывающие окна. ПДФ файл перестал даже открываться. При window.open архив тоже не помог. Заменил на location =
Вроде работает… посмотрим
Игорь
Добрый день! Прочитал статью, перепробовал различные варианты и ничего не получается. Вкратце о реализации контактной формы:
– сайт на wordpress
-контактная форма CF7, вызывается popup окном, которое создано плагином JetPopup
-на сайте установлен Google Tag Manager, через который есть возможность прослушивать успешную отправку формы.
Что не получается? Т.к. я уже упомянул ранее что контактная форма появляется в popup окне при клике на кнопку на сайте, то при успешной ее отправке хотелось бы чтобы popup окно с формой закрывалось и появлялось новое (уже подготовленное в плагине Jet Popup) popup окно с благодарностью.
Заранее спасибо!
Сайт: https://saa-finance.weboptimus.eu/
Denis Creative
Добрый день, я не работал с плагином JetPopup.
Для плагина Easy FancyBox вот пример простого кода, чтобы после отправки формы, появлялся попап с сообщением “Успешно отправлено” (#popup-success) или “Подписка оформлена” (#popup-success-subscribe), если id формы 210 (если это форма подписки):
Принцип тот же, просто вызов попапа может быть другой.
По необходимости нужно скрыть уведомление об ошибках под формой, чтобы уведомление не отображалось при повторном вызове попапа с формой:
Или скрыть только уведомление об успешной отправке
Антон
Добрый день! Подскажите, пожалуйста, вариант вашего кода, чтобы был редирект в новое окно после отправки формы при условии, что был выбран нужный чек-бокс (если пользователь отметил при вводе формы “хочу забронировать”, после отправки формы его перекидывает на бронирование).