联系表格7 AJAX回调

Question

在此搜索了一段时间，无法提供任何文档来概述我想要实现的目标。

我正在使用wordpress和Contact表单7插件，一切都很好，我想要实现的是在表单提交时运行一些特定的javascript，我知道我们可以在附加的设置中使用"on_sent_ok:“，但是只有当表单实际提交时才能执行。

我想做的是在表单不提交ok时执行其他javascript，这会将用户抛回未验证的部分。

我可以使用下面的代码在单击1.7s的表单提交后运行，但是这有点草率，就好像用户正在缓慢地运行连接一样，这可能会在表单正确提交之前运行。

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

在AJAX表单完成后，有什么特定的函数或钩子可以用来运行JS吗？

谢谢!

Answer 1

此代码从5.8.x版本开始工作：

$('.wpcf7').on('wpcf7invalid wpcf7spam wpcf7mailsent wpcf7mailfailed', function () {  
   // your code here
});

Answer 2

在版本3.3中引入了新的jQuery自定义事件触发器：

New:引入5个新的jQuery自定义事件触发器

• wpcf7 7:无效
• wpcf7 7:垃圾邮件
• wpcf7 7:邮件发送
• wpcf7 7:邮件失败
• wpcf7 7:提交

您可以使用wpcf7:invalid，如下所示：

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

Answer 3

考虑到对这个主题的各种反应，插件开发人员似乎每隔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/