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

column

2024年11月27日

MW WP Form 是一款由日本開發、在 WordPress 上長期流行的插件，即將停用。這有點令人失望，因為它是一個值得信賴的插件，已被許多組織和企業網站採用。

有些客戶無力開發單獨的安全電子郵件表單或使用 SaaS 實現前端解決方案。一位這樣的客戶要求我們將他們的聯絡表單切換到 Google 表單。我們決定在保留現有設計的同時嵌入 Google 表單，結果我們做到了！

很多網站上都有相關的使用技巧，所以我得去查一下，不過設定過程本身很簡單。有些地方有點難，所以今天就來跟大家分享一下吧！

作業工程

將 GoogleForms 自訂為靜態頁面
提交表單後使用JS跳轉至提交完成頁面
向使用 GAS 進行諮詢的客戶發送自動回覆電子郵件

絆腳石

用於發送自動回覆電子郵件的 GAS取得表單回應「namedValues」未定義
自動電子郵件的寄件者地址是我自己的。

關於 Google 表單自訂

您不僅可以按原樣安裝 Google 表單，還可以將其合併到使用 HTML/CSS 建立的表單中並自訂設計！

這是我們的訪客管理表，我們也將 Google Forms 納入了表單部分。

我們不會詳細介紹自訂 HTML 嵌入或提交後如何轉換到完成頁面。

絆腳石 #1
用於發送自動回覆電子郵件的 GAS取得表單回應「namedValues」未定義

您可以實施 Google AppScript (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 
  });
}

我以為我可以使用此腳本發送電子郵件，但出現了錯誤。

類型錯誤：無法讀取未定義的屬性（讀取「您的姓名」）在回覆（回覆：3:29）

找不到第一項「名稱」。

您是否已獲得電子版？請查看下方

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是觸發器設定。GoogleForms蚊子試算表請注意，內容（屬性和方法）將根據您使用的方法而有所不同。

GoogleForms
e.response.getItemResponses()
試算表
e.values　e.namedValues

包含重寫腳本的電子郵件已成功到達！

但是，如果你仔細看，你會發現寄件者地址是我自己的。如果這種情況持續下去，客戶就會收到來自我地址的自動郵件。

絆腳石 #2
自動電子郵件的寄件者地址是我自己的。

使用 GAS 時，必須設定「它將在誰的 Google 帳戶下運行」。
從 GAS 發送電子郵件時，它將從「執行者的 Gmail」發送

這次我透過邀請我的帳戶來編輯Google表單來實現。
目前，自動電子郵件的腳本執行者設定為我，因此電子郵件是從我的地址發送的。

若要將此位址設為用戶端的寄件人，您需要在擁有者帳戶中重新配置。此外，“客戶端查詢地址”info@example.com如果要設定“作為寄件者”，該如何設定？

解決方法

客戶的 Gmail 地址會有一個詢問地址info@example.com讓他們為此設定一個別名。
在所有者帳戶中重新配置觸發器設置
將具有您自己的網域的電子郵件地址新增至您的帳戶、腳本MailApp.sendEmail()新增可選的寄件者並寫下地址

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

新增您自己的網域地址什麼是

透過新增帳戶，info@example.com您可以使用電子郵件地址傳送。
換句話說，當從 Gmail 內部發送時，info@example.com然後您可以選擇一個寄件者姓名，例如「。」它就像一個子地址。

如果您沒有新增帳戶，只要您使用的是Gmail帳戶，您不能自由訂製寄件人。
在這種情況下，您將需要使用外部 SMTP 伺服器（例如 SendGrid、Amazon SES）。

所以最簡單、最好的方法是
查詢車主帳戶info@example.com新增位址→在擁有者帳戶中設定觸發器。

請注意，自動傳送的電子郵件將作為 Gmail 發送，並將累積在「已傳送」資料夾中。
*如果您不想讓「已發送」資料夾被填滿，您可能需要專門為此目的建立一個新帳戶。

概括

Google Forms本身有簡單的自動傳送功能，但無法自訂郵件的主題或正文。
其他：如果您使用擴充程序，免費版本每天的自動回覆次數限制為 20 次。
另一方面，GAS 允許您建立高度靈活且可擴展的解決方案，同時降低成本！

使用 GAS 的好處

易於使用的電子郵件定制
- 電子郵件的內容和收件者可以根據表單中提供的答案自動變更。
- 您也可以發送以 HTML 格式設計的電子郵件，這使它們看起來很棒。
可以與Google服務鏈接
- 回應資料會自動儲存到 Google 試算表中，以便於編輯和管理。
- 在 Google 日曆中自動建立事件並設定提醒。
- 在 Google Drive 中組織和儲存文件，以便於資料管理。
無成本
- 可在 Google Workspace 內免費使用。
- 由於不需要使用外部服務，因此可以低成本運作。
自動快速移動
- 填寫完表格後，您可以立即發送電子郵件或儲存資料。
- 也可以同時執行多個進程。
安全資料管理
- 由於處理是在您的 Google 帳戶內完成的，因此資料外洩到外部的風險很小。
- 安全性也很可靠，所以您可以放心。
靈活使用
- 您可以輕鬆地在新表單中重複使用設定。
- 只需稍微更改程式碼，您就可以新增功能並對其進行自訂。

透過使用 GAS，靈活、可擴展且經濟高效它在 Google 生態系統內安全運行的同時實現了這一點，使其成為一個強大的選擇，尤其是在需要根據回應進行詳細處理和自訂時。

這次，確認畫面不包含在範圍內，所以我沒有實現它，但是如果下次有請求的話，我想嘗試一下。當發生這種情況時，我會寫另一篇文章作為備忘錄！

如果您在修改或遷移查詢表時遇到任何問題，請與我們聯絡！

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

撰稿人

我使用 JavaScript、React 和 Next.js 開發前端項目，專注於標記語言。當我參與開發的網站成功發佈時，我感到無比欣慰！我的嗜好是彈吉他。我既喜歡寫程式碼，也喜歡玩程式碼！

Hiratchi

前端工程師 / 2022年入職

Topics