使用 Google Forms 制作客户表单时的常见陷阱

长期在 WordPress 上广受欢迎的日本本土插件 MW WP Form 即将停止服务。它被众多团体和法人网站采用，是一款值得信赖的插件，因此确实有些令人遗憾。

也有一些客户无法承担单独开发安全邮件表单或利用 SaaS 进行前端实现的成本。在此背景下，客户提出了将联系表单切换为 GoogleForms 的需求。既然如此，我们决定在保留现有设计的基础上嵌入 GoogleForm，并进行了实现！

相关经验在许多网站上都有介绍，虽然我们边查边做，但导入本身非常简单。 也有些地方略显棘手，因此这次想与大家分享其中的要点！

作业流程

• 将 GoogleForms 定制为静态页面
• 表单提交后，通过 JS 跳转到提交完成页面
• 通过 GAS 向咨询客户发送自动回复邮件

遇到的问题

• 发送自动回复邮件时，GAS 中用于获取表单回答的 "namedValues" 返回 undefined
• 自动发送邮件的发件人变成了我的地址

  　

关于 GoogleForms 自定义

GoogleForms 不仅可以直接嵌入使用，还可以将其集成到用 HTML/CSS 制作的表单中，从而自定义设计！

这是我们公司的访客登记表，其表单部分也集成了 GoogleForms。

关于集成到 HTML 中的自定义方法，以及提交后跳转到完成页面的方法，本次将略过不做说明。

踩坑记录 其1：
发送自动回复邮件时，GAS中用于获取表单回答的 "namedValues" 为 undefined

可以通过与 GoogleForms 回答关联的电子表格，实现 GoogleAppScript (GAS)，从而发送自动邮件。

以点击咨询表单的提交按钮为触发条件，运行一段脚本，读取从关联电子表格中发送过来的信息并将其反映到邮件中。

function reply(e) {
  // フォームの回答を取得
  const name = e.namedValues['お名前'][0];
  const email = e.namedValues['メールアドレス'][0];

  
  // 自動返信メール件名
  const subject = '【テスト】お問い合わせありがとうございます';
      
  // 自動返信メール本文
  const body = name + '様\n' +
    '\n' +
    '下記の内容で申し込みを受付いたしました。\n' +
    '\n' +
    '【お名前】\n' +
    name + '\n' + 
    '\n' +
    '【メールアドレス】\n' +
    email + '\n' ;
  
  // メール送信
  MailApp.sendEmail({
    to: email,　 
    subject: subject,
    body: body 
  });
}

原本以为这个脚本可以发送邮件，结果却出现了错误。

TypeError: Cannot read properties of undefined (reading 'お名前')at reply(reply:3:29)

找不到第一个项目“お名前”。

e 应该已经能获取到了吧……下面确认一下。

function reply(e) {
  Logger.log(JSON.stringify(e)); 
}

返回的是 null。怎么回事。

查了一下 GAS 的事件对象 namedValues ……

注意：请将此表单提交触发器与 SpreadsheetTriggerBuilder 一起使用。

据说这个只能用于电子表格的触发器！所以这次使用 response。

function reply(e) {
  // フォームの回答を取得
  const responses = e.response.getItemResponses();
  let name = '';
  let email = '';
  
  // 回答をループして必要な項目を抽出
  responses.forEach(response => {
    const itemTitle = response.getItem().getTitle(); // 質問のタイトルを取得
    const answer = response.getResponse(); // 回答を取得

    if (itemTitle === 'お名前') {
      name = answer;
    } else if (itemTitle === 'メールアドレス') {
      email = answer;
    }
  });

  // 自動返信メール件名
  const subject = '【テスト】お問い合わせありがとうございます';
  
  // 自動返信メール本文
  const body = name + '様\\n' +
    '\\n' +
    '下記の内容で申し込みを受付いたしました。\\n' +
    '\\n' +
    '【お名前】\\n' +
    name + '\\n' + 
    '\\n' +
    '【メールアドレス】\\n' +
    email + '\\n';
  
  // メール送信
  MailApp.sendEmail({
    to: email,　 
    subject: subject,
    body: body 
  });
}

需要注意，这个事件参数 e 的内容（属性和方法）会因触发器是设置在 Google Forms 还是 电子表格 上而有所不同。

• GoogleForms

  e.response.getItemResponses()

• 电子表格

  e.values　e.namedValues

改写后的脚本顺利发出了邮件！

……但仔细一看，发件人变成了我自己的地址。这样下去，会从我的地址向客户自动发送邮件。

踩坑点 其2
自动发送邮件的发件人变成了我的地址

• GAS 必须设置“以哪个 Google 账户运行”。
• 通过 GAS 发送邮件时，邮件会以“执行者的 Gmail”发出。

这次我是邀请客户将我的账户添加为 Google 表单的编辑者后进行实现的。
目前由于自动发送邮件脚本的执行者是我，因此邮件会以我的地址发出。

要将其设置为客户端的发件人，需要用拥有者账户重新设置。另外，如果客户提出“希望将客户端的咨询专用地址info＠example.com 设为发件人”，要进行设置的话……？

解决方法

• 请客户在其 Gmail 账户中将咨询用地址info＠example.com 设置为别名。
• 用拥有者账户重新设置触发器
• 在账户中添加自有域名的邮箱地址，在脚本的MailApp.sendEmail()中添加 from 选项，并填写该地址

GmailApp.sendEmail(email, replySubject, body, {
    from: 'info＠example.com'  // 追加した送信元アドレス
  });

添加自有域名地址是什么

添加账户后，即可使用 [email protected] 邮箱地址发送邮件。
也就是说，从 Gmail 发送时，可以选择名为「[email protected]」的发件人，类似于子地址。

如果不添加账户，只要使用 Gmail 账户，就无法自由自定义发件人。
在这种情况下，需要使用外部 SMTP 服务器（例如 SendGrid、Amazon SES）。

因此，最简洁且最佳的流程是：
请所有者账户为其添加用于咨询的[email protected] 地址 → 由所有者账户进行触发器设置。

需要注意的是，自动发送的邮件会以 Gmail 名义发出，因此会不断累积在「已发送」文件夹中。
如果不希望发送文件夹被占满，建议新建一个专用账户。

总结

Google 表单本身也具备简单的自动发送功能，但无法自定义邮件的主题和正文。
使用其他扩展程序的方式，免费版每天的自动回复数量上限为 20 封。
相比之下，GAS 可以在控制成本的同时，构建灵活性和扩展性都很高的解决方案！

使用 GAS 的优势

1. 易于使用的邮件自定义
   • 可根据表单回答内容，自动更改发送邮件的内容和收件人。
   • 还可以发送 HTML 格式设计的邮件，成品效果美观。
2. 可与 Google 服务集成
   • 回答数据会自动保存到 Google 表格，便于汇总和管理。
   • 可自动在 Google 日历中创建日程并设置提醒。
   • 可将文件整理并保存到 Google 云端硬盘，轻松管理数据。
3. 无需额外费用
   • 可在 Google Workspace 内免费使用。
   • 无需使用外部服务，因此运营成本较低。
4. 自动化，快速运行
   • 表单提交后可立即发送邮件并保存数据。
   • 还可以一次性执行多项处理。
5. 安全的数据管理
   • 由于处理完全在 Google 账户内完成，数据外泄的风险较小。
   • 安全性也很完善，可以放心使用。
6. 可以灵活改变使用方式
   • 在新表单中也能轻松复用设置。
   • 只需稍作修改代码，就能添加新功能或进行自定义。

使用 GAS 可以实现灵活性、可扩展性以及成本效益高的优势，同时可在 Google 服务生态系统内安全运行。特别是在需要基于回复内容进行精细处理或定制的场景下，它是一个强有力的选择。

这次确认页面不在项目范围内，因此没有实现。但如果之后收到相关需求，我想尝试一下。到时候也会像备忘录一样再撰写一篇文章！

如果您在咨询表单的改版或迁移等方面遇到困难，欢迎随时联系我们！

参考网站 Zenn ryotoitoi 的文章：https://zenn.dev/ryotoitoi/articles/3cedb115d816e5