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

Wordpress
06.07.2016
Hosting CityHost

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

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

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

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

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

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 и для разных форм использовать разные события после успешной отправки сообщения.

TemplateMonster - лучшая коллекция шаблонов для CMS WordPress

Полезная инфа:

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

  • Ирина

    при этом само окно находится в блоке с id="popup_msg"
    Подскажите, а где должен быть сам блок?

    Ответить

  • Дмитрий

    Добрый день ! Подскажите как засунуть свой “див” в “алерт” ?

    Есть кнопка с красивой всплывающей формой на странице я её скрываю “дисплей ноне” и хотелось бы что бы эта же форма всплывала после отправки формы нажатием кнопки отправки в сонтакт форм 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

      Действительно, статью перепишу.
      Теперь нужно использовать скрипт:

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

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

      Ответить

  • Вячеслав

    Здравствуйте! Подскажите пожалуйста, а как вставить окно из плагина Easy Modal? Вроде все варианты перепробовал, не выходит.

    Ответить

  • Владимир

    Здравствуйте.
    Подскажите пожалуйста, как для данного скрипта:

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

    Сделать исключение…. Если на странице используются не сколько форм и для одной из них не требуется перенаправление.
    Подскажите как это реализовать ?

    Ответить

  • михаил

    здравствуйте! Отличная статья! подскажите а как сделать так, чтобы после успешной отправки. сначало открывалось благодарственное попап-окно..а через 5 секунд, включалось перенаправление на главную страницу

    Ответить

  • Назар

    Больше не актуально т.к. on_sent_ok убрали из contact form 7

    Ответить

  • Дмитрий

    Добрый день! Подскажите пожалуйста как реализовать скачивание фаила пользователем, после заполнения всех полей формы и нажатием кнопки “Скачать”.

    Ответить

    • Дмитрий

      Использую следующий скрипт для одной из форм:

      document.addEventListener( 'wpcf7mailsent', function( event ) {
  var id = event.detail.contactFormId;
  if ( id == 2202 ) {

  }
	location = 'https://скачиваемый фаил';
}, false );

      ID формы прописано, файл скачивается. Но данный скрипт работает для всех форм на сайте а нужно только для определенной по ID!
      Подскажите пожалуйста, как исправить?

      Ответить

      • Denis Creative

        Надеюсь, вы уже решили эту проблему.
        Если нет, то ответ в том, что location нужно было поместить внутрь условия if() { ... }

        document.addEventListener( 'wpcf7mailsent', function( event ) {
  var id = event.detail.contactFormId;
  if ( id == 2202 ) {
    location = 'https://скачиваемый фаил';
  }
}, false );
        Ответить

  • Андрей

    on_sent_ok пишет – устаревший вид ввода, пишите на джава скрипте, что только не пробовал написать не появляется всплывающее окно после отправки

    Ответить

  • Mihail

    Как сделать, чтобы перенаправление после отправки письма происходило с задержкой?

    Ответить

    • Denis Creative

      Использовать setTimeout

      Ответить

      • Бобсон

        А как? подскажите, что прописать в setTimeout и где его ставить?

        Ответить

        • Denis Creative

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

          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 своей формы.

          Ответить

  • Юрий

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

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

    • Denis Creative

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

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

  • Владимир

    Никак не могу разобраться. Форма работает, но вот сделать закрывающееся окно никак не получается. Вставлял код в 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

      Ничего не понятно из вашего сообщения.
      Что за закрывающееся окно? Окно с сообщением об успешной отправке сообщения?
      У вас внутри условия 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>
      Ответить

      • Владимир

        Спасибо за ответ. С кодом разобрался. Взял пример из вашей другой статьи на эту тему. Мне нужно было чтоб окно с формой закрывалось после успешной отправки, взял этот пример:

        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

          document.addEventListener( 'wpcf7mailsent', function( event ) {
  setTimeout(function() {
    $.fancybox.close();
  }, 3000);
}, false );
          Ответить

          • Владимир

            Спасибо огромное! Куда я только её не пихал, эту setTimeout. Оказалось, надо ещё в одну функцию завернуть.

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