使用Google表單建立客戶表單時的常見陷阱

長期以來在 WordPress 中受歡迎的日本製外掛程式 MW WP Form 已停止支援。由於這是許多組織和企業網站採用的可信賴外掛程式，這多少令人遺憾。

有些客戶無法花費太多成本另外開發安全的電子郵件表單或使用 SaaS 進行前端實作。在這種情況下，我們收到了將聯絡表單切換到 Google Form 的請求。既然如此，我決定嘗試保留現有設計，同時以嵌入 Google Form 的方式來實作！

雖然各種網站上都有發布相關的訣竅，但實施本身非常簡單。不過也遇到了一些困難，所以這次想分享一下那些重點！

工作流程

• 將 Google Form 自訂為靜態頁面
• 表單提交後使用 JavaScript 轉跳到完成頁面
• 使用 GAS 向提交表單的客戶傳送自動回覆電子郵件

遇到的難點

• 在透過 GAS 傳送自動回覆信件時，取得表單回答的「namedValues」顯示未定義
• 自動傳送信件的寄件者變成了我的地址

  　

關於 Google Forms 客製化

Google Forms 不只能直接設置，還可以組合到用 HTML/CSS 建立的表單中，以自訂設計！

以下是本公司的訪客訪問管理表，表單部分也組合了 Google Forms。

本次將省略有關如何將 HTML 組合客製化以及送出後導向完成頁面的說明。

遇到的問題 第一項：
在透過 GAS 傳送自動回覆信件時，取得表單回答的「namedValues」顯示未定義

可以透過 Google App Script（GAS）從與 Google Forms 回答相關的試算表中實施程式碼，並傳送自動信件。

以按下表單送出按鈕的時間點為觸發器，會執行一個從相關試算表中讀取已傳送資訊並將其反映至信件中的腳本。

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 
  });
}

本以為這個腳本能夠傳送信件，結果卻出現了錯誤。

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 Forms 還是 試算表 而有不同的內容（屬性和方法），需要特別注意。

• GoogleForms

  e.response.getItemResponses()

• 試算表

  e.values　e.namedValues

用改寫後的指令碼，郵件順利寄出了！

…不過，仔細一看，寄件者竟然變成了我的信箱地址。這樣的話，我的信箱就會自動發送郵件給客戶。

卡住的地方 其二
自動發送郵件的寄件者變成了我的信箱

• GAS 必須設定「以哪個 Google 帳戶執行」。
• 從 GAS 發送郵件時，會以「執行者的 Gmail」的形式發送

這次是由客戶邀請我的帳戶編輯 Google Form 並實作。
目前自動發送郵件的指令碼執行者是我，所以寄件者會以我的信箱地址發送。

若要將寄件者改為客戶，需要用擁有者帳戶重新設定。另外，如果客戶提出「希望寄件者設定為客戶端專用的聯絡信箱[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. 靈活地改變使用方式
   • 即使是新表單，也能輕鬆重複使用現有設定。
   • 只需稍微更改一些代碼，就能添加新功能或進行自訂。

透過使用 Google Apps Script，可實現 靈活性、可擴展性和成本效益，同時在 Google 服務生態系統內安全運營，特別是在需要根據回答內容進行細緻處理或自訂的情況下，是個強大的選擇。

由於本次確認畫面不在範圍內，所以沒有實裝，但下次若有需求提出，我想試試看。到時候也會再寫備忘錄式的文章！

若在聯絡表單的改修或轉移等方面遇到困難，歡迎諮詢本公司！

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