使用GoogleForm创建客户表单时的常见陷阱

WordPress 中长期被使用的日本开发插件 MW WP Form 即将停止维护。考虑到这款插件在许多组织和企业网站中被广泛采用并享有信誉，这确实有些遗憾。

有些客户无法为开发安全的邮件表单或使用 SaaS 进行前端实现投入过高的成本。在这样的情况下，我们收到了将联系表单切换为 Google Form 的请求。与其如此，我们决定保留现有设计风格，以嵌入式的方式实现 Google Form。最后成功完成了实现！

虽然有很多网站上都刊登了相关的诀窍，需要一边确认一边进行，但整个导入过程本身非常简单。不过也有一些部分让我们花了一些功夫，所以这次想分享一下那些要点！

工作流程

• 将 Google Form 自定义为静态页面
• 表单提交后用 JavaScript 跳转至完成页面
• 使用 Google Apps Script 向咨询客户发送自动回复邮件

遇到的问题

• 在使用 GAS 发送自动回复邮件时，获取表单答案的"namedValues"为 undefined
• 自动发送的邮件发送者地址变成了我的地址

  　

关于 Google Forms 定制

Google Forms 不仅可以直接部署，还可以嵌入到使用 HTML/CSS 创建的表单中进行设计自定义！

这是我们公司的访客登记表，其中的表单部分也内嵌了 Google Forms。

关于将其嵌入 HTML 的自定义、提交后跳转到完成页面的方法，本次暂不详细说明。

遇到的问题1：
使用GAS发送自动回复邮件时，获取表单回答的"namedValues"为undefined

可以在与 Google Forms 回答关联的电子表格中实现 Google App Script（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: 无法读取 undefined 的属性(读取'お名前')at reply(reply:3:29)

找不到第一项"姓名"。

不知道是否成功获取了…下面确认一下

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

使用重写后的脚本，邮件成功送达了！

……但是，仔细看的话，发件人显示的是我自己的邮箱地址。这样下去，我的邮箱就会向客户自动发送邮件。

第二个问题
自动发送的邮件显示为来自我的邮箱地址

• GAS 必须始终设置"在哪个 Google 账户下运行"。
• 从 GAS 发送电子邮件时，将通过"执行者的 Gmail"进行发送

这次我被邀请拥有Google Form的编辑权限，并进行了实现。
目前，自动发送邮件的脚本执行者是我，所以邮件会从我的地址发送。

如需将此设为客户端发件人，需要用所有者账户重新设置。此外，如果客户端提出"希望将客户端的专用咨询地址info＠example.com设为发件人"的要求，设置方式为...?"

解决方案

• 在客户端的Gmail地址中将咨询用地址info＠example.com设置为别名。
• 在所有者账户中重新设置触发器设置
• 向账户添加自定义域名的电子邮件地址，在脚本中的MailApp.sendEmail()里添加可选的 from 参数，并填写地址

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

添加自定义域名地址是什么

通过添加账户，您可以使用info＠example.com这样的邮箱地址发送邮件。
换句话说，在从Gmail发送邮件时，您可以选择「info＠example.com」作为发件人地址。这就像一个子地址的概念。

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

因此，最简单也是最好的流程是：
在所有者账户中添加联系用的info＠example.com地址 → 在所有者账户中进行触发器设置。

需要注意的是，自动发送的邮件将以Gmail的名义发送，因此会不断堆积在「已发送」文件夹中。
※如果不想让发送文件夹堆满邮件，也可以创建一个专用账户。

总结

Google Forms本身也有简单的自动发送功能，但无法自定义邮件主题和内容。
使用其他扩展功能的话，免费版每天的自动回复上限为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