使用 Google 表單為客戶製作表單時容易踩的陷阱

長期以來在 WordPress 上廣受使用的日本製外掛 MW WP Form 即將停止開發。它被許多團體與法人網站採用，是一款值得信賴的外掛，因此不禁感到有些可惜。

也有些客戶無法負擔另外開發安全的郵件表單，或是為了採用 SaaS 而投入前端實作的成本。在這樣的情況下，客戶提出希望將聯絡表單改用 Google Forms 的需求。既然如此，我們決定在保留現有設計的前提下嵌入 Google Form，並實際完成了實作！

相關做法在許多網站都有介紹，雖然過程中需要邊確認邊進行，但導入本身相當簡單。 不過也有幾個稍微卡住的地方，因此這次想與大家分享其中的重點！

作業流程

• 將 GoogleForms 自訂為靜態頁面
• 表單送出後，透過 JavaScript 跳轉至送出完成頁面
• 使用 GAS 寄送自動回覆郵件給提出詢問的客戶

遇到的困難

• 寄送自動回覆郵件時，在 GAS 中取得表單回覆的 "namedValues" 為 undefined
• 自動寄送郵件的寄件者變成了我的信箱地址

  　

關於 Google Forms 客製化

Google Forms 不只能直接嵌入使用，還能整合進以 HTML/CSS 製作的表單中，客製化表單設計！

這是本公司的來訪者登記管理表，其表單部分也是整合了 Google Forms。

關於整合至 HTML 的客製化方式，以及送出後跳轉至完成頁面的設定方法，本次將省略說明。

遇到的問題 其1
發送自動回覆郵件時，GAS 中用來取得表單回覆的 "namedValues" 為 undefined

透過與 Google Forms 回覆相連的試算表，可以實作 Google Apps Script (GAS) 來發送自動寄送郵件。

當按下詢問表單的送出按鈕時會觸發腳本，讀取從連結的試算表傳來的資料，並將其反映在郵件中。

function reply(e) {
  // フォームの回答を取得
  const name = e.namedValues['お名前'][0];
  const email = e.namedValues['メールアドレス'][0];

  
  // 自動返信メール件名
  const subject = '【テスト】お問い合わせありがとうございます';
      
  // 自動返信メール本文
  const body = name + '様\n' +
    '\n' +
    '下記の内容で申し込みを受付いたしました。\n' +
    '\n' +
    '【お名前】\n' +
    name + '\n' + 
    '\n' +
    '【メールアドレス】\n' +
    email + '\n' ;
  
  // メール送信
  MailApp.sendEmail({
    to: email,　 
    subject: subject,
    body: body 
  });
}

original 本以為這個腳本可以寄出郵件，結果卻出現錯誤。

TypeError: Cannot read properties of undefined (reading 'お名前')at reply(reply:3:29)

找不到第一個項目「お名前」。之類的。

e 應該有取得到吧…？先在下面確認。

function reply(e) {
  Logger.log(JSON.stringify(e)); 
}

回傳的是 null。為什麼啊。

查了一下 GAS 的事件物件 namedValues⋯

注意：請搭配 SpreadsheetTriggerBuilder 使用此表單提交觸發條件。

據說這裡只能使用試算表用的觸發條件！所以這次要使用 response。

function reply(e) {
  // フォームの回答を取得
  const responses = e.response.getItemResponses();
  let name = '';
  let email = '';
  
  // 回答をループして必要な項目を抽出
  responses.forEach(response => {
    const itemTitle = response.getItem().getTitle(); // 質問のタイトルを取得
    const answer = response.getResponse(); // 回答を取得

    if (itemTitle === 'お名前') {
      name = answer;
    } else if (itemTitle === 'メールアドレス') {
      email = answer;
    }
  });

  // 自動返信メール件名
  const subject = '【テスト】お問い合わせありがとうございます';
  
  // 自動返信メール本文
  const body = name + '様\\n' +
    '\\n' +
    '下記の内容で申し込みを受付いたしました。\\n' +
    '\\n' +
    '【お名前】\\n' +
    name + '\\n' + 
    '\\n' +
    '【メールアドレス】\\n' +
    email + '\\n';
  
  // メール送信
  MailApp.sendEmail({
    to: email,　 
    subject: subject,
    body: body 
  });
}

這個事件的引數 e，內容（屬性・方法）會依觸發條件的設定是在 Google 表單還是 試算表中設定而有所不同，需要特別注意。

• GoogleForms

  e.response.getItemResponses()

• 試算表

  e.values　e.namedValues

改寫後的腳本成功寄出了郵件！

⋯但仔細一看，寄件者變成了我自己的信箱。這樣下去，會從我的信箱自動寄送郵件給客戶。

踩過的坑 其2
自動寄出的郵件，寄件者變成了我的信箱

• GAS 必須設定「要以誰的 Google 帳號執行」。
• 從 GAS 寄送郵件時，會以「執行者的 Gmail」寄出。

這次由客戶邀請我的帳號加入 Google 表單的編輯權限後完成實作。
目前自動寄信腳本的執行者是我，因此郵件會以我的信箱寄出。

若要將寄件者改為客戶的信箱，必須以擁有者帳號重新設定。 另外，若客戶提出「希望以客戶端的諮詢專用信箱[email protected] 作為寄件者」的需求，要進行設定時該怎麼辦呢…?

解決方法

• 請客戶在其 Gmail 信箱中設定別名，將諮詢用信箱[email protected] 加入為別名。
• 改以擁有者帳號重新設定觸發條件
• 在帳號中新增自訂網域的信箱、在腳本的MailApp.sendEmail()中加入選用參數 from，並填入該信箱地址

GmailApp.sendEmail(email, replySubject, body, {
    from: 'info＠example.com'  // 追加した送信元アドレス
  });

新增自訂網域信箱是什麼

只要新增帳號，就能使用 [email protected] 這個電子郵件地址寄信。
也就是說，從 Gmail 寄信時，可以選擇名為「[email protected]」的寄件者。就像子地址一樣。

若不新增帳號，只要使用 Gmail 帳號，就無法自由自訂寄件者。
在這種情況下，需要使用外部 SMTP 伺服器（例如 SendGrid、Amazon SES）。

因此最簡單且最佳的流程是：
請擁有者帳號新增用於聯絡的 [email protected] 地址 → 再由擁有者帳號設定觸發條件。

需要注意的是，自動寄出的郵件會以 Gmail 名義寄出，因此會累積在「已傳送」資料夾中。
如果不希望寄件匣塞滿，建議另外建立一個專用帳號，這樣也是不錯的做法。

總結

Google 表單本身也有簡易的自動寄信功能，但無法自訂郵件的主旨與內文。
若使用其他擴充功能，免費版每日自動回覆數量上限為 20 封。
相較之下，GAS 能以較低成本建構兼具彈性與擴充性的解決方案！

使用 GAS 的優點

1. 易於使用的郵件自訂功能
   • 可依據表單的回覆內容，自動變更寄送的郵件內容與收件對象。
   • 也可以寄送 HTML 格式設計的郵件，成品更加美觀。
2. 可與 Google 服務整合
   • 自動將回覆資料儲存至 Google 試算表，方便彙整與管理。
   • 可自動在 Google 日曆建立行程，並設定提醒通知。
   • 將檔案整理並儲存至 Google 雲端硬碟，輕鬆管理資料。
3. 無需額外成本
   • 可在 Google Workspace 內免費使用。
   • 無需使用外部服務，可以低成本營運。
4. 自動快速運作
   • 表單回覆後，可立即寄送郵件或儲存資料。
   • 也可以一次執行多項處理。
5. 安全管理資料
   • 由於處理會在 Google 帳戶內完成，因此資料外洩的風險較低。
   • 安全性也相當完善，可以安心使用。
6. 可以靈活調整使用方式。
   • 即使是新的表單，也能輕鬆重複使用設定。
   • 只要稍微修改程式碼，就能新增功能或進行客製化。

使用 GAS 可以實現靈活性、擴充性及成本效益，並能在 Google 服務的生態系統中安全運作。尤其是在需要根據回覆內容進行細緻處理或客製化的情況下，它會是一個強而有力的選擇。

這次因為確認畫面不在範圍內，所以沒有實作，但下次如果有需求，我想嘗試看看。到時候也會再寫一篇類似備忘錄的文章！

如果您在表單改版或遷移等方面有任何困難，歡迎與我們聯繫！

參考網站 Zenn ryotoitoi 的文章：https://zenn.dev/ryotoitoi/articles/3cedb115d816e5