聯絡表單編輯器：欄位類型與排版技巧

表單編輯器是你拖拉欄位、改順序、設條件的地方。本篇講編輯器的 3 個區塊、可用欄位類型、以及最常用的 5 個欄位設定技巧。

編輯器的 3 個區塊#

從後台「聯絡表單」點進任一個表單，畫面分成 3 塊：

  • 左側欄位庫：所有可拉的欄位類型，按住拖到中間放
  • 中間表單預覽：實際表單長什麼樣，可以拖拉欄位改順序
  • 右側欄位設定：點任一個欄位，這邊會打開該欄位的所有設定（標籤、必填、placeholder、預設值、條件邏輯）

常用欄位類型#

基本欄位（最常用）#

  • 姓名：自動拆「姓」「名」兩格，可改成單欄
  • 電子郵件：內建 email 格式驗證
  • 電話：內建電話格式驗證、支援國際區碼
  • 單行文字：給「主旨」「公司名」這類短輸入
  • 多行文字：給「訊息內容」「備註」這類長輸入
  • 數字：純數字輸入，可設最小值、最大值
  • 網址：URL 格式驗證

選擇類欄位（給選項）#

  • 下拉選單：選項多時用、節省版面（例如國家、產業）
  • 單選按鈕：選項 2-5 個、希望全部攤開讓使用者一眼看到
  • 核取方塊：可複選（例如「我感興趣的主題」）
  • 同意條款：單一勾選框、常用於勾「我已閱讀隱私權政策」

時間／日期欄位#

  • 日期：跳出月曆讓使用者點選
  • 時間：時:分
  • 日期時間：兩個合併

檔案／版面欄位#

  • 檔案上傳：讓使用者傳附件（履歷、報名資料）
  • 分隔線：在表單中間加視覺分段
  • HTML 區塊：插自訂文字、說明、超連結
  • 區塊容器：把多個欄位放成 2 欄、3 欄並排

常用欄位設定（5 個技巧）#

1. 設「必填」避免空欄位#

點欄位 → 右側設定打勾「必填欄位」。送出時若空著，會跳警告不讓送。一般姓名、Email、訊息會設必填，電話可設可不設。

2. 用 placeholder 給輸入提示#

placeholder 是輸入框內的灰色提示字（例如「請輸入您的全名」）。比把所有規格寫在標籤裡省版面、又能引導使用者填對格式。

3. 用「條件邏輯」做分支#

每個欄位都可設「只有當 X 欄位等於 Y 時才顯示」。例如：

  • 「請選擇身分」選「企業」 → 才顯示「公司名稱」「統編」欄位
  • 「您是否為現有客戶」選「否」 → 才顯示「您是怎麼知道我們的」

在欄位的「條件邏輯」分頁開啟，加條件即可。

4. 用「區塊容器」做 2 欄並排#

姓和名、電話和 Email 這類兩兩相關的欄位，放成 2 欄並排比直線排列省版面。從左側欄位庫拉「2 欄容器」進中間，再把欄位拉進左右兩格。

5. 用「預設值」減少使用者輸入#

每個欄位可設預設值。常用情境：

  • 登入會員自動帶入姓名、Email（用「動態預設值」抓 WordPress 使用者資料）
  • 從特定頁面導流的人預先選好「興趣」欄位（用 URL 參數帶入）
  • 多選欄位預設勾「我同意接收電子報」（提高訂閱率）

儲存後的 4 個步驟#

編輯器右上角「儲存」之後，建議照這 4 步檢查：

常見問題

條件邏輯可以多層嗎？

可以。一個欄位可同時設多條件、也支援「全部符合（AND）」與「任一符合（OR）」邏輯。實務上 2-3 層條件已夠用，超過建議拆成兩個獨立表單避免使用者困惑。

上傳檔案有大小限制嗎？

秒站預設單檔上限約 1MB，我們並不建議您輕易讓客戶傳任何檔案到伺服器。

可以複製欄位嗎？

可以。欄位上方滑鼠移過會出現「複製」按鈕、按一下會在下方複製一個一模一樣的欄位（含所有設定、條件邏輯）。改幾個字節省設定時間。

欄位順序怎麼改？

拖拉。在中間預覽區把欄位用滑鼠按住拖到新位置、放開即可。也可以用鍵盤快捷鍵（選中欄位後按 ↑ ↓）做精細調整。