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 灵活实现。（不过，源代码是完全公开的。）

稍加定制就能大大改善外观和易用性，所以为什么不尝试一下呢？