免費！提交 Google 表單後，系統自動寄送客製化 email，宣傳效果 Up！

有時我們希望使用者提交 Google 表單後，可以提供給他更多資訊（ex：活動詳細內容、宣傳廣告、友站連結…）；但 Google 表單只有在「設定 → 簡報 → 確認訊息」給你用純文字的方式表達，除了傳送內容受限制外，許多使用者在提交表單後會下意識的關閉網頁，根本沒注意到裡面寫了些什麼。

免費！提交 Google 表單後，系統自動寄送客製化 email，宣傳效果 Up！（圖 1）

前言：需求來自於實務

其實會想做這個功能，是因為不久前出版書籍後，陸續有人填寫 Google 表單回傳自己的心得。

而我這次有給填寫表單的讀者「30 分鐘免費諮詢」的回饋，但因為把諮詢的報名連結放在 Google 表單「確認訊息」的位置，導致有些讀者根本沒注意到它的存在，因此便想透過自動寄送 email，來解決這個囧境。

你也可以先體驗看看筆者完成的 Demo，只要填寫電子郵件，並在「是否願意收到電子報」的欄位選擇「是」，提交後便會收到自動發送的郵件嚕！

STEP 1 ：產生 HTML email

其實這個步驟並非必需，但為了讓寄送的 email 有基礎的質感，筆者還是決定製作一個 HTML email。

看到 HTML 先別慌，現在網路上有非常多的資源，只要拖拉點選，一行程式碼都不用寫就能產生出來，這邊筆者是使用 Beefree 這個網站提供的服務，在這裡有擁有豐富的版型供你選擇（雖然筆者還是選用空白模板）。

它的使用非常方便，你甚至可以在不註冊的狀態下製作自己的 HTML email；不過如果你擔心自己會失手關閉網頁，還是建議註冊登入。

在完成 HTML email 後，點擊右上角的 Download 會獲得一個壓縮檔，解壓縮後你會看到裡面的「beefree-xxx.html」檔，筆者建議重新命名成「email-content.html」方便辨識（這個 HTML 在後面的步驟會用到，請妥善保存）。

STEP 1 ：產生 HTML email（圖 5）

備註：

1. 免費版在最下面會有 Beefree 的 Logo，它可以在下載後透過編輯 HTML 來刪除。

2. 如果有使用到圖片，建議先上傳到 Imgur，再把產生連結貼回來（ex：https://i.imgur.com/Oonq5Gy.jpg），詳細流程這邊不再贅述。

SETP 2：建立 Google 表單

建立表單的步驟我就不再示範了，需要注意的是「電子郵件（email）」這個欄位需要設定為必填，不然你也沒有寄信的對象啊！

為了驗證 Google 表單的參數可以作為邏輯判斷使用，我這邊再新增一個「是否願意收到電子報」的問題，依照回答的「是/否」來決定要不要寄送 email。

SETP 2：建立 Google 表單（圖 6）

SETP 3：從 Google 表單產生 Google 試算表

在「回覆」的 Tab 中，點擊「Google 試算表」的 icon 便會跳出建立 Google 試算表的詢問視窗。

SETP 3：從 Google 表單產生 Google 試算表（圖 7）

下面是自動產生的 Google 試算表。

SETP 3：從 Google 表單產生 Google 試算表（圖 8）

STEP 4：從 Google 試算表建立 Apps Script

點擊工具列的「擴充功能」，再點擊「Apps Script」便會產生嚕！

STEP 4：從 Google 試算表建立 Apps Script（圖 9）

在 Apps Script 裡面用「新增檔案」建立一個 HTML，並將 STEP 1 產生的 HTML 程式碼貼回去。

STEP 4：從 Google 試算表建立 Apps Script（圖 10）

接著要撰寫 Apps Script 裡面的程式邏輯（程式碼.gs）。

我們要先抓取 Google Form 裡面提交的值，如果「是否願意收到電子報」的值為「否」，我們就跳出函式；若為「是」，我們便將 HTML email 寄出（相關注意事項請看備註描述）。

function onSubmit(datas) {
  
  // 取得提交的值（你的欄位名稱可能與我不同）
  var data = datas.namedValues;
  var replyEmail = data['電子郵件地址'][0];
  var isReceiveEDM = data['是否願意收到電子報'][0];

  if (isReceiveEDM === '否'){
    // 如果拒絕收到電子報就直接結束
    return;
  }

  // 取得上傳的 HTML 檔
  var edmHTML = HtmlService.createTemplateFromFile('email-content');
  
  // 設定HTML裡的變數
  edmHTML.data = data;
  
  // 產出成要發送的 HTML
  var output = edmHTML.evaluate().getContent();

  // 發送信件
  MailApp.sendEmail({
    to: replyEmail,
    subject: "[系統發送] 感謝您填寫「Dean Lin 的回饋表單」",
    htmlBody: output
  });
}

原始碼：email-response.gs（GitHub Gist）