使用 Google 表单创建客户表单时的陷阱

column

2024年11月27日

MW WP Form 是一款由日本开发、在 WordPress 上长期流行的插件，即将停用。这有点令人失望，因为它是一款值得信赖的插件，已被许多组织和企业网站采用。

有些客户无力开发单独的安全电子邮件表单或使用 SaaS 实现前端解决方案。一位这样的客户要求我们将他们的联系表单切换到 Google 表单。我们决定在保留现有设计的同时嵌入 Google 表单，结果我们做到了！

很多网站上都有相关的使用技巧，所以我得去查一下，不过设置过程本身很简单。有些地方有点难，所以今天就来跟大家分享一下！

作业工程

将 GoogleForms 自定义为静态页面
提交表单后使用JS跳转至提交完成页面
向使用 GAS 进行咨询的客户发送自动回复电子邮件

绊脚石

用于发送自动回复电子邮件的 GAS获取表单响应“namedValues”未定义
自动电子邮件的发件人地址是我自己的。

关于 Google 表单自定义

您不仅可以按原样安装 Google 表单，还可以将其合并到使用 HTML/CSS 创建的表单中并自定义设计！

这是我们的访客管理表，我们还将 Google Forms 纳入了表单部分。

我们不会详细介绍自定义 HTML 嵌入或提交后如何转换到完成页面。

绊脚石 #1
用于发送自动回复电子邮件的 GAS获取表单响应“namedValues”未定义

您可以实施 Google AppScript (GAS) 从链接到 Google Forms 回复的电子表格发送自动电子邮件。

当按下查询表单上的提交按钮时，将运行一个脚本，读取从链接电子表格发送的信息并将其反映在电子邮件中。

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 
  });
}

我以为我可以使用此脚本发送电子邮件，但出现了错误。

类型错误：无法读取未定义的属性（读取“您的姓名”）在回复（回复：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是触发器设置。GoogleForms蚊子电子表格请注意，内容（属性和方法）将根据您使用的方法而有所不同。

GoogleForms
e.response.getItemResponses()
电子表格
e.values　e.namedValues

包含重写脚本的电子邮件已成功到达！

但是，如果你仔细看，就会发现发件人地址是我自己的。如果这种情况持续下去，客户就会收到来自我地址的自动邮件。

绊脚石 #2
自动电子邮件的发件人地址是我自己的。

使用 GAS 时，必须设置“它将在谁的 Google 帐户下运行”。
从 GAS 发送电子邮件时，它将从“执行者的 Gmail”发送

这次我通过邀请我的账户来编辑Google表单来实现。
目前，自动电子邮件的脚本执行者设置为我，因此电子邮件是从我的地址发送的。

要将此地址设为客户端的发件人，您需要在所有者账户中重新配置。此外，“客户端查询地址”info@example.com如果要设置“作为发件人”，该如何设置？

解决方法

客户的 Gmail 地址会有一个询问地址info@example.com让他们为此设置一个别名。
在所有者帐户中重新配置触发器设置
将具有您自己的域名的电子邮件地址添加到您的帐户、脚本MailApp.sendEmail()添加可选的发件人并写下地址

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 的好处

易于使用的电子邮件定制
- 电子邮件的内容和收件人可以根据表单中提供的答案自动更改。
- 您还可以发送以 HTML 格式设计的电子邮件，这使它们看起来很棒。
可以与Google服务链接
- 响应数据会自动保存到 Google 表格中，以便于编辑和管理。
- 在 Google 日历中自动创建事件并设置提醒。
- 在 Google Drive 中组织和存储文件，以便于数据管理。
无成本
- 可在 Google Workspace 内免费使用。
- 由于不需要使用外部服务，因此可以低成本运营。
自动快速移动
- 填写完表格后，您可以立即发送电子邮件或保存数据。
- 也可以同时执行多个进程。
安全数据管理
- 由于处理是在您的 Google 帐户内完成的，因此数据泄露到外部的风险很小。
- 安全性也很可靠，所以您可以感到安全。
灵活使用
- 您可以轻松地在新表单中重复使用设置。
- 只需稍微更改代码，您就可以添加新功能并对其进行自定义。

通过使用 GAS，灵活、可扩展且经济高效它在 Google 生态系统内安全运行的同时实现了这一点，使其成为一个强大的选择，尤其是在需要根据响应进行详细处理和定制时。

这次，确认屏幕不包含在范围内，所以我没有实现它，但是如果下次有请求的话，我想尝试一下。当发生这种情况时，我会写另一篇文章作为备忘录！

如果您在修改或迁移查询表时遇到任何问题，请联系我们！

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

撰稿人

我使用 JavaScript、React 和 Next.js 开发前端项目，专注于标记语言。当我参与开发的网站成功发布时，我感到无比欣慰！我的爱好是弹吉他。我既喜欢写代码，也喜欢玩代码！

Hiratchi

前端工程师 / 2022年入职

Topics