Google Apps Script 搭配 HTML 客製 Google 表單的回應信件 （2021 鐵人賽 D5）

關於寄信可以進入比較進階的操作。但一樣先講結論，如果你很急著用，可以直接使用這份 Add-On: Form Notification，這是 Google Cloud 官方開發的 Add-On，可信度很高。自己寫的好處是，如果你突然想要寄送像是網頁般的內容（HTML-Based）的內容的話，你可以知道怎麼做。讓我們開始吧！

提醒：本篇需要一點點的 HTML 知識，一樣是你大概有刷過 W3C 的應該就還可。

目標

今天學妹問你說，「先輩，我們新活動能不能在報名時，就依據他的意願，給他不同的客製化回答呀？」身為一個工具師，當然義不容辭地試試。今天的關鍵問題是…

「如何依據 Google 表單的回應客製化回應信件？」

網路上流傳的一種解法 是可行但相對，但有沒有另外比較靠（厲）譜（害）的寫法？也就因此有了這篇。

如何依據 Google 表單的回應客製化回應信件？

假設我們今天想要「依據使用者回應的交通方式，給予不同的交通方式說明」。這次希望加上簡單的 HTML 的運用。

Step 1 開啟 Google 表單，並從回應的連結中串起 GAS

好，今天我們開一個新的 Google 表單，並將其回應連結到 GAS。

一樣執行時會有「需要驗證」出現，讓我借用一下 D2 的影片。

Step 2 取得 Google Sheet 裡面的回應資料並準備寄信

那這邊，就會需要跟 D4 一樣，讀取回應，假設我們今天收到這樣的回應們。

因為跟 D4 差不多，主要是設定範圍並取得資料，這邊我們就加速帶過。

function readData() {
  let sheet = SpreadsheetApp.getActiveSheet();
  let startRow = 2;
  let startCol = 2;
  let numRows = 5;
  let numCols = 2;
  let dataRange = sheet.getRange(startRow, startCol, numRows, numCols);
  let data = dataRange.getValues();
  
  return data
}

function sendEmails() {
  let data = readData();
  for (let i in data) {
    let row = data[i];
    let emailAddress = row[0];
    let subject = "Hello";
    let message = "Content";
    MailApp.sendEmail(emailAddress, subject, message);
  }
}

這樣在執行時，就會對表單中的收信者，寄出一封名為 “Hello” 的信件。

Step 3 設定客製化的內容

學妹希望針對自行開車的，給予開車路線；也希望針對大眾運輸的，給予大眾運輸的路線，兩個我們都用圖片（網址）來給予。先簡單做了個示意圖，汽車和捷運的網址分別是 https://i.imgur.com/m9zCXUV.png 和 https://i.imgur.com/h5kT4Fm.png 。之後我們再聊怎麼樣寄出 Google Drive 裡面的檔案。

那設定方式就可以是簡單弄一個 function 來達到，進階班的朋友也可以用三元運算子（Conditional Operator）來寫這段。

function customContent(commute_way){
  if(commute_way == "大眾運輸"){
    return "大眾運輸請參考: https://i.imgur.com/h5kT4Fm.png";
  }else if (commute_way == "自行開車"){
    return "開車請參考: https://i.imgur.com/m9zCXUV.png";
  }
}

function sendEmails() {
  let data = readData();
  for (let i in data) {
    let row = data[i];
    let emailAddress = row[0];
    let subject = "Subject";
    let message = customContent(row[1]);
    Logger.log(emailAddress +" "+ message);
    // MailApp.sendEmail(emailAddress, subject, message);
  }
}

然後 Print 一下看有沒有給予不同的內容。確定都有跟表單上一樣，開車給開車的，捷運給捷運的，沒問題後就進到下一階段。

Step 3-1 用 createHtmlOutput 寄出可以直接讀取的信件

好，那如果不想還要點連結，除了作為附件（之後會教）外，還有什麼其他的方式？在 GAS 當中，我們是透過用信件送出 HTML 的，收信人預計會收到一個簡單的 HTML 檔案長這樣——

一樣，我們看程式碼。

function customContent(commute_way){
  if(commute_way == "大眾運輸"){
    return HtmlService.createHtmlOutput('<span>請參考地圖移動：\
                                               <img src="https://i.imgur.com/h5kT4Fm.png" \
                                                alt="大眾運輸地圖"> \
                                        </span>');
  }else if (commute_way == "自行開車"){
    return HtmlService.createHtmlOutput('<span>請參考地圖移動：\
                                               <img src="https://i.imgur.com/m9zCXUV.png" \
                                                alt="自行開車地圖"> \
                                        </span>');
  }
}

function sendEmails() {
  let data = readData();
  for (let i in data) {
    let row = data[i];
    let emailAddress = row[0];
    let subject = "Subject";
    let message = customContent(row[1]);
    MailApp.sendEmail({
      to: emailAddress,
      subject: subject,
      htmlBody: message.getContent()
  });
  }
}

基本上是直接在 HtmlService.createHtmlOutput() 中寫上你的簡易 HTML 程式碼。並在 MailApp.sendEmail 寄送的部分使用 htmlBody 來送出，記得要在內容的部分加用 getContent() 。這是針對簡易版的 HTML，就幾行而已的那種。

但如果是複雜版的，可能有動畫、大小差異的，又要怎麼處理？此時就要透過 createTemplateFromFile 了。

Step 3-2 用 createTemplateFromFile() 寄出可以直接讀取的信件

要使用 createTemplateFromFile()，那我們就會需要 template HTML，而 GAS 裡面是可以做到直接創建的。在檔案的 ＋ 上按下新增並輸入想要的名字。在程式碼的部分，再透過 HtmlService.createTemplateFromFile('mrt') 來呼叫。記得不用再加上 .html，純粹呼叫 mrt 即可。

完整的程式碼在這——

function customContent(commute_way){
  if(commute_way == "大眾運輸"){
    return HtmlService.createTemplateFromFile('mrt')
  }else if (commute_way == "自行開車"){
    return HtmlService.createTemplateFromFile('driving')
  }
}

function sendEmails() {
  let data = readData();
  for (let i in data) {
    let row = data[i];
    let emailAddress = row[0];
    let subject = "Subject";
    let message = customContent(row[1]);
    MailApp.sendEmail({
      to: emailAddress,
      subject: "Your application is approved!",
      htmlBody: message.evaluate().getContent()
    });
  }
}

最後功能會如下的運作， 這邊用 Step 3-2 的方式示範，但 Step 3-1 的 Code 也有試過，都行。

透過在 GAS 中創建 HTML File，將其用 HtmlService.createTemplateFromFile 引用為 Template，再在 MailApp.sendEmail({htmlBody}) 中讀取。這邊要注意的是，和 createHtmlOutput 相比，這邊的內容在寄出之前，是使用 message.evaluate().getContent() 這之後再跟大家說明細節。

如果希望在不同時間觸發，可以搭配 D3 的 Trigger，或是想要打包成按鈕、UI，則可以透過 D2 的打包說明。之後會跟大家說明如何將回應整合進 Google Calendar，並再更之後會說明如何即時的在有人回應表單時，就即時回傳客製化的內容。

好，那今天我們知道了要怎麼樣：

1. 單次性針對 Google 表單的結果創建客製化的回應
2. 客製化的回應中，寄送 HTML 的信件。
3. 透過 createTemplateFromFile 和 createTemplateFromFile 加入簡單與複雜的 HTML 檔案。

原本預計要說「依據表單結果客製化回應說有沒有報名成功」，但發現篇幅有點多（五千六百多字了囧），所以會拉到之後講。

下一篇會繼續介紹怎麼將「表單中的回應」丟到「Google Calendar」當中。的方式，如果不想錯過可以訂閱按讚小鈴鐺（？），也歡迎留言跟我說你還想知道什麼做法/主題。如果有執行上的疑問，透過留言之外，也可以到 Facebook Group，想成立了幾年。我們明天見。