Astroサイトで送信完了ページへの直アクセスを回避する方法

Astroで作成しているサイトにおいて、お問い合わせフォームのサンクスページにURL等で直アクセスされた際に別ページへリダイレクトする方法を紹介しています。

送信完了ページへのアクセスをコンバージョンとして捉えている場合などでは、送信完了ページへの不必要なアクセスは避けたいところです。そのような場合に有効な方法です。

リダイレクトURLにパラメーターを追加

送信完了ページを作成している場合、フォーム送信時に送信完了ページへのリダイレクトの設定をしていると思います。そのリダイレクトURLにクエリパラメーターを追加します。

今回はフォームをSSGformで実装していたので、SSGformにログインし「送信後転送先URL」を次のように変更しました。

クエリパラメーターのsubmitted=trueを追加することで、どのページを経由して送信完了ページに到達したかを判定できるようなります。この値を使ってリダイレクトの要否を条件分岐します。

パラメーターの有無で条件分岐

送信完了ページのファイル（今回はthanks.astro）内に、リダイレクトに関するコードを追加します。

<script>
  // パラメーターを取得
  const params = new URLSearchParams(window.location.search);
  const submitted = params.get("submitted");

  // submittedがtrueでない場合はリダイレクト
  if (submitted !== "true") {
    window.location.href = "/contact/";
  }
</script>

前半ではURLSearchParamsで現在のページのURLに含まれるクエリ文字列のオブジェクトを作成し、getメソッドでsubmittedの値を変数に代入しています。 後半ではsubmittedが真でない場合には、お問い合わせページ（/contact/）に自動的にリダイレクトするようにしています。

これでフォーム送信完了後にのみ送信完了ページにアクセスできるようになります。

記事冒頭で「Astroで作成しているサイト」と紹介していますが、ここで実装している対策はクライアントサイドJavaScriptのみで実現しています。 そのため、実際にはAstro固有の機能を使っておらず、他のフレームワークやプレーンなHTML/JavaScriptでも同様に機能します。