Topics

前回「GoogleFormでお客様のフォームを作るときの落とし穴」と題して、GoogleFormのHTMLカスタマイズでお問合せフォームを作成する際につまづいたポイントを記事にまとめましたが、今回は確認画面の作成についてご紹介します。

前回の案件では、

入力画面→送信完了画面→自動送信確認メール

の実装でした。

今回は、

入力画面→入力確認画面→送信完了画面→自動送信確認メール

確認画面の実装についてまとめます。

結論：Googleフォームだけでは「確認ページを挟む」ことはできない

GoogleFormはJavaScriptでの送信内容の加工や遷移を自由に制御できません（セキュリティの都合上、フォームの中身にJSでアクセスできない構造です）。

GoogleFormは、

• 送信前の中間画面（確認）を挟む設計がそもそもできない。
• 入力中のデータを他ページに送ったり、HTMLに差し込んだりも不可能。

よって「独自HTMLフォーム + GAS Webアプリ」が必須になります。

GAS WebアプリだとGoogleFormではなく、HTMLとGASで組むことになります。GoogleForm３を使用してお問合せフォームを作成したかったので、Geminiに聞いてみることに。

静的ページ(index.html)に入力したデータを確認画面ページのconfirm.htmlに渡して、 そのページのデータを <form action="https://docs.google.com/forms/xxx/formResponse" method="post" target="hidden_iframe" onsubmit="submitted = true;">のGoogleFormに連携できないかな？

鋭いアイデアですが、残念ながらそのやり方は原則「不可能に近い」です。 どうしてもやりたい場合 ①index.html → フォームに入力した値をJavaScriptでsessionStorageに保存。 ②confirm.htmlでsessionStorageから値を読み込んで表示。 ③<form>でGoogleFormのformResponseにPOST（entry.xxxxxを使ってカスタマイズ） ただこちらはformResponseの公式ではない方法、またJavaScriptがオフのユーザーには動作しないといったデメリットがあるので注意です。

プラスjavascriptで実装！

それではjavascriptとを利用して実装方法に参ります。

①index.html：入力ページを作成

まず入力ページではお問合せフォームを作成します。この時点ではGoogleFormのentry.xxxxの値は入れません。

<form id="form">
  <input type="text" name="category" placeholder="お問い合わせ種類">
  <input type="text" name="name" placeholder="お名前">
  <input type="email" name="email" placeholder="メールアドレス">
  <button type="submit">確認</button>
</form>

<script>
  document.getElementById('form').addEventListener('submit', function (e) {
    e.preventDefault();
    const formData = new FormData(e.target);
    for (const [key, value] of formData.entries()) {
      sessionStorage.setItem(key, value); // sessionStorage に保存
    }
    window.location.href = '/inquiry/confirm.html';
  });
</script>

確認ボタンが押されたら、formに入力された値をJavaScriptでsessionStorageに保存し、確認画面ページ /inquiry/confirm.htmlへ遷移します。

②confirm.html：確認画面ページを作成

sessionStorageに保存された値をclass=”confirmBlock”へ流し込みます。

そして直下にあるformにGoogleFormのentry.xxxxx の値を入れてください。

<div class="confirmBlock">
  <p>お問い合わせ種類: <span id="category"></span></p>
  <p>お名前: <span id="name"></span></p>
  <p>メールアドレス: <span id="email"></span></p>
</div>

<form action="<https://docs.google.com/forms/d/e/1FAIpQLSc-.../formResponse>"
      method="POST" target="hidden_iframe" onsubmit="submitted = true;">
  <input type="hidden" name="entry.1234567890" id="categoryInput">
  <input type="hidden" name="entry.2345678901" id="nameInput">
  <input type="hidden" name="entry.3456789012" id="emailInput">
  <button type="submit">送信</button>
</form>

<iframe name="hidden_iframe" style="display:none;" onload="if(submitted) window.location='/inquiry/complete.html';"></iframe>

<script>
  // 表示とフォームへの挿入
  ['category', 'name', 'email'].forEach(key => {
    const value = sessionStorage.getItem(key);
    document.getElementById(key).textContent = value;
    document.getElementById(key + 'Input').value = value;
  });

  let submitted = false;
</script>

確認画面ページなのになぜここに入力フォームを置くのか…

それは、GoogleFormのformResponse をこのformで機能させるからです！

type="hidden" でform自体は非表示にします。

実際の確認画面がこちら

type="hidden"をなしにすると、ここにカスタマイズしたGoogleFormが隠れています！

送信ボタンが押されたら

<iframe name="hidden_iframe" style="display:none;" onload="if(submitted) window.location='/inquiry/complete.html';"></iframe>

送信完了画面ページ complete.html に遷移すればOKです！

流れとしてはindex.htmlで入力した値をconfirm.htmlにあるGoogleFormに渡して送信する。というものです。

カスタマイズのGoogleFormなので、集計スプレッドシートも使用できますし、GASで自動返信メールも送ることができます。

まとめ

Googleフォーム単体では実現が難しい“確認画面”も、JavaScriptを活用すれば柔軟に実装可能です。※まぁソースは丸見えなんですけどね💦

ちょっとしたカスタマイズで、見た目や使いやすさをぐっと引き上げられるので、一手間加えてみてはいかがでしょうか。