联系表格7 AJAX回拨
一直在寻找这个问题,并且无法提出任何文档来概述我想要实现的目标。
我正在使用wordpress和Contact Form 7插件,一切都运行得很好,我想要实现的是在表单提交时运行一些特定的javascript,我知道我们可以在其他设置中使用“on_sent_ok:”,但这仅执行如果表格实际提交。
我想做的是当表单没有提交时做一些其他的javascript,这会将用户抛回到未validation的部分。
我可以使用以下代码在单击表单提交的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?
谢谢!
鉴于有关此主题的各种回复,插件开发人员似乎会改变他们对每5分钟如何工作的看法。 目前(2017年第一季度)这是工作方法:
document.addEventListener( 'wpcf7mailsent', function( event ) { alert( "Fire!" ); }, false );
有效事件是:
- wpcf7invalid – 在Ajax表单提交成功完成时触发,但由于存在无效输入的字段,因此尚未发送邮件。
- wpcf7spam – 成功完成Ajax表单提交时触发,但由于检测到可能的垃圾邮件活动而未发送邮件。
- wpcf7mailsent – 在Ajax表单提交成功完成并且已发送邮件时触发。
- wpcf7mailfailed – 在Ajax表单提交成功完成时触发,但发送邮件失败。
- wpcf7submit – 成功完成Ajax表单提交时触发,无论其他事件如何。
酱: https : //contactform7.com/dom-events/
在3.3版中,引入了新的jQuery自定义事件触发器:
新增内容:引入5个新的jQuery自定义事件触发器
- wpcf7:无效
- wpcf7:垃圾邮件
- wpcf7:mailsent
- wpcf7:mailfailed
- wpcf7:提交
您可以使用wpcf7:invalid
如下例所示:
$(".wpcf7").on('wpcf7:invalid', function(event){ // Your code here });
有时它可能不起作用,正如Martin Klasson指出的那样,只有’submit’事件有效,最有可能因为它是由一个表单触发并且冒泡到所选对象。 另外据我所知,现在事件有其他名称,如“invalid.wpcf7”,“mailsent.wpcf7”等。总之,这应该有效:
jQuery('.wpcf7').on('invalid.wpcf7', function(e) { // your code here });
这里有更详细的解释: 如何在联系表格7中添加错误的其他设置?
我在这方面做了很多,我发现当只有Submit
事件有效时,这意味着你的主题中存在js问题/冲突。
如果它是您构建的自定义主题,请确保按此顺序加载jQuery和jQuery migrate,并且还在页脚中加载Contact表单7 js。
确保你的php模板中有wp_head
和wp_footer
。
要使DOM事件起作用,您的表单必须处于Ajax模式。 如果页面在提交时重新加载,请忘记DOM事件。 如果您在URL中显示表单ID,则相同。 我的表单最初不是在Ajax模式下,因为没有加载Contact Form JS,也没有加载jQuery Migrate。
表单的行为必须与此页面上显示的完全相同 ,才能正确触发DOM事件。 一旦你有了它,它应该工作。
我已经使用jQuery 3.3.1和Migrate 3.0.1测试了这个,并且以下事件监听器工作:
document.addEventListener( 'wpcf7mailsent', function( event ) { console.log('mail sent OK'); // Stuff }, false );
要检查您的主题是否是罪魁祸首,请使用Wordpress的默认主题测试您的表单,如果它有效,您知道问题就在您的最终,而不是在开发人员的文档中!