實現Google表單客製化的確認畫面

上次以「製作 Google Form 客戶表單時的陷阱」為題，整理了使用 Google Form HTML 自訂建立諮詢表單時遇到的要點。這次我們將介紹確認畫面的製作方法。

上次的專案中，

輸入畫面→送信完成畫面→自動送信確認信

的實裝。

這次我們

輸入畫面→輸入確認畫面→送信完成畫面→自動送信確認信

確認畫面的實裝進行整理說明。

結論：只用 Google Form 無法「加入確認頁面」

Google 表單無法透過 JavaScript 自由控制提交內容的處理或頁面轉向（基於安全性考慮，表單內容的結構無法透過 JS 存取）。

Google 表單

• 無法設計在提交前插入中間確認畫面。
• 無法將輸入中的資料傳送到其他頁面，也無法插入 HTML 中。

因此必須採用「自訂 HTML 表單 + Google Apps Script 網路應用程式」。

採用 Google Apps Script 網路應用程式時，就不是使用 Google 表單，而是用 HTML 和 Google Apps Script 組合實作。由於想用 Google 表單建立聯絡表單，於是決定詢問 Gemini。

能否將在靜態頁面 (index.html) 輸入的資料傳送至確認頁面 (confirm.html)，再透過該頁面的 連結到 Google 表單？

這是個有洞察力的想法，但很遺憾，那種做法原則上「幾乎不可能」。 如果一定要實作的話 ①index.html → 用 JavaScript 將表單輸入的值保存至 sessionStorage。 ②在 confirm.html 中從 sessionStorage 讀取值並顯示。 ③透過 向 Google 表單的 formResponse 進行 POST（使用 entry.xxxxx 進行自訂） 但這種方法有幾個缺點需要注意：採用的是 formResponse 的非官方方式，且對於關閉 JavaScript 的使用者無法運作。

加上 JavaScript 實作！

那麼現在就利用 JavaScript 進行實作方法的說明。

①index.html：建立輸入頁面

首先，在輸入頁面建立聯絡表單。此時不需填入 Google Form 的 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>

當按下確認按鈕時，使用 JavaScript 將表單輸入值保存到 sessionStorage，然後導向至確認頁面 /inquiry/confirm.html。

②confirm.html：建立確認頁面

將保存在 sessionStorage 中的值導入至 class="confirmBlock"。

然後在其下方的表單中填入 Google Form 的 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>

確認頁面上為什麼還要放輸入表單呢…

那是因為要用這個表單讓 Google Form 的 formResponse 發揮作用！

用 type="hidden" 將表單本身隱藏。

實際的確認頁面就像這樣

將 type="hidden" 移除後，這裡隱藏著自訂的 Google 表單！

提交按鈕被按下時

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

轉至完成畫面頁面 complete.html 就可以了！

流程是將在 index.html 中輸入的值傳遞到 confirm.html 中的 Google 表單並提交。

由於是自訂的 Google 表單，可以使用彙總試算表，也可以透過 GAS 傳送自動回覆電子郵件。

總結

Google 表單單獨難以實現的「確認畫面」，透過 JavaScript 活用可以靈活實現。※不過原始碼就完全可見了呢💦

只需稍作調整，就能大幅提升外觀和易用性，何不多花一點心力試試呢。