什麼是表單建構器？

表單建構器讓您透過視覺化編輯器建立自訂表單。新增文字欄位、下拉式選單、核取方塊等，然後匯出為 HTML 程式碼或 JSON Schema。

提供十四種欄位類型：文字、電子郵件、電話、網址、數字、日期、檔案上傳、評分量表、下拉選單、核取方塊、單選按鈕、多行文字、用於引導文字的說明區塊，以及把長表單拆成多步的分頁符。每個輸入欄位都可設定標籤、選填的說明文字、提示文字、必填標記，下拉和單選還可設定選項清單。可從現成範本（聯絡、意見回饋、問卷、報名、訂購、預約）起步，用上下箭頭調整欄位順序，即時預覽並查看跨頁進度條，然後匯出可直接貼到任何網站的整潔樣式 HTML 頁面，或用於後端驗證的 JSON 結構描述。

使用方法

1. 第 1 步——點選「新增欄位」插入新欄位並選擇類型（文字、電子郵件、電話、網址、數字、日期、檔案、評分量表、下拉選單、核取方塊、單選按鈕或多行文字），插入分頁符可把長表單拆成多步，也可載入現成範本快速開始。
2. 第二步 — 點擊任一欄位，設定其標籤、預設文字和是否為必填。
3. 第三步 — 即時預覽表單效果，然後匯出 HTML 程式碼或 JSON Schema 整合至您的專案中。

何時使用

• 為靜態網站快速建立報名或回函表單並嵌入頁面。
• 交給工程師實作之前,先做出表單原型。
• 教學 HTML 表單基礎,學生不必逐一手打 input。

結果

一位教師建立班級報名表：學生姓名（必填文字欄位）、年級（下拉選擇：9-12年級）、電子郵件（格式驗證）、備註（多行文字），然後匯出 HTML 嵌入學校網站。

常見問題

使用者送出表單後,資料會送到哪裡?

預設不會送到任何地方。匯出的 HTML 沒有 action 網址,因此送出不會傳送出去,資料也不會離開裝置。要收到回覆,需要把 action 指向自己的 API、Formspree、Google 表單或無伺服器函式。

可以把現有的表單匯回編輯器嗎?

目前不支援。匯出是單向的:編輯器到 HTML 或 JSON。日後若要修改,請保存 JSON Schema 再手動重建,或在迭代完成前保持編輯視窗開啟。

為什麼下拉選單沒有選項?

下拉與單選按鈕至少需要一個項目。點擊欄位、展開「選項」區域,以逗號或換行分隔輸入每個選項。若清單為空,生成的下拉選單就是空白的。

匯出的 HTML 是否帶樣式?

會。現在每次匯出的 HTML 都內建一小段樣式表,開啟檔案即可看到整潔易讀的表單:合理的間距、輸入框邊框、聚焦光圈,以及帶樣式的送出按鈕。這段 CSS 精簡且自成一體,你可以原樣保留,也可以刪除樣式區塊換上自己的 Tailwind、Bootstrap 或框架類別。

HTML 與 JSON 匯出有什麼差異?

HTML 可直接貼到頁面渲染。JSON 則是一份結構化的描述檔,記錄欄位類型、標籤與驗證規則,適合用 React、Vue 或 react-hook-form、Formik 等表單函式庫渲染。

相關工具