实现 Google 表单自定义确认页面

上一篇文章《在为客户制作 Google 表单时的陷阱》整理了使用 Google 表单的 HTML 自定义功能制作咨询表单时遇到的难点。本次将介绍确认页面的制作方法。

在上一个项目中，

输入页面→提交完成页面→自动发送确认邮件

的实现。

本次则是

输入页面→输入确认页面→提交完成页面→自动发送确认邮件

的实现，在此进行整理。

结论：仅靠 Google 表单无法实现“插入确认页面”的功能

Google Form 无法通过 JavaScript 自由控制提交内容的处理或页面跳转（出于安全原因，表单内容无法通过 JS 访问）。

Google Form，

• 本身就无法设计提交前插入中间确认页面的流程。
• 也无法将输入中的数据传送到其他页面，或嵌入到 HTML 中。

因此必须采用“自定义 HTML 表单 + GAS Web 应用”的方案。

使用 GAS Web 应用 时，不是使用 Google Form，而是通过 HTML 和 GAS 来构建。我原本希望使用 Google Form 3 来制作咨询表单，于是向 Gemini 咨询了这个问题。

能否将静态页面（index.html）中输入的数据传递到确认页面 confirm.html，然后把该页面的数据通过 连接到 Google Form 呢？

想法很敏锐，但遗憾的是，这种做法原则上“几乎不可能”实现。 如果一定要这样做，步骤如下： ①在 index.html 中，通过 JavaScript 将表单输入的值保存到 sessionStorage。 ②在 confirm.html 中，从 sessionStorage 读取数据并显示。 ③使用 向 Google Form 的 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>

点击确认按钮后，使用JavaScript将表单中输入的值保存到sessionStorage中，并跳转至确认页面/inquiry/confirm.html。

②confirm.html：创建确认页面

将保存在sessionStorage中的值填入class=”confirmBlock”中。

然后，请在正下方的表单中填入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配合工作！

通过type="hidden"将表单本身设为隐藏。

实际的确认页面如下：

只要去掉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 就能灵活实现。当然，源代码也是一览无余的，哈哈 💦

只需稍加定制，就能大幅提升外观和易用性，不妨花点心思试试看。