Topics

上次”使用 Google 表單建立客戶表單時的陷阱”，我寫了一篇文章總結了我在 Google Forms 中使用 HTML 自訂建立查詢表單時遇到的要點，這次我將介紹如何建立確認畫面。

在前一種情況下，

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

這就是實施方案。

這次，

輸入畫面→輸入確認畫面→傳送完成畫面→自動發送確認郵件

以下是確認畫面實現的摘要。

結論：您無法僅使用 Google 表單插入確認頁面

Google 表單不允許您使用 JavaScript 自由控制提交內容的處理或轉換（出於安全原因，無法使用 JavaScript 存取表單內容）。

Google 表單是

• 發送之前無法設計中間螢幕（用於確認）。
• 您輸入的資料也無法傳送到其他頁面或插入 HTML 中。

所以， ”原始 HTML 表單 + GAS Web 應用程式「 是必須的。

GAS 網路應用程式我決定使用 HTML 和 GAS 來取代 Google Forms。我想用 Google Form 3 建立一個查詢表單，所以我諮詢了 Gemini。

是否可以將在靜態頁面（index.html）上輸入的資料傳遞到確認頁面（confirm.html），然後使用

將該頁面上的資料連結到 Google 表單？

這是一個聰明的想法，但不幸的是，這種方法原則上「幾乎不可能」。 如果您真的想這樣做： 1. index.html → 使用 JavaScript 將表單中輸入的值儲存到 sessionStorage。 2. confirm.html 從 sessionStorage 讀取並顯示值。 3. POST 到 Google Form 的 formResponse（使用 entry.xxxxx 自訂）。 但是，請注意，這是 formResponse 的非官方方法，並且有一個缺點，即它對於關閉 JavaScript 的使用者不起作用。

加上用 JavaScript 實作的！

現在我們來看看如何使用 JavaScript 實作它。

①index.html：建立輸入頁面

首先，在輸入頁面上建立一個查詢表單。此時，您可以使用 Google 表單。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”倒入。

並在其正下方的表單中輸入 GoogleFormentry.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 表單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 Forms 難以實現的“確認畫面”，可以透過 JavaScript 靈活實現。 （不過，原始碼是完全公開的。）

稍加客製化就能大大改善外觀和易用性，所以為什麼不嘗試呢？