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

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

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

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

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

 $('.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);
});

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

Спасибо!

Ответ 1

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

Новое: ввести 5 новых настраиваемых триггеров jQuery

wpcf7: недействительный
wpcf7: спам
wpcf7: mailsent
wpcf7: mailfailed
wpcf7: отправить

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

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

Ответ 2

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

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

И действительные события:

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

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

Ответ 3

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

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

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