Question

使用Wordpress和插件联系表格7我想使用jQuery滚动到联系表格上方的成功消息。

这是我的表格

<form action="/.../.../#wpcf7-f1581-p853-o1" method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate">

我已经在主题中添加了以下代码，但是在重新加载时会调用它，但是不起作用。

var myEl = document.getElementsByClassName('wpcf7-submit');

myEl.addEventListener('click', function() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
}, false);

Answer 1

您可以尝试一下，聊天联系表的回复并做魔术

document.addEventListener( 'wpcf7mailsent', function( event ) {
                  window.scrollTo({ top: 0, behavior: 'smooth' });
            }, false );

Answer 2

此代码将滚动（提交后）到CF7表单下方的带有结果消息的元素，您可以使其适应滚动到您的元素，只需设置适当的偏移量并将更新选择器“ .wpcf7-response-output”更新为您的：

jQuery(function ($) {
    $(document).ready(function ()
    {
        var wpcf7Elm = document.querySelector( '.wpcf7' );
        wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
            setTimeout(function() {
                $([document.documentElement, document.body]).animate({
                    scrollTop: $(".wpcf7-response-output").offset().top - 100
                }, 500);
            }, 500);
            //console.log("Submited");
        }, false );
    });
});

滚动到联系表单7（wordpress）中的成功字段

2 个答案: