B2B 詢價表單驗收指南：必填欄位與錯誤提示設計

文章目錄

• 1. 先確認接單需要哪些資料
• 訪談業務與客服，列出報價必要資訊
• 區分詢價類型，決定欄位是否要動態顯示
• 2. 區分必要與可選欄位
• 用「沒有這筆資料，業務能不能回應」當判斷標準
• 必填欄位表與對應驗證規則
• 3. 測試附件及異常輸入
• 型別與大小限制要前後端雙重驗證
• 異常輸入測試案例矩陣
• 4. 核對手機和錯誤提示
• 手機操作常見的三個踩坑點
• 無障礙錯誤提示的基本要求
• 5. 建立可簽核的表單驗收表
• 驗收表應包含的五大類別
• 簽核流程建議由誰負責確認

詢價表單驗收要核對必填欄位是否對應業務接單所需資訊、附件上傳的型別與大小限制是否有明確錯誤提示、以及手機版與無障礙情境下表單是否能正常送出，這三個面向缺一不可。很多企業官網的詢價表單上線前只做了「填完按送出、資料有進信箱」這種表面測試，卻沒有測過客戶上傳錯誤檔案、用手機填寫、或是螢幕閱讀器使用者會遇到什麼狀況。

欣創數位科技在替中部製造業與批發業客戶檢視官網詢價流程時，發現多數問題不是表單做不出來，而是沒有人用「驗收」的角度把它測過一輪。這篇文章會照著接單需求盤點、欄位分類、附件測試、手機與無障礙檢查、驗收表建立的順序，把整個流程攤開來講。

本文重點摘要

• 詢價表單驗收的第一步是確認必填欄位是否對應業務實際接單需要的資訊
• 附件上傳測試要涵蓋型別、大小與異常檔名三種情境，才能算完整驗收
• 手機版詢價表單常見問題出在數字鍵盤未正確呼叫與錯誤訊息被遮擋
• 錯誤提示文字必須說明錯誤原因與修正方式，單純標紅框不算合格設計
• 用一份可簽核的驗收表讓業務、工程、設計三方共同確認再上線最務實

先確認接單需要哪些資料

詢價表單設計常犯的錯誤，是先畫欄位再問業務「這樣夠不夠」，順序完全顛倒。正確做法應該先去問業務部門，一張詢價單進來後，他們要靠哪些資訊才能回報價、排工期、判斷是不是目標客戶。欄位設計是結果，不是起點。

訪談業務與客服，列出報價必要資訊

以製造業或批發業常見的詢價情境來說，業務通常需要知道公司名稱、聯絡人職稱、採購數量級距、交期需求、是否有圖面或規格文件。假設一家做金屬加工的公司，業務回報過去最常卡關的狀況是客戶只填了「需要報價」卻沒附圖面，導致來回信件三四次才確認規格，這種情況下附件欄位就該設計成條件必填。把這些實際接單流程中會用到的資訊整理成清單，再回頭對應到表單欄位，才不會漏掉關鍵資料。

區分詢價類型，決定欄位是否要動態顯示

B2B 詢價常常不是單一類型，可能同時有現貨詢價、客製開發詢價、維修服務詢價，這三種需要的資訊完全不同。如果用同一張表單硬塞所有欄位，使用者會因為欄位太多而放棄填寫。比較務實的做法是先讓使用者選擇詢價類型，再透過 JavaScript 動態顯示對應欄位組合，這樣能同時兼顧資料完整度與填表體驗。

區分必要與可選欄位

必填欄位設哪些，不填會不會真的影響接單？這是表單驗收時最常被忽略的問題。很多官網詢價表單把「姓名、電話、Email、公司名稱、需求描述」全部設成必填，看似嚴謹，實際上卻擋掉了不少只是想先問問看、還在比較供應商階段的潛在客戶。

用「沒有這筆資料，業務能不能回應」當判斷標準

判斷一個欄位該不該必填，最簡單的方法是問自己：業務拿到這張詢價單，如果缺了這個欄位，還能不能回覆客戶？聯絡方式（電話或 Email 至少一種）、基本需求描述這兩項幾乎無法省略，但「職稱」「公司規模」這類輔助資訊，可以設為選填，透過後續電話溝通補齊即可。

必填欄位表與對應驗證規則

必填欄位越多，不代表蒐集到的資料品質越高。

欣創數位科技在規劃企業官網詢價頁時，通常建議必填欄位控制在五項以內，其餘用選填或條件顯示處理，讓填表門檻與資料完整度取得平衡。

測試附件及異常輸入

假設一間做精密零件代工的公司官網詢價表單只寫了「請上傳圖面」，卻沒有限制檔案格式與大小，上線後業務信箱陸續收到幾封附件打不開的詢價單，追查後發現客戶上傳的是壓縮檔或是超過 50MB 的掃描檔，伺服器端沒有攔截，導致郵件系統直接退信，業務完全不知道有這筆詢價進來過。這種情況不是程式寫錯，而是驗收階段沒測過異常情境。

型別與大小限制要前後端雙重驗證

附件上傳至少要限制可接受的副檔名（例如 PDF、JPG、PNG、DWG）與單檔大小上限，同時要注意前端用 HTML 的 accept 屬性做初步限制，不代表後端就不用檢查，因為使用者可以透過修改副檔名繞過前端限制。根據 MDN Web Docs的說明，input type="file" 的 accept 屬性只是建議瀏覽器篩選顯示的檔案類型，並非安全驗證機制，伺服器端仍必須重新檢查檔案型別與內容。

異常輸入測試案例矩陣

附件測試不能只測「正常上傳一張 PDF」這種情境，至少要涵蓋以下幾種異常輸入：上傳超過限制大小的檔案、上傳不在允許清單內的格式、上傳檔名含特殊符號或超長檔名、同時上傳多個檔案觸發總容量限制、上傳 0 bytes 的空白檔案、以及在上傳過程中斷網路連線。每一種情境都要確認系統有明確的錯誤回饋，而不是讓頁面卡住或靜默失敗。

附件測試建議至少準備六種異常檔案（超大檔、錯誤格式、特殊檔名、空檔案、多檔超量、中斷上傳），逐一實測並記錄系統反應，而不是假設「應該沒問題」。

核對手機和錯誤提示

手機版詢價表單怎麼測才算完整？至少要涵蓋鍵盤呼叫類型是否正確、錯誤訊息是否會被虛擬鍵盤遮住、以及螢幕閱讀器是否能正確朗讀錯誤內容這三個面向。這是整個驗收流程中最容易被低估的環節，因為多數團隊只用桌機瀏覽器測試，很少實際拿手機操作到送出那一刻。

手機操作常見的三個踩坑點

第一個常見問題是電話欄位沒有設定 type="tel"導致使用者填寫時叫出的是全英數鍵盤而非數字鍵盤，增加輸入錯誤機率。第二個問題是錯誤訊息顯示在欄位下方，但虛擬鍵盤彈出時剛好把錯誤訊息遮住，使用者完全看不到哪裡錯了，只覺得按了送出沒反應。第三個問題是表單在小螢幕上的欄位間距太窄，手指誤觸相鄰欄位，導致填寫到一半資料跑掉。

無障礙錯誤提示的基本要求

根據 W3C Web Accessibility Initiative的表單驗證教學指出，錯誤訊息應該與對應欄位有程式化關聯（例如透過 aria-describedby），並且在使用者送出表單後，應將焦點導向第一個錯誤欄位，讓螢幕閱讀器使用者能立即得知需要修正的位置，而不是只靠顏色變化傳達錯誤狀態。

錯誤提示只標紅框不寫原因，等於沒有提示。

建立可簽核的表單驗收表

詢價表單上線前最後一步，是把前面測過的項目整理成一份業務、工程、設計都能看懂並簽名確認的驗收表，而不是把測試結果散落在聊天訊息或口頭確認裡。沒有白紙黑字的驗收紀錄，上線後出問題時很難追查是哪個環節漏測。

驗收表應包含的五大類別

• 欄位邏輯類：必填欄位是否對應業務接單需求、選填欄位是否會造成資料不完整、動態欄位切換是否正常
• 附件處理類：型別限制是否前後端雙重驗證、大小限制是否有明確錯誤訊息、異常檔案是否被正確攔截
• 手機裝置類：數字鍵盤是否正確呼叫、錯誤訊息是否可見、欄位間距是否足夠避免誤觸
• 無障礙類：錯誤訊息是否與欄位有程式化關聯、送出後焦點是否移至錯誤欄位、是否僅用顏色標示錯誤
• 送出確認類：送出成功後是否有明確提示、資料是否正確進入業務收件流程、重複送出是否會造成資料重複

簽核流程建議由誰負責確認

比較務實的做法，是讓業務負責確認欄位邏輯與送出流程是否符合接單需求，工程負責確認附件驗證與無障礙技術實作，設計負責確認手機版視覺呈現與錯誤提示是否清楚易懂。三方各自在驗收表對應欄位簽名或電子確認後再排程上線，能大幅降低上線後才發現「這個欄位業務根本用不到」或「這個錯誤訊息客戶看不懂」的情況。欣創數位科技在替客戶規劃官網開發流程時，會建議把這類驗收表納入測試與優化階段的標準產出物，而不是等客戶抱怨才回頭補測。

驗收表不是為了應付流程，而是讓三個角色用同一份標準確認同一件事，減少上線後互踢皮球的情況。

需要協助檢視官網詢價表單設計？

如果貴公司的官網詢價流程還沒經過完整驗收，或是想重新規劃必填欄位與錯誤提示邏輯，歡迎與欣創數位科技聯繫，我們可以依據實際接單需求提供規劃建議與報價說明。