Действия после успешной отправки формы 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”

  • Ирина

    при этом само окно находится в блоке с 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. Оказалось, надо ещё в одну функцию завернуть.

  • 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

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

      Ответить
      • Юрий

        Да, спасибо, Денис. Исправил (скрипт прописал в футере). Картинку я так просто поместил. Будет ПДФ-файл.

        Ответить
      • Юрий

        Денис, добрый день
        Что-то не хочет в другой вкладке открываться.
        Пишу

        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 );
        
        Ответить
  • Юрий

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

    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

      По моему, файлы 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 (если это форма подписки):

      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;
      }
      
      Ответить
  • Антон

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

    Ответить

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