联系表格 7 AJAX 回调

Question

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

我正在使用 wordpress 和 Contact Form 7 插件，一切正常，我想要实现的是 run 一些特定的 javascript 在表单提交时，我知道我们可以使用"on_sent_ok:" 在附加设置中，但这仅在实际提交表单时执行。

我想做的是在表单未正常提交时执行其他操作 javascript，这会使用户返回到未验证的部分。

我可以在点击表单提交 1.7 秒后使用以下代码 run，但是它有点草率，好像用户 run 连接速度慢，有潜力这可能 run 在表单正确提交之前。

 $('.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 完成后，是否有任何特定的函数或钩子可以用于 run JS？

谢谢！

Answer 1

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

New: Introduce 5 new jQuery custom event triggers

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

您可以像下面的例子那样使用wpcf7:invalid：

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

Answer 2

有时它可能不起作用，正如 Martin Klasson 指出的那样，只有 'submit' 事件起作用，最有可能的原因是它由表单触发并冒泡到所选对象。另外据我所知，现在事件有其他名称，如 "invalid.wpcf7"、"mailsent.wpcf7" 等。简而言之，这应该有效：

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

这里有更详细的解释：

Answer 3

考虑到关于这个主题的各种回应，插件开发人员似乎改变了他们对每 5 分钟应该如何工作的想法。目前（2017 年第一季度）这是工作方法：

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

有效事件是：

wpcf7invalid — Ajax 表单提交完成时触发成功，但邮件还没有发送，因为有字段输入无效。
wpcf7spam — 当 Ajax 表单提交有已成功完成，但邮件尚未发送，因为可能已检测到垃圾邮件 activity。
wpcf7mailsent — Ajax 时触发表单提交已成功完成，邮件已发送。
wpcf7mailfailed — Ajax 表单提交完成时触发成功，但发送邮件失败。
wpcf7submit — 触发当 Ajax 表单提交成功完成时，无论其他事件。

酱汁：https://contactform7.com/dom-events/

Answer 4

我在这方面做了很多努力，我发现只有 Submit 事件有效时，这意味着您的主题中存在 js 问题/冲突。

如果它是您构建的自定义主题，请确保 jQuery 和 jQuery migrate 都按此顺序加载，并且 Contact form 7 js 也在页脚中加载。

确保您的 php 模板中有 wp_head 和 wp_footer。

要使 DOM 事件起作用，您的表单必须处于 Ajax 模式。如果页面在提交时重新加载，请忽略 DOM 事件。如果您的表单 ID 显示在 URL 中，同样如此。我的表单最初未处于 Ajax 模式，因为未加载 Contact Form JS，并且 jQuery 迁移。

为了正确触发 DOM 事件，表单必须表现得 exactly like shown on this page。一旦你有了它，它应该可以工作了。

我已经用 jQuery 3.3.1 和 Migrate 3.0.1 测试了这个，下面的事件监听器起作用了：

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

要检查您的主题是否是罪魁祸首，请使用 Wordpress 的默认主题测试您的表单，如果有效，您就知道问题出在您这边，而不是在开发人员的文档中！

Answer 5

此代码从 5.8.x 版本开始有效：

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

联系表格 7 AJAX 回调

Contact Form 7 AJAX Callback

javascript

ajax

wordpress

jquery

contact-form-7