你以為的「聯絡我們」表單，其實不是表單

打開大部分公司網站，都有一樣的「聯絡我們」表單：名字欄位、Email 欄位、訊息欄位，加上「傳送」按鈕。業務單位抱怨「網站每天有人填表單，但成交率超低」，技術單位說「我們有裝表單外掛，收集到資料了」。但雙方都不願面對的是：這個表單從設計的那一天起，就已經注定失敗。

原因是：你設計的不是表單，你設計的是一個「打斷客戶思考」的障礙物。

表單有兩種本質：工具，還是決策流程？

業界做久了，會慢慢發現一個分水嶺——表單其實有兩種完全不同的本質。

第一種：簡單表單（UI 表單）

適用場景：登入、訂閱、簡單留言。這類表單任務單一，就是收幾個欄位然後送出。

技術選擇：React Hook Form 搭配 Zod 跟 React Query，這組技 stack 在前端社群幾乎是標配，多數表單需求都撐得住。我自己在台中接案初期，前端同事也都是這套起手式。

第二種：複雜表單（決策引擎表單）

適用場景：報價系統、申請流程、多步驟診斷。這類表單的任務已經不是「收集資料」，而是「引導客戶做出決定」。

幾個徵兆，可以自己拿來對照手上的專案：

出現「根據前一題答案，顯示或隱藏某些欄位」的條件邏輯
有計算欄位——例如選項 A 加上選項 B 等於總價
有 skip 邏輯——例如「總額低於某個門檻就跳過審核步驟」
你開始寫跨欄位的驗證規則，而 Zod schema 已經表達不了

四個徵兆只要出現三個，基本上你手上的案子已經不是表單，而是一個決策流程。在台灣中小企業的官網專案裡，這種情境比你想的常見——只要牽涉到「報價」兩個字，幾乎都會長成這樣。

什麼時候該放棄 React Hook Form，轉向專業表單系統

工程師遇到複雜表單，第一個反射動作通常是「再加一個 useWatch 來處理這個」，然後再加一個 useEffect 處理那個，用到最後連 superRefine 都搬出來，只為了讓 Zod schema 能表達那條「總額超過 X 才能看到下一步」的規則。

同業之間流傳一句玩笑話：六個月後回去看那段 code，工程師自己都會說「我也不知道當時為什麼這樣寫」。

問題不在人，在框架選擇。當表單升級成決策引擎，你需要的是 SurveyJS 這類把表單當 JSON schema 來定義的系統，而不是繼續用表單框架硬湊。這也是為什麼 2026 年在台灣前端社群，「表單作為資料」這個關鍵字被搜尋的頻率明顯變高。

不做表單規劃的代價：每個月流失多少潛在客戶

讓我說一個在同業討論區看到蠻有代表性的數字。

一家做健康檢查的診所，原本表單塞了 30 個時段下拉選項，每天大約 15 人填表單，實際預約成功只有 3 人，轉化率 20%。後來他們把流程拆開，先問「您想要的時段是早上、下午、還是晚上？」，再根據回答顯示對應的 10 個時段選項。

結果：填單人數從 15 降到 13，但預約成功率從 20% 拉到 61%。

這種轉變的關鍵，某種程度上在 UX 判斷，在技術。很簡單的分類邏輯，帶來的成果往往比換一套 framework 還大。

四個問題測出你的表單體質

問題一：客戶填完表單後，會知道他的 request 現在在哪個階段嗎？

如果答案是否定的，這就是第一個改善點。表單不是送出就結束，它是一段客戶旅程的起點。

問題二：你的表單有沒有「放棄追蹤」機制？

客戶填到一半離開了——一份「未完成表單」的 Email 提醒，業界普遍能把放棄率壓低 20% 到 30%。這個功能多數網站都沒做。

問題三：表單收集到的資料，是你自己需要用，還是團隊需要用？

如果團隊要根據表單資料做後續行動，你需要考慮表單和內部系統（例如 CRM、ERP）的整合規劃，不是只管「收集到就好」。

問題四：如果表單需要修改欄位，工程師需要多少時間？

如果答案是「半天以上」，表單架構已經開始限制業務彈性了。在台灣，這種情況比想像中常見——很多企業每次想改一個欄位，都得等 IT 排程。

鍛碼匠怎麼做：客製化表單設計流程

我們在台中接每一個網站專案，都會把表單規劃當成一個獨立流程來處理。原因是：表單是客戶和企業的第一次正式接觸點，這個位置失手，後續行銷預算怎麼砸都很難救。

第一階段：診斷。 了解客戶現有表單的數據，填寫率、流失率、轉化率，有資料就先抓資料。

第二階段：分類。 判斷現有表單的本質是「工具」還是「決策引擎」，再決定要用哪種技術架構。

第三階段：設計。 根據 Business Goals 和 User Goals 設計表單流程，根據客戶「我們有什麼欄位要收集」這種反向邏輯。

第四階段：驗證。 上線前做實際用戶測試，至少找三個真實用戶走一次流程，觀察他們在哪個節點卡住。多數表單的問題在這個階段就能抓出來，不用等到上線才救火。

表單設計是網站規劃中最容易被低估的一環。多數人想的是「有個表單能收資料就好」，但真正區分一個好網站和普通網站的，往往就是這些細節——客戶在填單過程中感受到的流暢度，決定了他對這個品牌的第一印象。這個判斷，技術再好也很難事後補救。

如果你的網站表單已經上線一段時間，可以先試著回答上面四個問題。答案如果讓你不滿意，通常就是該重新思考的時候了。

🔨

品牌敘事與視覺風格的取捨｜網站設計技術趨勢
五種方案的成本結構與報價差異｜網頁設計完整決策指南
互動與動效的技術細節｜形象網站設計原則
架構與 SEO 技術層的細節｜SEO 完整策略
台中在地行情與廠商比較｜台中網頁設計完整決策指南