WordPress

【Contact Form7】お問い合わせ確認画面から入力画面に戻る際、任意の位置にスクロールさせたい

 
Contents
  1. 概要
  2. 前提条件
  3. 実装方法
  4. おわりに

概要

LPなどの長めのページの下部にContact Form7とContact Form 7 Multi-Step Formsを使ったお問い合わせフォームを埋め込み、フォームのスクロール位置で確認画面と完了画面を作成したい時があるかと思います。

確認画面から入力画面に戻るボタンはCF7のデフォルト機能として備わっていますが、遷移先のスクロール位置までは指定できないため、通常ページの上部に戻ってしまいます。

お問い合わせフォームの位置までスクロールしてもらえれば続きの作業を行えますが、ユーザー側からすると、びっくりするでしょう。

「入力に問題があって最初に戻ってしまったのか」「えー、ちょっと時間かけて入力したのに…もういいや…」とサイト離脱の原因となり、顧客獲得の機会損失となってしまいます。

そのため、入力画面に戻った際にフォームの位置までスクロール位置を移動させることは必須作業ともいえるでしょう！

前提条件

  1. WordPress製サイトであること
  2. Contact Form7とContact Form 7 Multi-Step Formsを利用してお問い合わせフォームを作成していること

実装方法

HTML部分は割愛して紹介しますが、メイン実装はJavaScriptです。

コード

入力画面HTML（Contact Form7管理画面にて）

https://example.com/contact/

<div>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
...
<div id ="contact">
...
[multistep multistep-116 first_step "/contact-confirm/#contact"]
</div>
</div>

確認画面への遷移先は#contactなどを付け、指定のID属性値があればその要素の位置までスクロールされます。

確認画面HTML（Contact Form7管理画面にて）

https://example.com/contact-confim/

<div>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
...
<div id ="contact">
...
[previous previous-900 "入力内容を修正する"]
</div>
</div>

JS

const backToContactInputPage = (includeText, target, header) => {
    const referrer = document.referrer; // 1つ前の画面URLを取得

    if (referrer.includes(includeText)) { // 1つ前の画面URLにincludeTextの文字列が含まれているかどうか
      const targetElement = document.querySelector(target);
      const headerElement = document.querySelector(header); // 追従ヘッダーがあれば指定してください。
      if (targetElement && headerElement) {
        const scrollTop = targetElement.getBoundingClientRect().top + window.scrollY - headerElement.offsetHeight; // ヘッダーの高さを引いた分の位置
        window.scrollTo({
          top: scrollTop,
          behavior: 'instant'
        });
      }
    }
  };

backToContactInputPage('contact-confirm', '#contact', '.header');

MultiStep Formのpreviousショートコード単体では遷移先のスクロール位置は指定できないため、JavaScriptで1つ前の画面URLを元（リファラー）に指定の要素までスクロールさせます。

referrerの値が「https://example.com/contact-confim/#contact」の場合、つまり確認画面から入力画面に遷移した際、referrer値に「contact-confirm」の文字列が含まれ（includeText）、スクロール位置に設定したい要素（target）とヘッダー要素（header）が存在すればtargetの位置からheaderの高さを引いた分（お問い合わせフォームの位置）までスクロールさせることができます！

追従ヘッダーのないページであれば、関数の引数も含めheaderに関わる部分を削除するだけでOKです。

おわりに

良きWordPressライフを🖐️

関連記事