Контактная форма 7 AJAX обратный вызов

искал вокруг этого некоторое время и не могу придумать никакой документации, чтобы описать, чего я хочу достичь.

Я использую wordpress и плагин Contact Form 7, все работает отлично, то, что я хочу достичь, это запустить определенный javascript при отправке формы, я знаю, что мы можем использовать "on_sent_ok:" в дополнительных настройках, но это выполняется только в том случае, если форма действительно отправлена.

что я хотел бы сделать, это сделать какой-то другой javascript, когда форма не отправляет ok, что возвращает пользователя в раздел, который не был проверен.

Я могу использовать следующий код для запуска после того, как 1.7 s формы отправки нажата, однако это немного небрежно, как если бы пользователь работал с медленным соединением, есть потенциал, что это может работать, прежде чем форма будет отправлена должным образом.

 $('.wpcf7-submit').click(function() {
setTimeout(function() {
    if ($('.fs1 input,.fs1 textarea').hasClass('wpcf7-not-valid')) {
        $('.pop-up-form').removeClass('pustep2').removeClass('pu-closing');
        $('.form-step').hide();
        $('.fs1').show();

    }
    if ($('.fs2 *').hasClass('wpcf7-not-valid')) {
        alert('error on page 2 - take user back to the area with issues')
    }
}, 1700);
});

есть ли какая-либо конкретная функция или крюк, который я могу использовать для запуска JS, когда форма AJAX завершена?

спасибо!

29
ajax contact-form-7 javascript jquery wordpress

4 ответов

учитывая разнообразие ответов на эту тему разработчиков, кажется, изменили свое мнение о том, как это должно работать каждые 5 минут. В настоящее время (Q1 2017) это метод работы:

document.addEventListener( 'wpcf7mailsent', function( event ) {
  alert( "Fire!" );
}, false );

и допустимые события:

  • wpcf7invalid - срабатывает, когда представление формы Ajax завершено успешно, но Почта не была отправлена, потому что есть поля с неверный ввод.
  • wpcf7spam - пожары, когда Форма представления "Аякс" успешно, но Почта не была отправлена, потому что можно обнаружена активность спама.
  • wpcf7mailsent - срабатывает, когда Ajax отправка формы успешно завершена, и отправлена почта.
  • wpcf7mailfailed - срабатывает, когда представление формы Ajax завершено успешно, но не удалось отправить почту.
  • wpcf7submit - пожары когда форма представления "Аякс" завершено успешно, независимо от других инцидентов.

соус:https://contactform7.com/dom-events/

11

в версии 3.3 были введены новые пользовательские триггеры событий jQuery:

New: введите 5 новых пользовательских триггеров событий jQuery

  • wpcf7:неверный
  • wpcf7:спам
  • wpcf7:mailsent
  • wpcf7:mailfailed
  • wpcf7: submit

можно использовать wpcf7:invalid как пример ниже:

$(".wpcf7").on('wpcf7:invalid', function(event){
  // Your code here
});
50

иногда это может не работать, как Мартин Классон указал, работает только событие "отправить", наиболее вероятно, потому что оно запускается формой и пузырями до выбранного объекта. Также, как я могу понять, теперь события имеют другие имена, такие как "недействительный".wpcf7", "mailsent.wpcf7" и т. д. Короче говоря, это должно работать:

jQuery('.wpcf7').on('invalid.wpcf7', function(e) {
    // your code here
});

более подробное описание здесь: как добавить дополнительные настройки по ошибке в контактную форму 7?

2

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

если это пользовательская тема, которую вы создали, убедитесь, что jQuery и jQuery migrate загружены в этом порядке и что Контактная форма 7 js также загружена в нижний колонтитул.

убедитесь, что у вас есть wp_head и wp_footer в ваших шаблонах php.

для работы событий DOM ваша форма должна быть в режиме Ajax. Если страница перезагружается после отправки, забудьте о событиях DOM. Если у вас есть форма с ID в URL-адрес, то же самое. Моя форма изначально не была в режиме Ajax, потому что Контактная форма JS не была загружена, и jQuery также мигрирует.

форма должна вести себя так же, как показано на этой странице для событий DOM должен быть запущен должным образом. После этого, она должна работать.

я протестировал это с помощью jQuery 3.3.1 и Migrate 3.0.1 и следующего прослушивателя событий работал:

document.addEventListener( 'wpcf7mailsent', function( event ) {
    console.log('mail sent OK');
    // Stuff
}, false );

чтобы проверить, является ли ваша тема виновником, проверьте свою форму с помощью темы Wordpress по умолчанию, если она работает, вы знаете, что проблема на вашем конце и не так много в документе разработчика!

1