0. 前言
在生活中我們時常透過線上表單報名活動，但很多只會在會前提醒而沒有立即告知用戶是否報名成功，造成不必要的焦慮。另外透過設計良好的信件樣式，也能讓參與者感受到不同的專業性。
那麼接下來我們就試試當用戶提交表單時寄送立即性的通知給對方吧。
1. 重點
2. 內容
2.1. 信件寄送
以下是最基礎版的，針對用戶清單寄送 plain-text 純文字的訊息。其中 subject 指的是信件標題，而 body 則是信件內容，收件者除單目標外也支援 List 讀取一次寄送給多位用戶。
JavaScript
// Sending plain text email
function textEmail(email) {
const subject = "Thank you for your submission";
const body = `Welcome to the course`;
// Send the email
GmailApp.sendEmail(email, subject, body);
}但你是否好奇過為何訂閱的週報總那麼好看？這是因為那些信件是透過 HTML 格式排版過的。我們就要依靠 htmlBody 參數傳輸內容。而我們讀取的是專案中的 htmlBody.html 檔案內容進行傳輸，那範例程式在本篇的最底部。另外我們平時作系統方的確認，通常也會有 cc / bcc 給內部信箱作留存，其架構則固定要求為 List 格式。而配送附件的方式我們以下也有列出，可以看到其綁定時是依靠 File Class 的物件陣列進行存取。
另外當然還有許多設定，比如：回應哪封信件，客製化寄件人姓名 … 等，各位能在看參考資料 [1] 。
JavaScript
// Sending colourful HTML email
function htmlEmail(email) {
const subject = "Thank you for your submission";
const body = `Welcome to the course`;
// CC
const ccList = ['YOUR_EMAIL'];
// Attachments
const file_001 = DriveApp.getFileById('FILE_001_ID');
const file_002 = DriveApp.getFileById('FILE_002_ID');
const attachments = [file_001, file_002];
// HTML
const htmlBody = HtmlService.createHtmlOutputFromFile('htmlBody').getContent();
// Send the email
GmailApp.sendEmail(email, subject, body, { htmlBody: htmlBody, cc: ccList.join(','), attachments: attachments });
}2.2. 表單回應
提到要在用戶遞交表單時觸發方法我們就要依靠 onSubmit 這個 Trigger 方式進行處理，而其實這些觸發器本身通常會傳入物件幫助進行處理，也就是寫程式常聽見的 event（常用 e 縮寫）。
在過程中，我們依靠 event.response 取得用戶的表單回應，再後續透過 getRespondentEmail() 讀取提交者的信箱。那理所當然我們的表單便要開啟紀錄信箱的功能，看選擇自動偵測或手動輸入都一樣格式。這邊不建議自己設定 QA 讓用戶填寫信箱，原因在於處理上困難許多。
JavaScript
// Send email to user on sumbitting the form
function sendEmail(event) {
console.warn(`# RUN - sendEmail()`);
try {
console.warn(`@ Reading Form Response`);
// Get the submitted form response
const response = event.response;
// Get the email address from the form response
const email = response.getRespondentEmail();
console.warn(`@ Sending Email to User`);
// textEmail(email);
htmlEmail(email);
} catch (error) { console.error(error); }
console.warn(`# END - sendEmail()`);
}那後續就是呼叫我們前面介紹的兩個方法，傳輸不同種類的信件啦！
2.3. 表單遞交
我們接著設定以下 Trigger，並簡易設計完表單並提交後應該會取得以下結果。
3. 後話
那這篇我們簡單提到突如取得提交者的信箱並寄送信件，而下期則會深入到用戶回答的部分，並透過 regex 與 split 進行日期的擷取，而後接續更動 Calendar 事件。
那我們下次再見 ~~
4. 參考
[1] GmailApp.sendEmail() — Official Doc
https://developers.google.com/apps-script/reference/gmail/gmail-app#sendemailrecipient,-subject,-body,-options
[2] Class FormResponse — Official Doc
https://developers.google.com/apps-script/reference/forms/form-response
5. 素材
[1] 圖片素材 by QuAn_
https://www.pixiv.net/users/6657532
[2] 範例 HTML 碼
HTML
<!-- https://unlayer.com/templates/online-course -->
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<title></title>
<style type="text/css">
@media only screen and (min-width: 620px) {
.u-row {
width: 600px !important;
}
.u-row .u-col {
vertical-align: top;
}
.u-row .u-col-50 {
width: 300px !important;
}
.u-row .u-col-100 {
width: 600px !important;
}
}
@media (max-width: 620px) {
.u-row-container {
max-width: 100% !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
.u-row .u-col {
min-width: 320px !important;
max-width: 100% !important;
display: block !important;
}
.u-row {
width: 100% !important;
}
.u-col {
width: 100% !important;
}
.u-col>div {
margin: 0 auto;
}
}
body {
margin: 0;
padding: 0;
}
table,
tr,
td {
vertical-align: top;
border-collapse: collapse;
}
p {
margin: 0;
}
.ie-container table,
.mso-container table {
table-layout: fixed;
}
* {
line-height: inherit;
}
a[x-apple-data-detectors='true'] {
color: inherit !important;
text-decoration: none !important;
}
table,
td {
color: #000000;
}
#u_body a {
color: #0000ee;
text-decoration: underline;
}
</style>
</head>
<body class="clean-body u_body"
style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;background-color: #ffffff;color: #000000">
<!--[if IE]><div class="ie-container"><![endif]-->
<!--[if mso]><div class="mso-container"><![endif]-->
<table id="u_body"
style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;min-width: 320px;Margin: 0 auto;background-color: #ffffff;width:100%"
cellpadding="0" cellspacing="0">
<tbody>
<tr style="vertical-align: top">
<td style="word-break: break-word;border-collapse: collapse !important;vertical-align: top">
<!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center" style="background-color: #ffffff;"><![endif]-->
<!--[if gte mso 9]>
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;min-width: 320px;max-width: 600px;">
<tr>
<td background="https://cdn.templates.unlayer.com/assets/1597211254070-1597165113823-Lessons_Hero_Desktop_2x.jpg" valign="top" width="100%">
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px;">
<v:fill type="frame" src="https://cdn.templates.unlayer.com/assets/1597211254070-1597165113823-Lessons_Hero_Desktop_2x.jpg" /><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div class="u-row-container" style="padding: 0px;background-color: transparent">
<div class="u-row"
style="margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: #bbe2ec;">
<div
style="border-collapse: collapse;display: table;width: 100%;height: 100%;background-image: url('images/image-6.jpeg');background-repeat: no-repeat;background-position: center top;background-color: transparent;">
<!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px;background-color: transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-image: url('images/image-6.jpeg');background-repeat: no-repeat;background-position: center top;background-color: #bbe2ec;"><![endif]-->
<!--[if (mso)|(IE)]><td align="center" width="600" style="width: 600px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
<div class="u-col u-col-100"
style="max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;">
<div style="height: 100%;width: 100% !important;">
<!--[if (!mso)&(!IE)]><!-->
<div
style="box-sizing: border-box; height: 100%; padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;">
<!--<![endif]-->
<table style="font-family:helvetica,sans-serif;" role="presentation" cellpadding="0"
cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td
style="overflow-wrap:break-word;word-break:break-word;padding:40px 10px 10px;font-family:helvetica,sans-serif;"
align="left">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding-right: 0px;padding-left: 0px;" align="center">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table style="font-family:helvetica,sans-serif;" role="presentation" cellpadding="0"
cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td
style="overflow-wrap:break-word;word-break:break-word;padding:17px 10px 10px;font-family:helvetica,sans-serif;"
align="left">
<div
style="font-size: 14px; color: #2f3033; line-height: 140%; text-align: left; word-wrap: break-word;">
<p style="font-size: 14px; line-height: 140%; text-align: center;">
<span style="font-size: 28px; line-height: 39.2px;"><strong>Learn smart from home.</strong></span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
<table style="font-family:helvetica,sans-serif;" role="presentation" cellpadding="0"
cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td
style="overflow-wrap:break-word;word-break:break-word;padding:0px 9px 9px;font-family:helvetica,sans-serif;"
align="left">
<div style="font-size: 14px; line-height: 180%; text-align: left; word-wrap: break-word;">
<p style="font-size: 14px; line-height: 180%; text-align: center;">
<span style="font-size: 16px; line-height: 28.8px;">Lorem ipsum dolor sit amet, consectetuer adipiscing </span>
</p>
<p style="font-size: 14px; line-height: 180%; text-align: center;">
<span style="font-size: 16px; line-height: 28.8px;">elit, sed diam nonummy nibh euismod tincidunt</span>
</p>
<p style="font-size: 14px; line-height: 180%; text-align: center;">
<span style="font-size: 16px; line-height: 28.8px;"> ut laoreet dolore magna aliq</span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
<table style="font-family:helvetica,sans-serif;" role="presentation" cellpadding="0"
cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td
style="overflow-wrap:break-word;word-break:break-word;padding:23px 10px 50px;font-family:helvetica,sans-serif;"
align="left">
<!--[if mso]><style>.v-button {background: transparent !important;}</style><![endif]-->
<div align="center">
<!--[if mso]><table border="0" cellspacing="0" cellpadding="0"><tr><td align="center" bgcolor="#55ceed" style="padding:15px 40px;" valign="top"><![endif]-->
<a href="https://babaochou2420.com" target="_blank" class="v-button"
style="box-sizing: border-box;display: inline-block;text-decoration: none;-webkit-text-size-adjust: none;text-align: center;color: #FFFFFF; background-color: #55ceed; border-radius: 4px;-webkit-border-radius: 4px; -moz-border-radius: 4px; width:auto; max-width:100%; overflow-wrap: break-word; word-break: break-word; word-wrap:break-word; mso-border-alt: none;font-size: 14px;">
<span style="display:block;padding:15px 40px;line-height:120%;"><strong><span style="font-size: 14px; line-height: 16.8px;">Start Tutor Pro</span></strong></span>
</a>
<!--[if mso]></td></tr></table><![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
<!--[if (!mso)&(!IE)]><!-->
</div>
<!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td><![endif]-->
<!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
</div>
</div>
</div>
<!--[if gte mso 9]>
</v:textbox></v:rect>
</td>
</tr>
</table>
<![endif]-->
<div class="u-row-container" style="padding: 0px;background-color: transparent">
<div class="u-row"
style="margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: #000000;">
<div
style="border-collapse: collapse;display: table;width: 100%;height: 100%;background-color: transparent;">
<!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px;background-color: transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: #000000;"><![endif]-->
<!--[if (mso)|(IE)]><td align="center" width="600" style="width: 600px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
<div class="u-col u-col-100"
style="max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;">
<div style="height: 100%;width: 100% !important;">
<!--[if (!mso)&(!IE)]><!-->
<div
style="box-sizing: border-box; height: 100%; padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;">
<!--<![endif]-->
<table style="font-family:helvetica,sans-serif;" role="presentation" cellpadding="0"
cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td
style="overflow-wrap:break-word;word-break:break-word;padding:18px 20px 7px;font-family:helvetica,sans-serif;"
align="left">
<div
style="font-size: 14px; color: #ced4d9; line-height: 170%; text-align: left; word-wrap: break-word;">
<p style="font-size: 14px; line-height: 170%;">
<span style="font-size: 18px; line-height: 30.6px;">Contact</span></p>
</div>
</td>
</tr>
</tbody>
</table>
<table style="font-family:helvetica,sans-serif;" role="presentation" cellpadding="0"
cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td
style="overflow-wrap:break-word;word-break:break-word;padding:0px 20px 9px;font-family:helvetica,sans-serif;"
align="left">
<div
style="font-size: 14px; color: #9c9ca0; line-height: 140%; text-align: left; word-wrap: break-word;">
<p style="font-size: 14px; line-height: 140%;">
<span style="font-size: 14px; line-height: 19.6px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunreet dolore magna aliquam erat volutpatamet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincna aliquam erat volutpaUt wisi enim ad </span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
<table style="font-family:helvetica,sans-serif;" role="presentation" cellpadding="0"
cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td
style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:helvetica,sans-serif;"
align="left">
<table height="0px" align="center" border="0" cellpadding="0" cellspacing="0" width="96%"
style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;border-top: 1px solid #6e7074;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">
<tbody>
<tr style="vertical-align: top">
<td
style="word-break: break-word;border-collapse: collapse !important;vertical-align: top;font-size: 0px;line-height: 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">
<span> </span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if (!mso)&(!IE)]><!-->
</div>
<!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td><![endif]-->
<!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
</div>
</div>
</div>
<div class="u-row-container" style="padding: 0px;background-color: transparent">
<div class="u-row"
style="margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: #000000;">
<div
style="border-collapse: collapse;display: table;width: 100%;height: 100%;background-color: transparent;">
<!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px;background-color: transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: #000000;"><![endif]-->
<!--[if (mso)|(IE)]><td align="center" width="300" style="width: 300px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
<div class="u-col u-col-50"
style="max-width: 320px;min-width: 300px;display: table-cell;vertical-align: top;">
<div style="height: 100%;width: 100% !important;">
<!--[if (!mso)&(!IE)]><!-->
<div
style="box-sizing: border-box; height: 100%; padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;">
<!--<![endif]-->
<table style="font-family:helvetica,sans-serif;" role="presentation" cellpadding="0"
cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td
style="overflow-wrap:break-word;word-break:break-word;padding:17px 20px 9px;font-family:helvetica,sans-serif;"
align="left">
<div
style="font-size: 14px; color: #9c9ca0; line-height: 140%; text-align: center; word-wrap: break-word;">
<p style="font-size: 14px; line-height: 140%;">
<span style="font-size: 12px; line-height: 16.8px;">HOME / CONTACT / COURSES / TERMS</span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
<!--[if (!mso)&(!IE)]><!-->
</div>
<!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td><![endif]-->
<!--[if (mso)|(IE)]><td align="center" width="300" style="width: 300px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
<div class="u-col u-col-50"
style="max-width: 320px;min-width: 300px;display: table-cell;vertical-align: top;">
<div style="height: 100%;width: 100% !important;">
<!--[if (!mso)&(!IE)]><!-->
<div
style="box-sizing: border-box; height: 100%; padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;">
<!--<![endif]-->
<table style="font-family:helvetica,sans-serif;" role="presentation" cellpadding="0"
cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td
style="overflow-wrap:break-word;word-break:break-word;padding:10px 10px 25px 20px;font-family:helvetica,sans-serif;"
align="left">
<div align="center">
<div style="display: table; max-width:247px;">
<!--[if (mso)|(IE)]><table width="247" cellpadding="0" cellspacing="0" border="0"><tr><td style="border-collapse:collapse;" align="center"><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt; width:247px;"><tr><![endif]-->
<!--[if (mso)|(IE)]><td width="32" style="width:32px; padding-right: 30px;" valign="top"><![endif]-->
<table align="center" border="0" cellspacing="0" cellpadding="0" width="32"
height="32"
style="width: 32px !important;height: 32px !important;display: inline-block;border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;margin-right: 30px">
<tbody>
<tr style="vertical-align: top">
<td align="center" valign="middle"
style="word-break: break-word;border-collapse: collapse !important;vertical-align: top">
</td>
</tr>
</tbody>
</table>
<!--[if (mso)|(IE)]></td><![endif]-->
<!--[if (mso)|(IE)]><td width="32" style="width:32px; padding-right: 30px;" valign="top"><![endif]-->
<table align="center" border="0" cellspacing="0" cellpadding="0" width="32"
height="32"
style="width: 32px !important;height: 32px !important;display: inline-block;border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;margin-right: 30px">
<tbody>
<tr style="vertical-align: top">
<td align="center" valign="middle"
style="word-break: break-word;border-collapse: collapse !important;vertical-align: top">
</td>
</tr>
</tbody>
</table>
<!--[if (mso)|(IE)]></td><![endif]-->
<!--[if (mso)|(IE)]><td width="32" style="width:32px; padding-right: 30px;" valign="top"><![endif]-->
<table align="center" border="0" cellspacing="0" cellpadding="0" width="32"
height="32"
style="width: 32px !important;height: 32px !important;display: inline-block;border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;margin-right: 30px">
<tbody>
<tr style="vertical-align: top">
<td align="center" valign="middle"
style="word-break: break-word;border-collapse: collapse !important;vertical-align: top">
</td>
</tr>
</tbody>
</table>
<!--[if (mso)|(IE)]></td><![endif]-->
<!--[if (mso)|(IE)]><td width="32" style="width:32px; padding-right: 0px;" valign="top"><![endif]-->
<table align="center" border="0" cellspacing="0" cellpadding="0" width="32"
height="32"
style="width: 32px !important;height: 32px !important;display: inline-block;border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;margin-right: 0px">
<tbody>
<tr style="vertical-align: top">
<td align="center" valign="middle"
style="word-break: break-word;border-collapse: collapse !important;vertical-align: top">
</td>
</tr>
</tbody>
</table>
<!--[if (mso)|(IE)]></td><![endif]-->
<!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!--[if (!mso)&(!IE)]><!-->
</div>
<!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td><![endif]-->
<!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
<!--[if mso]></div><![endif]-->
<!--[if IE]></div><![endif]-->
</body>
</html>