Если форма расположена просто на странице, тогда там все понятно – там появляются сообщения об ошибках и сообщение после успешной отправки сообщения сразу под формой.
Рассмотрим, какие могут быть интересные варианты событий после отправки формы 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');"
[vc_message color=”alert-success”]UPD 11.10.2017[/vc_message]
[vc_message color=”alert-info”]Метод, использующий on_sent_ok hook, больше не рекомендуется. Эта функция будет отменена к концу 2017 года.[/vc_message]
Теперь для редиректа на другую страницу после успешной отправки формы нужно использовать событие 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
[vc_message color=”alert-success”]UPD 03.08.2018[/vc_message]
Создаем событие для конкретной формы после успешной отправки сообщения (используем обычный 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
и для разных форм использовать разные события после успешной отправки сообщения.
Комментарии (40) к “Действия после успешной отправки формы 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 =
Вроде работает… посмотрим