Question

当用户点击联系表单7表单的提交按钮时，我希望页面滚动到验证消息部分。

我的方法：

我使用jQuery on click事件作为提交按钮，然后单击滚动页面到验证消息部分。

我确信这不正确。因为点击它会滚动到该部分，但消息尚未通过ajax。

那么，有没有办法在联系表单7中完成验证时创建一个事件，并使用它向下滚动。

Answer 1

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

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

有效事件是：

wpcf7invalid - Ajax表单提交完成后触发成功，但邮件尚未发送，因为有字段输入无效。
wpcf7spam - 在Ajax表单提交时触发已成功完成，但邮件尚未发送，因为可能已检测到垃圾邮件活动。
wpcf7mailsent - 在Ajax时触发表单提交已成功完成，邮件已发送。
wpcf7mailfailed - Ajax表单提交完成后触发已成功，但发送邮件失败。
wpcf7submit - 开火无论如何，当Ajax表单提交成功完成时其他事件。

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

Answer 2

在这种情况下，联系表单7会触发wpcf7:invalid。您可以使用此触发器：

$(window).on('wpcf7:invalid', function() {
    // let's scroll
});

来源：https://github.com/wp-plugins/contact-form-7/blob/master/includes/js/scripts.js（行：109）

Answer 3

这也是这项工作。如果有人有兴趣。

$('.wpcf7-form').ajaxComplete( function(){    
      if($(this).hasClass('invalid') || $(this).hasClass('sent')){
            $('.forkit-curtain').animate({
                scrollTop: $(".wpcf7-response-output").first().offset().top + 100
            }, 2000);
      }
    });

联系表格7验证触发事件

3 个答案: