聯絡、預約、索取資料或會員註冊表單,都是使用者與企業互動的關鍵時刻。若訪客填完才發現格式錯誤,卻不知道哪一欄有問題;或畫面只顯示紅字「送出失敗」,很可能直接離開。表單驗證的目的不是挑錯,而是協助使用者順利完成任務,同時讓企業取得可處理的資料。
設計前可先問:這個欄位若沒有填寫,團隊真的無法回覆嗎?若答案是否定的,就不宜把它設為必填。減少非必要欄位後,才能把注意力放在真正重要的輸入協助。
在填寫前先說明格式與用途
欄位標籤應直接說明要填什麼,例如「聯絡電話」比單寫「電話」更明確。若有格式限制,應在使用者輸入前就提供範例,例如日期格式、可接受的檔案類型,或密碼的基本條件。
也要說明敏感資料的用途。若需要統一編號、專案預算或附件,告訴訪客收集原因,以及是否可稍後補充。不要以星號標記必填欄位,卻沒有在頁面上清楚解釋星號意思;更好的做法是直接標示「必填」或「選填」。
驗證時機要配合使用者節奏
使用者剛點進欄位時就跳出錯誤訊息,通常只會增加壓力。較合適的作法是在離開欄位後,或輸入明顯不符合格式時,提供溫和提示。送出表單時,仍應做一次完整檢查,因為有人可能跳過部分欄位。
例如電子郵件欄位可在離開欄位後提醒格式不完整;必填欄位則可在送出時提示尚未填寫。對於資料較長的表單,若送出失敗,已填的內容必須保留,避免使用者重新輸入。
錯誤訊息要指出修正方法
「格式錯誤」資訊太少;「請輸入可聯絡的電子郵件,例如 name@example.com」則能讓人立即行動。每則訊息最好回答三件事:哪一欄需要處理、原因是什麼、應如何修正。
不要只靠顏色傳達狀態。紅色可以保留作為輔助,但還需要文字、圖示或欄位邊框等明確訊號。送出後若頁面上方有錯誤摘要,摘要中的項目應可連到對應欄位,讓鍵盤與手機使用者都能快速回到問題處。
顧及手機與真實輸入情境
手機上輸入電話、電子郵件與日期的成本較高。可依欄位類型叫出合適鍵盤,並提供足夠的點選範圍。錯誤提示不要只出現在看不見的位置,尤其是長表單送出後,應把焦點帶到錯誤摘要或第一個錯誤欄位。
此外,表單驗證只能協助資料品質,不能取代後端的安全檢查。前端限制可能被略過,因此伺服器端仍要驗證輸入內容、限制不合理的提交,並妥善處理附件與異常資料。
讓客服與設計一起檢視
最常被補問的資訊、最容易填錯的欄位,客服同仁通常最清楚。定期整理這些回饋,調整欄位名稱、範例與提示文字。表單不是設計完成就不再變動的元件,而是可以隨實際詢問流程持續改善的介面。
現在就能做的事
- 用手機實際填一次主要表單,記錄每個容易猶豫或輸入不便的欄位。
- 將「格式錯誤」改成含有欄位名稱與修正方式的具體訊息。
- 確認送出失敗後,使用者已填寫的資料不會消失。
- 與客服整理最近常見的補問項目,評估是否需調整提示文字。


