實作 Google Form 客製化確認畫面

上一篇文章以「在為客戶製作 Google Form 時的陷阱」為題，整理了使用 Google Form 的 HTML 客製化功能製作詢問表單時遇到的難點。本次將介紹確認畫面的製作方式。

上一個案件中，

輸入畫面→送出完成畫面→自動寄送確認郵件

的實作內容。

本次則是

輸入畫面→輸入確認畫面→送出完成畫面→自動寄送確認郵件

的流程，整理確認畫面的實作方式。

結論：Google 表單本身無法在中間插入「確認頁面」。

Google 表單無法透過 JavaScript 自由控制送出內容的處理或頁面跳轉（基於安全考量，表單內容的結構無法從 JS 存取）。

Google 表單，

• 原本就無法設計在送出前插入中間畫面（確認頁）。
• 也無法將輸入中的資料傳送到其他頁面，或嵌入至 HTML 中。

因此必須採用「自製 HTML 表單 + GAS 網頁應用程式」。

使用 GAS 網頁應用程式時，並非直接使用 Google 表單，而是以 HTML 與 GAS 來建構。由於我原本想使用 Google 表單 3 製作聯絡表單，因此就詢問了 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”。

接著，請在正下方的 form 中填入 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>

明明是確認頁面，為什麼要在這裡放置輸入表單呢……

那是因為要讓這個 form 與 Google Form 的 formResponse 配合運作！

透過 type="hidden" 將 form 本身設為隱藏。

實際的確認頁面如下。

若取消type="hidden"，這裡會隱藏已客製化的 Google Form！

當按下送出按鈕後

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

只要跳轉至送出完成頁面 complete.html 即可！

整體流程是將在 index.html 輸入的值，傳送至 confirm.html 中的 Google Form 後再送出。

由於是客製化的 Google Form，因此也能使用彙整用的試算表，還可以透過 GAS 發送自動回覆郵件。

總結

單靠 Google Form 較難實現的「確認畫面」，只要善用 JavaScript 就能靈活實作。※雖然原始碼其實全都看得見就是了 💦

只要稍加客製化，就能大幅提升外觀與易用性，不妨多花一點心思試試看。