網站聯絡表單怎麼設計？欄位、垃圾訊息與通知信

有的網站聯絡表單有十幾個欄位：姓名、性別、生日、公司、職稱、地址、電話、手機、Email、預算、想詢問的服務……最後還要輸入一組看不清楚的驗證碼。客人本來只是想問一句「這個多少錢」，填到一半就放棄了。

也有相反的情況：表單很簡單，結果每天收到幾十封賣藥、賣廣告的垃圾訊息，真正的客人訊息被淹沒。或是客人送出了，網站顯示「感謝您」，通知信卻從來沒寄到你的信箱。

一個好用的表單，要同時顧好這幾件事。

1. 欄位越少越好

先問自己：要回覆這個客人，最少需要知道什麼？通常只有三樣：

• 怎麼稱呼
• 怎麼聯絡：電話、Email、LINE 擇一，讓客人選自己習慣的。
• 想問什麼：一個可以自由填寫的大欄位。

其他資料，例如公司名稱、預算範圍、希望完成的時間，可以放成選填，或是用下拉選單讓客人點選就好。真的需要詳細資料，等第一次聯絡之後再問也不遲。

2. 送出之後，告訴客人接下來會怎樣

客人按下送出，最想知道的是「有沒有送成功」和「什麼時候會有人回我」。送出後的畫面可以寫清楚：

• 已經收到，多久之內會回覆，例如「一個工作天內」。
• 急的話可以直接打電話或加 LINE，附上按鈕。

如果有寄一封確認信給客人，信裡再附上他填的內容，客人會更安心。

3. 擋垃圾訊息，但不要擋到真人

表單一公開，就會有機器人來亂填。常見的擋法有幾種：

• 隱藏欄位（蜜罐）：放一個真人看不到、機器人卻會填的欄位，有填的就當成垃圾訊息。真人完全感覺不到。
• 自動判斷的驗證：Google reCAPTCHA、Cloudflare Turnstile 這類服務，大多數時候在背景自動判斷，不用客人做任何事。
• 限制送出次數：同一個來源短時間內送很多次，就先擋下。

盡量避免要客人辨認扭曲文字的舊式驗證碼，它擋機器人的效果有限，卻常常讓真人填不下去。WordPress 網站的做法，可以看〈WordPress 防垃圾留言總整理〉和〈替 WordPress 登入頁和留言表單加簡單驗證題〉。

4. 通知信一定要收得到

表單最怕的不是沒人填，是有人填了你卻不知道。

• 通知信最好透過公司信箱的 SMTP 寄出，不要用主機內建的方式，比較不會被擋。做法可以看〈WordPress 寄不出信怎麼辦〉。
• 網址要設好 SPF、DKIM，通知信才不會進垃圾信件匣，說明在〈SPF、DKIM、DMARC 一次看懂〉。
• 通知寄給兩個人以上，一個人請假也不會漏。
• 每個月自己填一次表單測試，確認還收得到。

5. 個資要說明清楚

表單收集姓名、電話、Email，就是在蒐集個人資料。依個人資料保護法第 8 條，蒐集時要告訴對方幾件事：你是誰、蒐集的目的、蒐集哪些資料、會怎麼使用、對方有哪些權利，以及不提供會有什麼影響。

做法是在送出按鈕旁邊放一小段說明，例如「您填寫的資料只用於回覆這次詢問」，再連到網站的隱私權政策。沒有隱私權政策的網站，要先補上。

6. 手機上好不好填

現在大部分人用手機填表單，幾個小地方差很多：

• 輸入框和按鈕要夠大，手指點得到。
• 電話欄位叫出數字鍵盤，Email 欄位叫出有 @ 的鍵盤。
• 錯誤訊息直接顯示在填錯的欄位旁邊，不要送出後才整頁說「有錯誤」。

電話和 Email 欄位，只要在 HTML 寫對欄位類型，手機就會自動跳出對的鍵盤：

<input type="tel" name="phone" autocomplete="tel">
<input type="email" name="email" autocomplete="email">

一定要用表單嗎？

不一定。很多客人比較習慣直接打電話或傳 LINE。正威自己的網站就沒有放表單，聯絡頁和每篇文章結尾都是直接加 LINE、打電話或寄 Email。

要不要放表單，看你的客人習慣怎麼聯絡，也看你有沒有人每天處理表單。兩種都放也可以，重點是每一種管道都有人回、都記錄得到。有人點 LINE、送出表單時記一筆到 GA4，就知道每個月有多少人來詢問，做法可以看〈GA4 怎麼看？〉。

正威可以幫什麼

正威網路行銷是 25 年經驗的基隆網頁設計工作室，也提供台北網頁設計與全台灣的網站服務。表單收不到通知信、每天被垃圾訊息淹沒，或想重新規劃聯絡方式？歡迎免費諮詢。