LPなど縦に長いレイアウトのページでコンテンツの下部に
問い合わせフォームを設置している場合のケースです。
Contact Form 7 と Contact Form 7 Multi-Stepの組み合わせで
確認ページを個別に設けた場合、
入力内容の訂正のために元の画面へ戻るとページの先頭へ移動してしまいます。
ファーストビューでフォームが見えていない状態なので
ユーザーが戸惑う可能性があるのと、
フォームの設置してある場所までスクロールが必要になるので不便かと思います。
その対策として、
確認ページから元の入力ページへ戻ってきた場合には、
JSを使ってフォームの設置してある位置までアンカーリンクで飛ばす処理を加えました。
具体的には以下のような形で、
リファラーで直前のURLを取得して確認ページからの遷移だった場合には
ページ内リンクでフォームの先頭へ移動させています。
<script>
var refer = document.referrer;
if (refer.indexOf('確認ページのURL') !== -1) {
location.href = "#contact";
}
</script>リファラーに .indexOf 内の文字列が含まれていない場合の戻り値は -1なので、
含まれていた場合（ !== -1 ）はフォームの先頭に設置したアンカー（ id=”contact” ）へ飛ばしています。
indexOfの文字列の調査についてはこちらの解説を参考にさせていただきました。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf#%E5%87%BA%E7%8F%BE%E3%81%AE%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF
コメント