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

24

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

Я использую 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 завершена?

Спасибо!

  • 0
    Привет - просто обратите внимание, что принятый ответ больше не является рабочим решением, если вы можете изменить его, что будет полезно для новых посетителей
Теги:
contact-form-7

3 ответа

42
Лучший ответ

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

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

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

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

$(".wpcf7").on('wpcf7:invalid', function(event){
  // Your code here
});
  • 8
    Хотелось бы, чтобы это было в самой документации, а не просто в списке изменений. Я почесал голову на это в прошлом!
  • 0
    Спасибо Висенте! Я тоже почесал голову над этим в течение некоторого времени! Я проверю это, как только вернусь к своей машине, и укажу правильное :)
Показать ещё 6 комментариев
4

Учитывая разнообразие ответов на эту тему, разработчик плагина, похоже, передумал, как это должно работать каждые 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/

  • 0
    На всякий случай, если кто-нибудь wp_footer() этот ответ ... У меня не было функции wp_footer() которая препятствовала wp_footer() этих событий. Простой контроль, но это может помочь проверить, что это в вашей теме!
  • 0
    Спасибо, это сработало, но что, если я хочу выполнить ручную проверку полей формы? Как я вижу, список выше или на сайте плагина не предоставляет никаких событий до отправки формы. Есть идеи по этому поводу?
2

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

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

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

  • 0
    Все еще ничего для меня; ни одно из этих событий, кажется, не работает (и я не могу найти надлежащую документацию для них ...)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню