联系表格 7 - 在电子邮件发送上添加自定义功能答案

【问题标题】：Contact Form 7 - add custom function on email send联系表格 7 - 在电子邮件发送上添加自定义功能
【发布时间】：2012-07-05 04:47:21
【问题描述】：

只是在玩Wordpress / Contact Form 7。

是否可以在成功的电子邮件发送事件中添加自定义 javascript 函数？

【问题讨论】：

也许这对wordpress.stackexchange.com有好处

标签： wordpress contact-form-7

【解决方案1】：

在联系表单配置页面底部的附加设置中写入：

on_sent_ok: "some js code here"

更新：你可以用它来调用这样的函数：

on_sent_ok: "your_function();"

或者写一些代码（这个重定向到感谢页面）：

on_sent_ok: "document.location='/thank-you-page/';"

【讨论】：

我可以把JS函数等放在这里吗？
我不确定它是否有一些长度限制，我个人只会调用我的 javascript 函数，该函数位于单独的 js 文件中。
@AamirShahzad 检查您的浏览器控制台是否有任何可能阻止 javascript 执行的 javascript 错误。
@digiout 你可以像这样[text* name id:your-name] 设置你的表单，然后在on_sent_ok 上使用像这样jQuery('#your-name').val() 的jQuery 来获取它的价值。
@SunilGarg your_function 需要在页面的任何位置或页面中包含的 javascript 文件中定义。它与任何其他 javascript 函数一样，只是需要在调用之前定义。

【解决方案2】：

Contact Form 7 发出许多 Javascript 事件，这些事件冒泡到文档对象。在 4.1 版中，它们可以在 contact-form-7/includes/js/scripts.js 中找到。如果你使用 jQuery，你可以像这样访问这些事件：

$(document).on('spam.wpcf7', function () {
    console.log('submit.wpcf7 was triggered!');
});

$(document).on('invalid.wpcf7', function () {
    console.log('invalid.wpcf7 was triggered!');
});

$(document).on('mailsent.wpcf7', function () {
    console.log('mailsent.wpcf7 was triggered!');
});


$(document).on('mailfailed.wpcf7', function () {
    console.log('mailfailed.wpcf7 was triggered!');
});

【讨论】：

@likesalom CF7 有类似 .on('submit.wpcf7........ 100% 的时间？？
@alex 你可以用 jQuery 监听提交事件：api.jquery.com/submit
mailsent.wpcf7 和 wpcf7:mailfailed 已被弃用。

【解决方案3】：

试试这个：

$( document ).ajaxComplete(function( event,request, settings ) {
   if($('.sent').length > 0){
       console.log('sent');
   }else{
       console.log('didnt sent');
   }

});

【讨论】：

【解决方案4】：

示例 1：

on_sent_ok: "location = 'http://mysite.com/thanks/';"

示例 2： 在表单脚本中：

<div id="hidecform">
<p>You name<br />
    [text* your-name] </p>
...
</div>

然后在“附加设置”下的管理页面底部输入以下内容：

on_sent_ok: "document.getElementById('hidecform').style.display = 'none';"

【讨论】：

【解决方案5】：

请注意，不推荐使用 on_sent_ok。

Contact form 7 现在使用事件监听器，像这样；

<script type="text/javascript">
  document.addEventListener( 'wpcf7mailsent', function( event ) {
      if ( '11875' == event.detail.contactFormId ) { // if you want to identify the form
       // do something
      }
  }, true );
</script>

然后将其添加到 wp_footer 操作中。

像这样;

add_action( 'wp_footer', 'wp1568dd4_wpcf7_on_sent' );

function wp1568dd4_wpcf7_on_sent() { 
  // the script above
}

【讨论】：