官網詢問表單怎麼設計？欄位、錯誤提示與送出確認
把詢問表單拆成必要欄位、清楚標籤、錯誤處理與送出結果，降低訪客填寫時的阻力與不確定感。
詢問表單的工作不是一次蒐集所有客戶資料，而是讓訪客用最少阻力完成一個明確任務。欄位太多、提示不清楚、錯誤後內容消失，或送出後沒有確認，都可能讓原本願意聯絡的人在最後一步離開。
一張表單先服務一個主要任務
詢價、預約、客服與下載資料需要的資訊不同。先決定收到表單後，負責人最少需要哪些資料才能回覆；其他資訊可以在後續對話補充。不要為了未來可能用到，就把公司規模、預算、地址與十多個選項全設為必填。
欄位分成必要、選填與後續詢問
| 層級 | 判斷方式 | 例子 |
|---|---|---|
| 必要 | 缺少就無法回覆或處理 | 姓名、聯絡方式、需求摘要 |
| 選填 | 能幫助預先理解，但不阻擋送出 | 公司名稱、目前網站 |
| 後續詢問 | 適合由真人依情況追問 | 完整規格、內部流程、所有附件 |
欄位名稱不能只放在 placeholder
每個欄位都應有一直看得到、並和輸入控制正確關聯的 label。Placeholder 在輸入後會消失，也可能對比不足，適合放簡短範例而不是取代欄位名稱。必填與選填規則應在開始輸入前就說清楚。
使用適合的輸入型別
- Email 使用 email 型別，讓手機提供合適鍵盤並做基本格式檢查。
- 電話使用 tel 型別，但不要假設所有國家都只有一種固定格式。
- 長需求使用 textarea，並提供具體提示而不是空泛的「留言」。
- 選項少且互斥時使用清楚的單選；不要用難操作的自製下拉取代原生控制。
前端回饋快，伺服器端驗證才是最後防線
瀏覽器端驗證能立即提醒漏填或格式錯誤，減少來回等待；但它可能被關閉或繞過，因此伺服器仍須重新驗證與安全處理所有輸入。CAPTCHA、隱藏欄位或前端檢查都不能單獨代表完整防護。
錯誤訊息要回答三件事
- 哪一個欄位有問題。
- 目前輸入為什麼無法接受。
- 使用者要怎麼修改才能繼續。
送出失敗後應保留已填內容，把焦點移到錯誤摘要或第一個問題欄位，並在欄位旁提供具體訊息。只顯示紅框或「資料錯誤」會迫使使用者自己猜。
成功送出後也要有下一步
明確顯示已收到資料、預計如何回覆，以及使用者現在能做什麼。應避免重複點擊造成重送；若 Email 通知失敗，後台仍要保存或留下可追查紀錄，不能讓畫面說成功但資料實際遺失。
只在真正成功時記錄成效
分析事件應在伺服器接受資料並回傳成功後觸發，而不是按下按鈕就算一筆詢問。如何設定 GA4 重要事件，可接著閱讀 GA4 事件與詢問成效入門 。
手機與鍵盤各測一次
- 完全不使用滑鼠完成表單。
- 故意漏填、輸入錯誤格式並確認提示清楚。
- 修正後確認其他欄位內容仍保留。
- 手機鍵盤不遮住欄位與送出按鈕。
- 成功狀態清楚，後台或收件端確實收到同一筆資料。
官方表單設計依據
W3C WAI Forms Tutorial 整理了標籤、說明、驗證與通知； MDN 表單驗證說明 則解釋前端與伺服器端驗證的責任差異。
結語
好的詢問表單會少問、說清楚、保留進度，並在成功後給出明確預期。先從最重要的聯絡流程做一次錯誤與成功測試，通常比增加更多欄位更有價值。