[wp]CF7送信クリック時のページ内スクロール導入

エラー箇所の表示とか。

仕様のおさらい

ContactForm7の「送信する」を押したときの動作。

必須項目が未入力だった場合、該当部分に「記入しろ」的な個別のエラー文が表示される。
フォーム下部に包括的なエラー文が表示される。
以前は上部にも表示されてた気がするけど、今のところしてない。

入力内容に問題がなければ「送信完了」的なメッセージがフォーム下部に表示され、各項目は空欄になる。

フォーム全体が表示領域に収まっていればこれで足りるのだけど、項目がめっちゃあってめっちゃスクロールするようなものを作った場合、送信できたにせよできなかったにせよよくわからない感じになる。PCならまだしもスマホだと結構きつい。

こんな感じ

送信完了時にメッセージ位置にスクロール

$(function(){
    var wpcf7El = document.querySelector(".wpcf7");
    wpcf7El.addEventListener("wpcf7mailsent", function() {
        var speed = 1000;
        setTimeout(function () {
            var scrollAmount = $(".wpcf7-response-output").offset().top - 100px;
            $("html, body").animate({ scrollTop: scrollAmount }, speed, "swing");
        }, 300);
    },false );
})

cf7をトリガーにして、ページ内スクロールを仕込んだ内容。

setTimeout()を使ってるので発火から指定した時間のディレイを挟んでスクロールする。
だからめっちゃ長いページでも心の準備ができる。
即動くとビビるけどめっちゃ待ってから動くのもそれはそれで理由がわからなくなるので、程々、気持ち程度のディレイ推奨。

メッセージ部分へのスクロールに関しては、ブラウザ上部にピッタリ合わせるとそれも気持ち悪い。
だからある程度位置をずらしたほうがいいですね(上記だと100px)。

ヘッダーを固定表示している場合はその分も調整する。

入力不備位置へスクロール

$(function(){
    var wpcf7El = document.querySelector(".wpcf7");
    wpcf7El.addEventListener("wpcf7invalid", function() {
        var speed = 1000;
        setTimeout(function () {
            var firstErrorEl = $(".wpcf7-not-valid:first");
            var scrollAmount = firstErrorEl.offset().top - 100;
            $("html, body").animate({ scrollTop: scrollAmount }, speed, "swing");
        }, 300);
    },false );
})

これはちょっとややこしい。

「プライバシーポリシーに同意する」的な確認用チェックボックスはエラー文が出ない。だけど他の項目と同様にエラー箇所としてclassが振られるから、これもちゃんとスクロールされる。
「チェックしないと送れないよ」的な注意文をあらかじめ入れておくこと。

参考

【jQuery】Contact Form 7でエラー箇所にスクロールする方法 | WebDev Tech
WordPressプラグイン「Contact Form 7」では、必須項目が未入力の場合や、入力値が正しくない場合にエラーメッセージを表示してくれます。 しかし、フォームの項目が多い場合は、エラー箇所に自動的にスクロールしてくれる機能が欲し

おまけ:フォーム上部にエラー文表示

$(function(){
    $('.wpcf7').find('.screen-reader-response p').each(function(){
        if($(this).text() !='' && $(this).closest('.wpcf7').find('form').hasClass('invalid')){
            $(this).addClass('active');
            $(this).parent('.screen-reader-response').css({'position':'relative','overflow':'inherit','clip':'inherit','clip-path':'inherit','height':'inherit','width':'inherit','margin':'inherit','padding':'inherit','border':'inherit'});
            $(this).parent('.screen-reader-response').find('ul').hide();
            $(this).parent('.screen-reader-response').show();
            $(this).css('padding',$(this).closest('.wpcf7').find('.wpcf7-response-output').css('padding'));
            $(this).css('border',$(this).closest('.wpcf7').find('.wpcf7-response-output').css('border'));
            $(this).css('text-align',$(this).closest('.wpcf7').find('.wpcf7-response-output').css('text-align'));
            $(this).css('border',$(this).closest('.wpcf7').find('.wpcf7-response-output').css('border'));
        }
    })
})

非表示ではあるもののHTML上に存在するので、うまいこと表示してしまおうという魂胆。

非表示のためのガッチガチなcssが設定されてるから全部リセット。
ついでに、ただ文章だけ出しても地味だから下部のエラー文の装飾を引っ張ってくる。

ところで、cssのリセットに関して調べると以下のようなサンプルが出てくる。

$(function(){
    //1個だけ
    $('sample').css('width','');
    //複数一括
    $('sample').css({'position':'','overflow':','clip':'','clip-path':'','height':'','width':'','margin':'','padding':'inherit','border':''});
})

値を空欄にすればいいみたいな事が書いてあった。
だけど、これに倣っても全く効かなかった。
空欄ダメ

コメント

タイトルとURLをコピーしました