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

时间:2012-07-04 17:13:00

标签: wordpress wordpress-plugin contact-form-7

只是玩Wordpress / Contact Form 7

是否可以在成功的电子邮件发送活动中添加自定义javascript功能?

5 个答案:

答案 0 :(得分:27)

将此内容写入联系表单配置页面底部的其他设置中:

on_sent_ok: "some js code here"

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

on_sent_ok: "your_function();"

或者写一些代码(这个代码重定向到感谢页面):

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

答案 1 :(得分:26)

联系表单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!');
});

答案 2 :(得分:3)

试试这个:

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

});

答案 3 :(得分:1)

示例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';"

答案 4 :(得分:1)

请注意,on_sent_ok已弃用。

联系表格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
}