html - 通过电子邮件发送表单并在电子表格中跟踪回复

Question

我正在使用 Google Apps 脚本发送电子邮件 - 我知道该怎么做。我想嵌入“是或否”回复链接或多项选择题，并将收件人的回复记录在 Google 电子表格中。

我该怎么做？

Answer 1

此工作流中涉及的组件是:

• 用于生成和发送带有 HTML 表单的电子邮件的脚本。
• 该电子邮件的 HTML 模板，它允许我们为每个收件人自定义电子邮件。
• doPost() 函数来处理响应。脚本必须是 deployed as a Web App .
• 用于收集回复的电子表格。该脚本将包含在电子表格中，并使用用于发送调查副本的菜单扩展电子表格 UI。 (它可以适用于独立使用，无需 UI 组件。)

下面是此类工作流程的一个示例，进行通勤调查。收件人将收到这样的调查电子邮件:

如果电子邮件客户端支持该功能，收件人可以直接在其电子邮件客户端中填写表格。回复将收集在电子表格中，如下所示:

^{_{在运行脚本之前自行创建电子表格标题。}}

已添加“序列号”列以说明将响应与特定受访者相关联的方法；请注意，有些条目会重复。当生成调查电子邮件时，它会获得一个唯一的序列号，然后作为隐藏值与回复一起传回。例如，我们可以扩展该系统以识别来自受访者的更新。

现在，代码。 (这也是 available as a gist 。)

emailTemplate.html

<div>
  <form action="<?= scriptUrl ?>" method="Post">
  <table>
  <tr>
  <td>
    <label for="commute">Do you commute to work?</label>
    </td>
    <td>
    <select name="commute">
      <option>Yes</option>
      <option>No</option>
    </select>
    </td>
  </tr>
  <tr>
    <td>
    <label for="vehicle">If "Yes", how do you get to work?</label>
    </td>
    <td>
      <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
      <input type="checkbox" name="vehicle" value="Car">I have a car
    </td>
  </tr>
  <tr>
    <td>
    <!-- A Hidden field is a handy way to pass information to the
         Server-side POST handler. For example, a serial number could
         be used to collate responses from a particular recipient. -->
    <input type="hidden" name="serial" value="<?= serialNumber ?>" />
    </td>
    <td>
    <input type="submit" value="Submit" />
    </td>
  </tr>
  </table>
  </form>
</div>

代码.gs

// doPost needs the spreadsheet ID, it has no concept of "active spreadsheet".
var _spreadsheetId = '--- Spreadsheet ID ---';

// Add custom menu with option to send survey
function onOpen() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet();
  var entries = [{
    name : "Send Survey",
    functionName : "sendSurvey"
  }];
  sheet.addMenu("Custom Menu", entries);
};

/**
 * Build & Send Survey, an HTML form in email.
 */
function sendSurvey() {
  var recipient = Browser.inputBox("Send Survey", "Enter Recipient Email", Browser.Buttons.OK_CANCEL);
  if (recipient === 'cancel') return;

  var subject = 'Commuting Survey';

  // Get the URL of the published Web App, to include in email for POST of response
  var scriptUrl = ScriptApp.getService().getUrl();
  if (!scriptUrl) throw new Error( 'You must Deploy as Web App first.' ); 

  // Build email body
  var template = HtmlService.createTemplateFromFile('emailTemplate');
  template.scriptUrl = scriptUrl;
  template.serialNumber = getGUID();  // Generate serial number for this response
  var html = template.evaluate().getContent();

  // During debugging, send emails to self. Remove this line for real operation.
  recipient = Session.getActiveUser().getEmail();  

  // Send email form
  GmailApp.sendEmail(recipient, subject, 'Requires HTML', {htmlBody:html} );

  Browser.msgBox("Survey Sent");
}

/**
 * POST handler for responses; 
 */
function doPost(e) {
  Logger.log(e);
  var ss = SpreadsheetApp.openById(_spreadsheetId);
  var sheet = ss.getSheets()[0];  // Assume first sheet collects responses

  // Build a row of data with timestamp + posted response
  var row = [
    new Date(),                     // Timestamp
    e.parameters.serial[0],         // Serial Number
    e.parameters.commute[0],        // Commuter? Yes / No
    e.parameters.vehicle.join(',')  // Vehicle
  ];

  // Make sure we are the only people adding rows to the spreadsheet
  var lock = LockService.getPublicLock();
  // Wait for up to 30 seconds for other processes to finish.
  var locked = lock.tryLock(30000);

  if (locked) {
    // Save response to spreadsheet
    var rowNum = sheet.getLastRow()+1;
    sheet.getRange(rowNum, 1, 1, row.length).setValues([row]);

    // Release the lock so that other processes can continue.
    lock.releaseLock();
    var result = "Response Recorded: \n  "+row.join('\n  ');
  }
  else {
    // Failed to get lock
    result = "System busy, please try again.";
  }

  // Report result of POST, in plain text
  return ContentService.createTextOutput(result)
                       .setMimeType(ContentService.MimeType.TEXT);
}


/**
 * Returns an rfc4122 version 4 compliant GUID / UUID string
 * Thanks to @broofa!
 * http://stackoverflow.com/a/2117523/1677912
 */
function getGUID() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
    return v.toString(16);
  });
}

部署

按原样使用此调查系统:

1. 在您的云端硬盘帐户中创建一个新的电子表格。在第 1 行中添加“时间戳”、“序列号”、“通勤者？”和“车辆”的标题。
2. 工具 - 脚本编辑器。复制 Code.gs 内容。复制电子表格的 ID，并更新文件顶部的 _spreadsheetId 变量。保存。
3. 文件 - 新的 HTML 文件，将文件命名为 emailTemplate。复制 emailTemplate.html 内容。保存。
4. 发布 - 部署为 Web 应用程序...让任何人(包括匿名用户)都可以访问它。 (在 Google Apps 域中，您可以将其限制为域中的用户。)
5. 通过重新加载电子表格或在编辑器中运行 onOpen 函数来授权脚本。

准备出发!您会在电子表格中找到一个“自定义菜单”，其中包含“发送调查”命令。