如何打造表單建構工具

表單建構工具讓人自行設計表單：選擇欄位、設定規則、發布連結，然後收集提交的資料。它的底層由三部分組成：以資料形式儲存的表單定義、把定義轉成可運作表單的渲染器，以及附帶通知與匯出功能的提交資料儲存區。動手前先確認你真的需要它：如果你只需要聯絡表單或申請表單，直接做那張表單就好，完全不必做建構工具。

你真的需要建構工具嗎？

建構工具比單一表單的工程大得多，因為每種欄位類型都必須在編輯器、公開表單、驗證、儲存、通知與匯出中全部正常運作。

表單建構工具需要什麼

表單定義

把每張表單儲存為一份欄位清單，以結構化資料保存（在 Postgres 的欄位中存 JSON 很合適）。一個欄位可能長這樣：

• id：穩定不變的 ID，即使標籤改了也不變
• type：文字、Email、數字、長文字、下拉選單、核取方塊、日期、檔案
• label 與說明文字
• required（必填）、min / max（最小／最大值）、允許的檔案類型
• 下拉選單的選項
• order（順序），以及可選的條件（「只有在欄位 X 為 Y 時才顯示」）

編輯器負責編輯這份清單，公開表單則讀取它。整個技巧就在這裡：每張新表單都不需要新程式碼。

提交資料

• 提交紀錄：表單、表單版本、提交時間、以欄位 ID 為鍵的答案、狀態（新、已讀、已封存）。
• 檔案：上傳的檔案應存放在檔案儲存空間中，提交紀錄只保存參照，而不是把檔案放進資料庫列中。

頁面

• 表單列表，附上提交數量。
• 編輯器：新增、重新排序與設定欄位，旁邊附即時預覽。
• 設定：確認訊息或導向網址、通知 Email、開放／關閉日期、提交數量上限。
• 公開表單，擁有自己的連結，並提供可嵌入其他網站的版本。
• 提交紀錄表，具備搜尋、狀態、詳情檢視與 CSV 匯出。

決策與取捨

版本管理。 總會有人在收到 200 筆提交後，把「電話」改成「手機號碼」。如果答案以欄位 ID 儲存，並且每筆提交都記錄表單版本，舊的提交仍能正確顯示。否則你的資料會悄悄地錯亂。

驗證要做兩次。 在瀏覽器端檢查欄位，可以快速給出回饋；但伺服器端也必須再驗證一次，因為任何人都能直接把資料送到你的端點。真正算數的是伺服器端的檢查。

檔案上傳。 它會帶來儲存成本、大小限制、檔案類型檢查與隱私問題（履歷、證件、醫療表單）。請限制檔案類型與大小，並預設將上傳檔案設為私人，只有表單擁有者可以讀取。參見如何為應用程式加入檔案上傳。

通知。 「有人提交時寄 Email 通知我」是基本需求。這需要 Email 服務商與 API 金鑰；參見如何從應用程式寄送 Email。

垃圾提交。 公開表單一定會被機器人找到。可以使用蜜罐欄位（對人隱藏、機器人會填寫）、依 IP 的頻率限制、伺服器端驗證，必要時加上 CAPTCHA 服務。

嵌入。 對於放在別人網站上的表單，iframe 嵌入最簡單也最安全。script 嵌入看起來比較原生，但比較難建置，也比較難保護。

條件邏輯。 「只有在…時才顯示此欄位」很受歡迎，但會使測試量成倍增加。等基本功能穩定後再加入。

一句好用的第一個提示

為我的團隊打造一個表單建構工具網頁應用程式。登入的使用者在具有即時預覽的編輯器中建立表單。欄位類型：短文字、長文字、Email、數字、日期、單選下拉、核取方塊與檔案上傳。每個欄位都有穩定的 ID、標籤、說明文字、必填旗標，以及依類型設定的規則（最小／最大值、選項、允許的檔案類型，以及 10 MB 的大小限制）。以 JSON 儲存表單定義，並附上每次發布就會遞增的版本號。每張表單都有公開連結與 iframe 嵌入碼。提交內容要依已發布的版本在伺服器端驗證，答案以欄位 ID 加上表單版本儲存，上傳檔案放在私人檔案儲存區。加入隱藏的蜜罐欄位與依 IP 的頻率限制。表單擁有者可以看到提交表格，包含狀態（新、已讀、已封存）、詳情檢視與 CSV 匯出。所有資料存入資料庫。條件邏輯與 Email 通知留到之後再做。

建置步驟

1. 編輯器與定義。 用每種欄位類型建立一張表單，並和代理程式一起查看儲存的 JSON。它乾淨且穩定嗎？
2. 公開表單。 用手機填寫一次，檢查驗證訊息與確認畫面。
3. 伺服器端驗證。 請代理程式直接把違反規則的提交送到伺服器，略過頁面。系統應該拒絕它。
4. 版本管理。 在收到幾筆提交後重新命名與調整欄位順序。舊的提交仍應顯示正確的答案。
5. 上傳。 試著上傳一個太大的檔案與一個錯誤類型的檔案。確認陌生人無法透過猜測連結打開已上傳的檔案。
6. 提交表格與匯出。 檢查 CSV 匯出，答案中包含逗號、換行與重音符號的情況。
7. 通知、嵌入、邏輯。 一次加入一項。

常見錯誤

• 以標籤儲存答案。 標籤會變動，請使用穩定的欄位 ID。
• 只在瀏覽器端驗證。 那只是方便，不是保護。
• 公開的上傳檔案。 表單常收集人們不希望外洩的文件。
• 沒有垃圾防護。 公開表單可能在幾天內被灌滿垃圾資料。
• 為一張表單做建構工具。 直接做那張表單就好。
• 公開產品中無上限的提交。 如果客戶可以自行建立表單，請依方案設定上限，否則一張熱門表單就可能讓你的主機費用暴增。

什麼時候現成產品比較好

代管的表單工具對大多數需求來說既好用又便宜。它們已經解決了嵌入、垃圾防護、付款、整合與數十種欄位類型的無障礙問題。如果你的團隊只是需要表單，就直接用一個。參見Typeform 替代方案與Google 表單替代方案。

當提交的資料需要和你自己的資料放在一起（例如餵入你自己經營的 CRM 或客戶入口網站）、當提交後需要工具無法做到的工作流程、當資料位置或所有權是硬性要求，或是當表單本身就是你要銷售的產品功能時，就適合自己打造。

用 Mythex 打造

在 Mythex 中，你用對話描述建構工具，並在即時預覽中同時測試編輯器與公開表單。當應用程式需要儲存表單定義與提交資料時，Mythex 會加入專用的資料庫；當應用程式需要上傳功能時，會自動啟用檔案儲存（免費方案上限為 1 GB）。通知 Email 透過你以自己的金鑰連接的服務商發送。把應用程式發布到 mythex.ai 連結，或在 Pro 方案使用你自己的網域，公開表單連結就能從那裡運作。

常見問題