Google 表單，提交後系統自動寄送回覆通知email - Let's Write

本篇大綱：本篇要解決的問題。

Google表單自動發送回覆信件流程圖。

1 建立Google表單，回覆的試算表點擊指令碼編輯器。

2 指令碼編輯器， ... 跳至主要內容Google表單，提交後系統自動寄送回覆通知email2021-08-212020-08-28/August2020.08.28更新：因為有人問說「有辦法針對問卷的回應答案不同，給予不同的回覆email嗎？」今天新增一個大段落用不同的寄件者信箱寄信。

2020.08.27更新：因為留言區中有人提問「可否有方法當資料欄位是空白（非必填的），在回覆時也不出現？」今天補充了當有題目是非必填，而使用者也真的沒有填時，要怎麼寫才能不出現在自動回覆的信件中。

本篇大綱本篇要解決的問題Google表單自動發送回覆信件流程圖1建立Google表單，回覆的試算表點擊指令碼編輯器2指令碼編輯器，新增HTML檔案3電子報的.html，要替換的文字寫成變數使用者沒有填寫時，不會出現在信件中4程式碼部份抓HTML檔案設定變數inlineimages夾帶附件發送電子報5設定觸發條件用不同的寄件者信箱寄信新增其他寄件地址關閉ChromeV8功能GmailApp.sendEmail參考資源本篇要解決的問題一個線上報名表，如果能在填完單後就收到回覆通知信，可以讓報名者知道自己的報名結果，這樣子的使用體驗是比較好的，至少客服不會接打來詢問報名成功沒的電話接到手軟。

現在很多線上表單都是用Google表單直接製作，但Google表單在介面上，只能選擇當有新提交時，發email給建立表單的人，而無法直接回信給報名者。

如果要發送信件給報名者，那就是要每隔一段時間用人工手動發送。

本篇要解決的問題就是：怎麼用Google表單既有的功能，在收到新提交時，可以用程式自動寄送回覆通知信給報名者。

這邊也建了一個Demo，可以在這個Google表單上填表，送出成功後會收到系統通知信：https://forms.gle/FLSqPayARHUc7FDq6Google表單自動發送回覆信件流程圖Google表單自動發送回覆信件流程圖（點擊看原圖）整體步驟如下：建立Google表單，「回覆」選擇建立試算表。

在試算表上，點擊「指令碼編輯器」指令碼編輯器上，除了預設的「程式碼.gs」，再新增一個HTML檔案新增的HTML貼上我們電子報的程式碼，需要替換的文字寫成變數形式：=變數=>編輯「程式碼.gs」：抓取上一步新增的HTML檔案、設定變數、是否要用inlineimages、是否要夾帶附件、發送電子報指令碼編輯器上點擊「現有專案的啟動程序」，在介面中新增觸發條件1建立Google表單，回覆的試算表點擊指令碼編輯器Google表單建立時，一定要有一題是請使用者填寫email，不然會不知道該寄給誰。

回覆用的試算表建立後，點擊上排的「工具」>「指令碼編輯器」：這是廣告，點擊一下可以幫本站多個一點點的廣告收入，謝謝點擊「工具」>「指令碼編輯器」接著會進到寫程式碼的介面，其實就是到了一個GoogleAppsScript的檔案上，可以在這寫程式碼，看到介面後第一步就完成了。

要注意的是，這份Google表單擁有者的帳號，就會是寄件者的帳號。

比方王小明看完了這篇，就用自己的Google帳號：[email protected]來新增了一份表單，那當他照著本篇作完（或是複製貼上完XD~），當有路人真的來填表了，收到的系統回覆信，寄件者就會寫[email protected]。

因此王小明也可以從Gmail的寄件備份中去查看到底寄了多少信出去。

如果想要用不同的信箱寄信，可看本筆記文的最後一段：用不同的寄件者信箱寄信2指令碼編輯器，新增HTML檔案新增的HTML檔案就是我們電子報的檔案，要讓GoogleAppsScript抓到HTML的檔案，就得新增在這。

滑鼠移到左上角的「檔案」>「新增」，點選「HTML檔案」：「檔案」>「新增」，點選「HTML檔案」接著取一個檔案名稱後按下確定，就新增完成。

新增完HTML檔案，會看到介面上一共有二個檔：程式碼.gs、xxx.html這是廣告，點擊一下可以幫本站多個一點點的廣告收入，謝謝新增HTML成功，會看見有程式碼.gs、xxx.html二個檔案程式碼.gs就是寫收到提交後要自動回信的JavaScript部份。

XXX.html就是寫我們回信用的電子報部份。

下一步我們先來處理電子報的內容。

3電子報的.html，要替換的文字寫成變數一般用系統自動回信，為了讓使用者感到親切，大部份都會加上對方的名字，比方：「王小明您好，很高興您這次參與本次調查」……之類的。

一般發報系統都可以加上一個變數，讓系統去自動替換，像是上面的例子就可能會寫成：「%name%您好，很高興您這次參與本次調查」，用的變數符號不一定，就看發報系統的規則。

GoogleAppsScript在HTML檔案上也有自己的變數規則，就是：=變數=>。

第一眼看的時候還以為是PHP。

另外還有一個變數，但不一定要使用，就是如果想把圖片直接寫進電子報裡，而不是外部引用時，電子報上叫「inlineimages」，inlineimages的寫法就是：這個在寫發送的程式碼那段會有補充。

本篇實作的Demo為了能反映變數這項功能，所以把Google表單上的每一題都設成變數寫進HTML裡，完整的HTML程式碼如下：91-94行就是寫入變數，之後會從程式碼.gs中抓到使用者提交的資料後做替換。

這邊寫成以下：填答時間：=data.時間戳記?> 暱稱：=data.暱稱?> 喜好：=data.喜好?> 程度：=data.程度?>可以看到變數都帶有data，這樣我們只需要命data這個變數=使用者提交的資料，一行就可以替換了。

使用者沒有填寫時，不會出現在信件中看了一下官方文件，寫在GoogleAppsScript裡的HTML檔案，可以加入if、else的判斷，上面的原始碼範例中已加入了「喜好」、「程度」這二題不為空值時，才載入

的判斷。

在HTML裡寫if、else的範例如下：4程式碼部份電子報的HTML完成後，下一步就是編輯程式碼.gs這個檔案，要做的事情有：抓取上一步新增的HTML檔案設定變數是否要用inlineimages是否要夾帶附件發送電子報抓HTML檔案varedmHTML=HtmlService.createTemplateFromFile('HTML的檔案名稱');比方August的HTML叫edm-demo.html，那就寫成以下：varedmHTML=HtmlService.createTemplateFromFile('edm-demo');設定變數我們的function會帶一個datas的參數進來，像這樣：functiononSubmit(datas){ //…… }在上一篇TelegramBot：Google表單提交時收到通知中有說，當有使用者提交表單時，我們可以收到的訊息主要都在「namedValues」這段，因此我們只要取出namedValues就可以知道新的提交有哪些資料。

functiononSubmit(datas){ //取得提交的值 vardata=datas.namedValues; varreplyEmail=data['email'][0]; //設定HTML裡的變數 varedmHTML=HtmlService.createTemplateFromFile('edm-demo'); edmHTML.data=data; }取得email欄位，是為了讓程式知道自動回覆信要回覆到哪個email。

上一段的HTML程式碼，把變數都設成了=data.暱稱=>這種前面加個data的，因此這邊我們直接把從提交中取得的值命成HTML的data就完成了變數的替換，就是這行：edmHTML.data=data;inlineimagesinlineimages是把圖片直接用base64寫進HTML中，不一定要用，用了有一個好處，就是我們一般用outlook收信時，圖片都會要按允許下載才會載入，用inlineimages的話就會直接顯示。

//將Telegram圖轉為inlineimage vartelegram='https://imgur.com/RvgV92X.png'; vartelegramBlob=UrlFetchApp.fetch(telegram).getBlob().setName("telegram"); //…… inlineImages:{ telegram:telegramBlob },夾帶附件夾帶附件很方便，可以直接抓Google雲端硬碟裡的檔案，只要知道檔案的id就行了。

取得檔案id的方法，就是對雲端硬碟中要夾帶成附件的檔案點一下，然後點選右上角表示連結的icon，就會出現一個提示框裡帶有網址：取得檔案的網址取得的網址會長這樣：https://drive.google.com/open?id=xxxxxxxxxxxxid後面的xxxxx就是這個檔案的id，有了id就可以夾帶成附件，如下：varfile1=DriveApp.getFileById('xxxxxxxxxxx'); varfile2=DriveApp.getFileById('yyyyyyyyyyy'); //…… attachments:[file1.getAs(MimeType.PNG),file2.getAs(MimeType.PNG)]//附件附件可以多個，包在陣列裡就行。

MimeType可參考說明文件。

發送電子報本篇實作的Demo，包含上述步驟的程式碼如下：5設定觸發條件有了電子報的HTML，也有了執行自動發送電子報的function，最後一步就是要設定「當使用者提交時，執行寄送回覆電子報」的觸發條件。

一樣在GoogleAppsScript的介面上，點上面那排的「編輯」>「現有專案的啟動程序」：點擊「編輯」>「現有專案的啟動程序」畫面會進入到設定觸發條件的頁面上，點擊右下角的「新增觸發條件」：設定觸發條件的頁面觸發條件的新增，只要確定好二個選項－－選擇要執行的功能、活動類型：確定好二個選項：選擇要執行的功能、活動類型選擇要執行的功能，因為我們在上一步寫程式碼時，把處理的動作都寫在onSubmit這個function中，因此這邊就選onSubmit。

活動類型指的就是什麼時候要觸發，這邊選「提交表單時」，意思就是當有人提交表單，就會執行onSubmit，onSubmit裡就是做取資料、取電子報、取附件、發送……等這一系列我們前幾步寫入的動作。

按下儲存後，Google會跟你要權限的確認，因為是我們自己寫的程式，就一律允許就行。

就這樣，當使用者提交了Google表單，系統就會自動寄發回覆信件給填單者。

最後這邊再提供一次本篇實作出的Demo：https://forms.gle/FLSqPayARHUc7FDq6自動回覆的信件中，August還放上了最近新開的Telegram頻道連結，如果想收到Let’sWrite新文章通知的朋友，歡迎加入~用不同的寄件者信箱寄信要用不同的信箱來做自動回覆信件是可以的，但有額外的設定要做，依序為：在Gmail新增其他的寄件地址GoogleAppsScript要關閉ChromeV8功能發送email換成GmailApp.sendEmail新增其他寄件地址在開GoogleAppsScript的檔案時，檔案擁有者就會是預設的寄件者，而在Gmail裡，我們可以用額外的信箱來寄信，稱為「別名Aliases」，我們的帳號新增完別名，就可以用這些別名來當作寄件者。

進到Gmail的頁面後，點選右上角的齒輪，再點「查看所有設定」：點齒輪、點查看所有設定進到設定頁，上面的頁籤點「帳戶和匯入」，下面會有一項是「選擇寄件地址」，再點擊「新增另一個電子郵件地址」，新增完後就會出現在列表中：新增別名上圖是已經新增成功的，August額外新增了2個信箱，再加上原本的，列表上會呈現出3個。

新增完其他寄件地址後，我們就可以用這些信箱來讓系統自動寄信。

關閉ChromeV8功能進到GoogleAppsScript，需要先關掉ChromeV8的功能，這樣在抓別名進來時才不會報權限不足的錯誤而卡住。

GoogleAppsScript的頁面上點上排的「執行」，接著點「停用……」的那排（字太長懶得打，直接看下面截圖XD）：停用ChromeV8功能停用後，最後就是改我們的程式碼。

GmailApp.sendEmail文件：getAliases()、sendEmail(recipient,subject,body,options)在發送信件的函式，原本我們是用MailApp.sendEmail，但為了能用不同的寄件信箱，我們得改用GmailApp.sendEmail。

以下的程式碼，會示範：判斷第三題「喜好」的答案，因答案不同，而使用不同的寄件信箱，以及不同的寄件者名稱。

取得所有寄件地址在第一步中我們建立了Gmail上的「其他寄信地址」，這一段程式碼是取得主帳號的信箱+其他寄件地址：我們可以包成一個function，然後用Logger.log(aliases)去看aliases的陣列順序。

寄送信件寄送信件的function如下：完整的範例程式碼參考資源ClassMailAppHowtosendHTMLemailinGoogleAppsScript收藏此筆記：FacebookTwitterTelegramPocket電子郵件列印SummaryArticleNameGoogle表單，提交後系統自動寄送回覆通知emailDescription本篇大綱：本篇要解決的問題。

Google表單自動發送回覆信件流程圖。

1建立Google表單，回覆的試算表點擊指令碼編輯器。

2指令碼編輯器，新增HTML檔案。

3電子報的.html，要替換的文字寫成變數。

4程式碼部份。

5設定觸發條件。

用不同的寄件者信箱寄信。

AugustusAugustusLet'sWriteLet'sWritehttps://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg隨選筆記文VueNuxt.js引用FirebaseSDKCLI,Firebase,Nuxt,Plugin,SDKAPIInstagramEmbedding抓iframe高度及3種大小圖片iframe,InstagramAPI用PerformanceAPI檢測檔案讀取時間JavaScript,Performance,SEOFront-Endmailto:點擊連結開啟寄送emailEmail,HTML,mailto,參數BotTelegram在網頁上嵌入Telegram頻道廣播訊息Widget,嵌入,訊息Front-EndFileAPI客製上傳檔案按鈕/inputfileAPI,HTML,input,JavaScript,Label,資料PWAPWA學習筆記–4：manifest.jsonApp,JSON,Manifest,PWAFront-EndGitLabPages：3+2個步驟讓GitLab專案產生靜態頁GitLab,HTML,資料VueVueCLI安裝TailwindCSSCLI,CSS,PostCSS,TailwindCSSFront-EndSpeechSynthesisUtterance讓瀏覽器說話Chrome,Google,Promise,參數,語音以下是留言，但關於留言的部份必需先讓你們知道：本站的文章都是August因為覺得有趣，才會實作並整理成筆記文而後進行發表。

如果留言是希望把Demo改成「你想要」的樣子，或是把功能改成「符合你需求」的樣子，Sorry~除非那修改是August也有興趣的，不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。

😎另外，公開信箱是為了讓金流驗證用，因為之前遇過幾次回信協助解決問題後，對方卻一聲謝謝也沒有，就這樣拿去幫工作交差。

因此決定不再回覆信件，有疑問就利用留言功能囉。

搜尋關鍵字:Translate简体中文繁體中文English日本語最新文章用Day.js把秒數轉換為時間前端POST檔案後，用Node.js把檔案傳上FTPFirebaseRealtimeDatabase常用功能筆記FirebaseAuthentication第三方登入–GitHubFirebaseAuthentication第三方登入–Google、FB用JavaScript監聽頁面/頁籤被關閉的事件如何用GoogleSheets/Excel當作資料庫2種快速安裝、使用TailwindCSS的方式大家都在看Vue.js3CompositionAPI基本學習筆記-1：Ref、Props、watch、生命週期WebSocket基本介紹及使用筆記Google表單，輸入ID後自動帶入其它欄位資料LIFFv2基本使用筆記及範例Google表單，提交後系統自動寄送回覆通知emailWord、Excel合併列印功能使用筆記完全客製Google表單，美化表單樣式MacBook用隨身碟執行Windows10：WindowsToGo、WinToUSB請作者一杯咖啡？寫文章需要咖啡提神，回答問題需要時間及心力。

如果覺得本站文章對工作有幫助、技術有進步，或是問題有得到解答，歡迎請本站喝杯咖啡。

中杯60元、大杯90元，加碼特大杯120元。

你請的每一杯咖啡，對本站來說都是莫大鼓勵:)請喝咖啡（台灣）Buymeacoffee（Foreign）H**l*yHe**y小*瓜ki*******37A**yS**Y**C**R****_L**I**nM******C**uR***y曾*M**L**O放個廣告賺點養主機的$$，謝謝Let’sWrite來訪人數位大大相挺，謝謝。

（如何製作來訪人數？）訂閱新文章通知直接加入Telegram的頻道，有最新文章時會收到廣播通知：DMCAProtection放個廣告賺點養主機的$$，謝謝Let'sWrite前端工程師August的學習筆記—solvingproblems,insimpleways.APIFront-EndGoogleBotVuePWAWordPressFollowusFBTelegramGitHubIGTwitter網站地圖隱私權政策[email protected]（金流驗證用）請喝咖啡（台灣）Buymeacoffee（Foreign）傳送到電子郵件地址你的姓名你的電子郵件地址取消文章未送出─請檢查你的電子郵件地址！電子郵件地址檢查失敗，請再試一次抱歉，你的網誌無法透過電子郵件分享