生活分享

WordPress 聯絡表單:欄位、垃圾訊息與送信驗收

聯絡表單需要讓訪客順利填寫,也讓站長確實收到並追蹤訊息。本篇以 Contact Form 7 說明欄位設計、郵件範本、回覆地址、Turnstile 防垃圾訊息與 Flamingo 留存方式,提供手機操作及收信驗收步驟,協助台灣小型網站建立清楚的聯絡流程,避免把畫面上的送出成功當成工作已完成。

更新日期: 閱讀時間約 6 分鐘

原創文件、伺服器與螢幕插畫,象徵表單訊息從提交到處理的路徑。
圖片:Mokaair (© Mokaair)

工作室網站放了聯絡表單,卻沒有人負責查看信箱,或通知信只帶姓名、漏了需求內容,這些問題往往比表單外觀更影響回覆效率。設計之前先回答三件事:需要哪些資料、訊息交給誰、多久會處理。

以下用一般服務諮詢表單示範 Contact Form 7 的設定思路。完成標準包含填寫、通知、留存與回覆;每一步都能用測試訊息驗證,再把表單放進主要導覽。

先縮小問題,讓欄位有用途

第一版可保留稱呼、電子郵件、需求類型與訊息內容。只有當聯絡方式確實需要電話,才把電話列入必要欄位;不要為了一次收齊資料,就要求初次詢問者填完整住址或身分資料。每增加一欄,都應能說明誰會使用及用來做什麼。

把必填與選填直接寫在欄位標示,不要只靠顏色。電子郵件範例應清楚,訊息欄可提示對方提供服務項目與希望聯絡的時間,並提醒避免填入密碼或不必要的敏感內容。上傳附件若沒有明確需求,先省略,讓第一版流程容易管理。

表單上方可寫回覆時段與替代聯絡方式。請使用團隊能做到的說明,例如由人員於工作日查看,避免自動承諾一小時內回覆。急件是否適合透過表單處理,也應在訪客花時間填寫前說清楚。

建立表單並放進聯絡頁

安裝並啟用後,從 Contact 的 Contact Forms 管理表單。新增或複製一份測試用表單,在 Form 分頁使用欄位產生器建立所需欄位。每個欄位都要有不重複且容易辨識的名稱,因為郵件範本會用這個名稱取得填答內容。

例如表單中的 your-email 對應郵件標籤 [your-email]。變更欄位名稱後,應一併更新 Mail 分頁,否則畫面收了資料,郵件卻可能仍引用舊名稱。使用清楚的可見標籤包住輸入欄位,不要只靠使用者輸入後就消失的提示文字。

  1. 建立命名清楚的諮詢表單,設定必填欄位與選項。
  2. 在聯絡頁加入 Contact Form 7 區塊並選取表單,或使用它提供的短代碼。
  3. 儲存後從未登入視窗開啟頁面,核對欄位、換行及送出按鈕。

把郵件的收件與回覆方向設定正確

Mail 的 To 是接收通知的信箱,應由負責處理的人員管理。From 依官方建議使用網站自己網域的地址,並與寄信服務的驗證設定一致;不要把訪客填入的 Gmail 或其他外部地址當成網站寄件人,否則容易造成寄件身分不一致。

如果希望客服按回覆時直接回給訪客,可在 Additional headers 設定 Reply-To,引用電子郵件欄位的 mail-tag。正文則逐一列出需要的資料,包含需求類型和訊息內容。主旨保留固定識別詞,讓工作信箱容易分流,也避免只有空白或過於簡短的通知。

Mail (2) 可用作自動回覆,但官方說明它只在主要 Mail 成功寄送後才寄出。回覆內容可以告知已收到詢問及處理方式,不要把它寫成預約或交易已成立。訪客地址可能填錯,因此別在自動回信大量重述敏感資料,也要做好防濫用設定。

分開檢查通知與訊息留存

Contact Form 7 本身不儲存提交訊息。若網站需要在郵件失敗時仍能追查詢問,可評估同作者的 Flamingo,將表單訊息留在資料庫。這是另外增加的資料保存責任,啟用前應決定哪些人能查看、保存多久,以及如何處理不再需要的資料。

使用 Flamingo 後,到 Inbound Messages 檢查測試訊息。若自訂了欄位名稱,官方提供 flamingo_email、flamingo_name 與 flamingo_subject 設定對應資料;應確認清單上的寄件者與主旨合理,而不是只看資料列是否存在。

部分表單若不需要保存,官方也提供 do_not_store 設定。無論選擇哪種策略,都要把資料流程寫在網站說明中:訊息會寄往哪類工作信箱、是否儲存在網站,以及誰負責處理。保存功能不能取代定期查看,更不能保證郵件一定進入收件匣。

加入防垃圾訊息,保留正常人的入口

現行 Contact Form 7 提供 Cloudflare Turnstile 整合。依官方流程建立 Turnstile widget,取得 site key 與 secret key,再到 Contact 的 Integration 貼入對應設定;一般整合不需自行另外嵌入驗證程式。金鑰應放在整合設定,不要公開貼在文章或客服對話。

Turnstile 啟用後仍要用手機與不同瀏覽器測試。若驗證區無法載入,應查快取、內容安全政策或其他腳本限制,而不是要求訪客反覆送出。保留一個清楚的替代聯絡途徑,讓正常詢問不會因防護工具故障而完全中斷。

需要取得特定同意時,可使用 acceptance 欄位,把用途寫在勾選框附近。聯絡需求與額外訂閱應分開表達,避免預先勾選或以一個模糊選項包住不同用途。這是表單設計原則;實際需要的告知及保存安排,仍應依網站的資料處理情境確認。

用一份測試清單完成驗收

至少測試正常填寫、空白必填、錯誤信箱格式、較長文字及手機鍵盤切換。用鍵盤 Tab 移動,確認焦點順序合理,錯誤提示能指出要修改哪一欄。送出成功後的文字要清楚說明接下來會發生什麼,避免訪客以為畫面沒反應而連續提交。

再以不同收件服務查看通知信與自動回覆,核對主旨、每個欄位、Reply-To 及垃圾郵件資料夾。若啟用留存,也要比對同一筆測試紀錄。用唯一測試字樣串起畫面、信件與後台資料,才能知道哪一段失敗,避免一次更換好幾套外掛。

最後指定固定檢查人員與備援,網站搬家、寄信服務更換或表單更新後重新送測試。定期移除測試資料並檢查不必要欄位,讓聯絡頁保持容易填、容易處理,也容易在問題發生時找到原因。

四格原創圖解呈現訪客填寫、表單處理、郵件及資料留存、負責人回覆的驗收順序。
送出、通知、留存與回覆各自核對,才能形成完整聯絡流程。 · 圖片:Mokaair (© Mokaair)
以同一筆測試資料比對不同環節,避免把其中一項當成全部完成。
檢查位置能證明什麼還要核對
訪客端成功提示表單回報此次處理結果通知信是否到達
通知信與自動回覆相關郵件已送抵該信箱內容完整及回覆地址
Flamingo 後台紀錄網站留存了訊息查看權限、處理責任及保存安排

  • 生活分享

    WordPress 側邊欄與小工具:安排資訊與固定區塊

    WordPress 側邊欄可以放搜尋、作者介紹與相關內容,但應先確認它對讀者是否有幫助。本文整理傳統小工具、區塊小工具及區塊佈景的差異,說明如何新增、排序、暫時移除與驗收,也比較一般排列、黏附與固定顯示的用途。透過桌面、手機和文字放大的檢查,避免資訊區塊遮住正文或表單,讓網站增加入口時仍維持清楚的閱讀順序。

  • 生活分享

    WordPress 備份怎麼做:檔案、資料庫與還原演練

    WordPress 備份不能只看成功訊息。本篇用檔案、資料庫與異地保存建立備份清單,說明 UpdraftPlus、WPvivid 的操作入口、還原限制及隔離演練,幫你確認網站資料真的拿得回來。也整理排程、保留版本、設定檔與驗收紀錄,讓個人網站或工作室有人能接手復原。

  • 生活分享

    WordPress 會員與角色:誰能看、誰能改、誰能管理

    WordPress 的管理員、編輯、作者與訂閱者分別能做什麼?本篇用小型團隊的投稿與會員閱讀需求,拆解角色、操作權限和內容可見性的差別,說明 User Role Editor 的設定方向,以及隱藏選單為何需要另外驗證實際存取,提供權限表、測試步驟和交接提醒,避免為了方便把所有人設為管理員。

  • 生活分享

    安裝 WordPress 主題與外掛:來源、更新與停用流程

    安裝 WordPress 佈景主題或外掛前,先確認要解決的問題、下載來源、版本相容性與回復方式。本文整理後台搜尋、官方 ZIP 上傳、啟用及驗收流程,並說明更新、停用和刪除各自可能影響什麼。適合需要自行維護網站的台灣使用者,用一份簡短紀錄管理新增功能與長期成本,避免重複安裝、忘記授權或在正式站一次更動太多項目。

最新旅遊情報攻略

資料來源

生活分享