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

• wpcf7：无效
• wpcf7：垃圾邮件
• wpcf7：已发送邮件
• wpcf7：邮件发送失败
• wpcf7：提交

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

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

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

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

有效事件包括：

*wpcf 7invalid-当 AJAX 表单提交成功完成，但由于存在输入无效的字段而未发送邮件时触发。
*wpcf 7spam-当 AJAX 表单提交成功完成，但由于检测到可能的垃圾邮件活动而未发送邮件时触发。
*wpcf 7 mailsent-当 AJAX 表单提交成功完成且邮件已发送时触发。
*wpcf 7 mailfailed-当 AJAX 表单提交成功完成，但发送邮件失败时触发。
*wpcf 7submit-当 AJAX 表单提交成功完成时触发，而不考虑其他事件。

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

有时候它可能不起作用，正如Martin Klasson指出的，只有'submit'事件起作用，最有可能的原因是它是由一个表单触发的，并冒泡到选定的对象。另外，正如我所理解的，现在事件有其他名称，如“invalid.wpcf7”，“mailsent.wpcf7”等。简而言之，这应该工作：

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

更详细的解释如下：如何在联系表7中添加其他错误设置？

此代码自5.8.x版本起有效：

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

我在这方面做了相当多的尝试，我发现当只有Submit事件起作用时，这意味着您的主题中存在js问题/冲突。
如果这是您构建的自定义主题，请确保jQuery和jQuery migrate都按此顺序加载，并且Contact form 7 js也加载到页脚中。
确保你的php模板里有wp_head和wp_footer。
要使DOM事件起作用，表单必须处于 AJAX 模式。如果页面在提交时重新加载，则忽略DOM事件。如果表单ID显示在URL中，则情况相同。我的表单最初不是Ajax模式，因为Contact Form JS和jQuery Migrate都没有加载。
表单必须表现为exactly like shown on this page才能正确地触发DOM事件。一旦你做到了这一点，它就应该可以工作了。
我已经用jQuery 3.3.1和Migrate 3.0.1对此进行了测试，下面的事件侦听器工作正常：

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

要检查你的主题是否是罪魁祸首，使用WordPress的默认主题测试你的表单，如果它工作，你知道问题是在你的一端，而不是在开发的文档！

我试着在wordpress contact form 7插件中实现dom事件行为，就像here描述的那样，但是在尝试了许多不同论坛中给出的修复方法之后，我实现了自己的方法。
我在下面描述这个方法。这个方法包括下面列出的一些步骤：
1.创建联系人表单
1.为联系人表单编写脚本以捕获事件触发器和表单数据
1.加载脚本

1.创建联系人表单

<label> Your name
    [text* cform7-name id:cform7-name autocomplete:name] </label>

<label> Your Number
    [tel* cform7-contact id:cform7-contact] </label>

<label> Course You are interested (Press Ctrl + Select to select Mutiple)
    [select* cform7-courses id:cform7-courses multiple "JAVA" "Python" "C#" "Others"] </label>

<label> Your message (optional)
    [textarea cform7-submit id:cform7-message] </label>

[submit id:cform7Submit "Submit"]

上面是一个带有id的示例脚本，这样我们就可以很容易地使用JS从DOM树中检索这些元素。[您可以根据需要修改字段id]

2.为联系人表单编写脚本以捕获事件触发器和表单数据

document.addEventListener('DOMContentLoaded', function() {
   var frmButton = document.getElementById('cform7Submit');
   
   frmButton.addEventListener( 'click', function( event ) {
   var data = {
        name: document.getElementById('cform7-name').value,
        contact: document.getElementById('cform7-contact').value,
        courses: document.getElementById('cform7-courses').value,
        comment: document.getElementById('cform7-message').value
   };
        event.preventDefault();
        console.log('Event Data ', event);
        console.log('Data ', data);

   }, false );

}, false);

将上面的脚本保存在wordpress部署目录中。在我的例子中，我将脚本放在根部署目录（<worpress-root-directory>）中，并将文件保存为cform7.js。例如：/var/www/wordpress-site/cform7.js
完成后，我们需要加载脚本。

3.加载脚本

function cform7_script() { 
    wp_enqueue_script( 'cform7-js', '/cform7.js'); 
} 
add_action('wp_enqueue_scripts', 'cform7_script');

将上述代码放入<worpress-root-directory>/wp-includes/functions.php文件中
点击表单提交按钮（cform7-submit），你一定会看到控制台中记录的数据。