這篇和「流程規劃師」那篇一樣，不談表單該怎麼設計，只講「手要怎麼動」：表單範本清單頁有什麼、設計器的畫面分幾塊、元件怎麼拖進去、編輯對話框七個分頁各管什麼、中文欄位名稱為什麼會存不進去、風格與底圖怎麼設、儲存和版本怎麼算。最後補一張常見狀況速查表。

操作環境是 BeakPlatform 的表單流程模組。設計器的進入路徑是左側選單的「表單範本」，網址是 /forms/templates。畫布本身是 form.io 的 builder（5.3.1 版），拖欄位、改屬性那套是它的；本篇把篇幅放在 BeakPlatform 自己加上去的部分，form.io 原生的操作只給速查。表單做好之後怎麼和流程接起來、填單的人看到什麼，是下一篇「配對與表單中心」的事。

一、表單範本清單頁

進到 /forms/templates，右上角三顆按鈕：[重新載入]、[匯入]、[+ 新增表單模板]，按鈕左邊是搜尋框與「清單／縮圖」兩種檢視的切換。預設是縮圖模式，每張卡片是表單的縮圖，點卡片直接進設計器；縮圖是每次儲存後在背景產生的，剛存完回到清單會空個幾秒再出現。

搜尋框下方一排分類晶片，父分類底下有子分類的會顯示成「父 / 子」，晶片上的數字是該分類的表單數。清單只顯示選中那一個分類的表單，切換後會記住，下次進來還是同一個分類。

（圖01：表單範本清單頁，縮圖模式，標出 [+ 新增表單模板]、檢視切換、分類晶片）

切到清單模式，表格欄位是：名稱、代碼、描述、版本、配對、狀態、更新時間、操作。幾個欄位的意思：

清單模式才有勾選框。勾了任何一筆，表格上方會出現批次工具列：[反選]、[匯出]、[另存新版]、[刪除]。刪除只在這裡，每一列的操作欄沒有刪除鍵。刪除前系統會先查這張表單有沒有被配對使用，有的話對話框裡會列出流程名稱與是否已發行，並提醒「刪除後配對將無法重新發行，但不影響已執行的流程」。

[+ 新增表單模板] 開一個對話框：名稱（必填）、代碼（留空自動產生）、分類、描述、啟用。按 [建立表單模板] 之後直接進設計器，畫布上已經有一個置中的表單名稱標題。

（圖02：新增表單模板對話框）

[匯入] 吃的是 [匯出] 產生的 JSON 檔（一個 items 陣列），可以一次帶多張；設計器裡的「上傳範本」則是吃單張表單的 schema，兩者不通用，第十節再講。

二、設計器的三個區塊

進入設計器後，畫面分成三塊：上方兩列工具列、左欄元件清單、右邊的畫布。沒有右欄，元件的屬性是用對話框改的。

（圖03：設計器全貌，標出工具列第一列、第二列、左欄、畫布）

第一列是「這張表單是誰」與儲存類按鈕：

第二列是工具與樣式：

三、左欄：七個元件群組

左欄最上面是搜尋框，打字會過濾下面所有群組的元件。群組是手風琴式，點標題展開、再點收起，一次只開一個。實際看到的群組與元件如下（括號裡是 form.io 的原名）：

「平台元件」與「系統申請單專用」兩個群組只有企業管理員以上看得到，一般持有表單設計師角色的員工不會有這兩組。

四、滑鼠：拖曳是唯一的加入方式

這一點和流程設計器不同：左欄的元件點一下沒有反應，一定要按住拖到畫布上放開。放開的位置就是它在表單裡的順序，可以放在既有元件之間，也可以放在最上面那個標題的上方。畫布本身沒有右鍵選單、沒有框選，也沒有復原。

放開的那一刻，該元件的編輯對話框會立刻打開（第五節）。按 [取消] 元件還是會留在畫布上，只是用預設屬性。

滑鼠移到畫布上任何一個元件，它的右上角會出現一排六顆小按鈕，由右到左：

（圖04：滑鼠移到元件上出現的六顆小按鈕）

要調整版面（兩欄並排、分頁籤），先拖「版面配置」群組的容器進畫布，再把欄位拖進容器的格子裡。容器的格子在畫布上是虛線框，拖進去放開就算。

五、編輯對話框的七個分頁

每個輸入型元件的對話框都長一樣：左邊七個分頁，右邊是即時預覽，下面 [儲存]、[取消]、[移除]。分頁內容是 form.io 的，這裡只列會用到的：

（圖05：文字欄位的編輯對話框，顯示分頁，右側有即時預覽）

七個分頁裡最要緊的是 API 分頁的「屬性名稱」。它是這個欄位在資料裡的名字，流程節點讀欄位、寫欄位、分支條件、外部系統用 API 建單，認的都是它，不是畫面上的標籤。第七節再說它的用途，第六節先講它在中文環境會踩到的坑。

六、中文欄位名稱的陷阱：這篇最重要的一節

把一個文字欄位拖進畫布，在「顯示」分頁把標籤改成「申請人姓名」，再按 [儲存]。結果是儲存被擋下來，對話框上方出現一段英文：

The property name must only contain alphanumeric characters, underscores,
dots and dashes and should not be ended by dash or dot.

原因在 API 分頁：form.io 會依標籤自動產生屬性名稱，標籤是中文，它就產生「申請人姓名」當屬性名稱，然後又用「只准英數、底線、點、連字號」的規則驗證它，自己把自己擋住了。標籤是英文時沒事，Applicant Name 會自動變成 applicantName。

（圖06：標籤填中文後按儲存，被屬性名稱的驗證擋下的畫面）

兩種做法：

做法一：到 API 分頁自己填屬性名稱。 標籤照填中文，切到 API 分頁把「屬性名稱」改成英文，例如 applicant_name，再儲存就過了。欄位不多的時候這樣最直接。

做法二：用「提示→標籤」。 這是平台替中文環境加的機制，工具列第二列那個勾選框預設是開的。做法是標籤不動（留著 form.io 給的 Text Field），把中文填在「顯示」分頁的「提示文字」裡，按 [儲存]：

兩個直線 || 是分隔符，前段變標籤、後段留在提示文字。屬性名稱維持 form.io 從英文標籤產生的那個，所以若同一張表單拖了第二個文字欄位，會自動變成 textField1。想要有意義的名稱，拖進來時先把英文標籤改成想要的（例如 Applicant，屬性名稱會跟著變成 applicant），再填中文提示文字。

（圖07：提示文字填「申請人姓名||請輸入全名」儲存後，畫布上的欄位標籤與提示文字）

一件要知道的事：這個交換在伺服器端也會做一次。按工具列的 [儲存] 送出去時，後端會再掃一遍整張表單，提示文字含中文的元件一律交換成標籤。所以就算把「提示→標籤」的勾拿掉，提示文字裡的中文在存檔後還是會跑到標籤去；想讓填單者看到中文的提示文字，一定要用 || 把它放在後段。

七、屬性名稱是給誰用的

表單存的資料是一個 JSON，每個欄位用屬性名稱當鍵。認這個鍵的有四個地方：

• 流程設計器的「讀取欄位」「寫入欄位」節點：下方控制面板的「表單欄位」分頁列出的就是配對表單的所有屬性名稱。
• 分支節點的條件：寫 f.applicant_name，f. 後面接的是屬性名稱。
• 外部系統建單：POST /api/trigger/form 的 form_data 用屬性名稱當鍵，給了不存在的鍵會回 400 並列出合法的鍵。
• 必填驗證：「驗證」分頁勾了必填，除了填單頁會擋，送出到伺服器時也會再驗一次；有條件顯示、隱藏、按鈕類的元件伺服器會跳過不驗。

所以屬性名稱一旦被流程或外部系統用上，改了就要連著改。改標籤沒關係，改屬性名稱等於換了一個欄位。

另一個會靜默出錯的是「日期時間」元件：預設送出的是含時間與時區的 ISO 字串，流程節點如果只想要 2026-10-10 這種純日期，要在元件的設定裡把儲存格式改成純文字、關掉時間、格式填 yyyy-MM-dd。送出一張後到資料裡看一次值長什麼樣，比事後找為什麼比對失敗快。

八、平台元件與系統申請單專用

「平台元件」兩個：

（圖08：人員選擇元件按 [選擇] 後彈出的部門人員樹）

「系統申請單專用」三個：API表單選擇、代理限定表單選擇、可委任角色選擇。它們是「API Key 申請單」與「代理指定申請單」的零件，只有搭配 ApiKeyIssue、OpProxyGrant 這兩個流程節點才有作用，放進一般業務表單不會發生任何事。出廠的兩張申請單已經接好，正常情況不需要自己拖。

九、風格、寬度、底圖

風格下拉有三個：formio預設、建議平行、正式扁平。新表單預設是「建議平行」，效果是標籤放在欄位左邊、佔 15% 寬。切換風格會立刻改寫畫布上每一個欄位的標籤位置與寬度，之後新拖進來的也照新的；切回 formio預設則把這些屬性全部拿掉，回到標籤在上方的原生樣子。單一欄位想不一樣，在它的「顯示」分頁改標籤位置就好，但再切一次風格會被蓋回去。

寬度三顆按鈕加一個輸入框。新表單預設「寬」1200px，畫布會變成一張置中的白紙，超出的部分看得出來。「不限」等於目前瀏覽器的寬度。輸入框最小 300，點進去沒值時會先帶 1400。這個寬度會一起存起來，填單頁與預覽都照它。

底圖開一個對話框：左邊是目前底圖的預覽，右邊是透明度（預設 30%）、顯示方式（符合、填滿、拉伸、原始大小、拼圖平鋪、拼圖位移交錯）、位置（置中、靠上、靠下、靠左、靠右），下面可以上傳新圖（PNG、JPG、GIF、WebP，最大 5MB）或從圖庫挑。圖庫和流程設計器的「底圖管理」是同一個，那邊傳的圖這邊也看得到。改完按 [套用] 才會生效，[取消] 不留。

（圖09：底圖設定對話框）

十、範本、Schema、預覽

[載入範本] 列出四個內建範本：基本表單、請假單、費用報銷單、採購申請單，都是 form.io 的 schema。選一個按 [載入範本]，整個畫布被換掉，有未儲存變更會先問一次。表單名稱是空的才會被範本的名稱填上，已經有名稱不會動。

[上傳範本] 選一個 .json，格式是單張表單的 schema（最外層要有 components），一樣整個覆蓋。要留意它和清單頁的 [匯入] 不同：那邊吃的是 [匯出] 產生、帶 items 陣列的檔，這邊吃的是單張 schema，拿錯檔會被擋下來。

[Schema] 彈出目前整張表單的 JSON，可以直接改，按 [套用變更] 立刻反映到畫布，格式錯會在下方顯示錯在哪。要批次改很多欄位的屬性，在這裡改比一個一個開對話框快。套用之後記得按 [儲存]，Schema 視窗本身不存檔。

[表單預覽] 開的是可以輸入的預覽，必填、格式驗證都會動，右上角可以切「正常」「全覽」，全覽會把整張表單縮到一個畫面內並顯示縮放比例。[列印預覽] 是唯讀的，右上角 [列印] 直接叫出瀏覽器的列印。兩種預覽都會套上目前的風格、寬度與底圖。

（圖10：表單預覽，切到全覽模式）

十一、儲存、版本、放棄

兩件容易誤判的事：

• 剛建立、從沒按過儲存的表單，按 [放棄] 會把這筆記錄整個刪掉，清單裡不會留下一張空白表單。「從沒按過儲存」指的是在設計器裡沒按過 [儲存] 或 [儲存並離開]，清單頁那個新增對話框不算。
• 一進設計器就會被當成「有未儲存變更」，因為載入時會套一次寬度設定。所以什麼都沒動就按 [放棄]，還是會跳確認對話框，這是正常的。

沒有編輯權限的人開設計器，工具列上方會出現「唯讀模式」的黃色提示，[儲存]、[儲存並離開]、[另存新版] 三顆都是灰的，其他按鈕照常可以看。

十二、常見狀況速查

下一篇講「配對與表單中心」：表單做好之後怎麼和流程接起來發行，以及填單的人在表單中心看到什麼。