如何在WordPress表單中建立下拉式選單

下拉式選單是表單中的主力軍。無論是選擇國家/地區、類別或偏好排序，只要使用者需要從預先定義的清單中進行選擇，下拉式選單都能勝任。它們節省空間、規範數據，並引導使用者找到有效的選項。以下是如何在 WordPress 表單中建立高效的下拉式選單。

為什麼要使用下拉式選單？

相較於文字欄位的優勢

• 標準化數據： 沒有拼字錯誤或變體
• 引導式選擇： 用戶可以看到可用選項
• 節省空間： 已折疊，點擊後才會顯示
• 行動友善： 手機上的原生拾音器
• 更快完成： 點選與輸入

比起單選按鈕的優勢

• 更適合長列表： 6 種以上的選擇適合小空間
• 外觀更整潔： 減少視覺雜亂
• 可捲動： 處理數十種選項

何時使用下拉式選單

• 6 個以上選項（少於 6 個選項請考慮單選按鈕）
• 預定義的已知選項
• 必須選擇一項
• 空間有限
• 數據標準化至關重要

建立基本下拉選單

步驟 1：新增下拉字段

1. 開啟您的表單 空軍基地
2. 發現 落下 字段類型
3. 拖曳到您的表單

步驟 2：配置標籤

標籤：「您是如何得知我們的？」佔位符：「請選擇一個選項…」必填：是/否

步驟 3：新增選項

請將每個選項寫在新的一行中：

Google搜尋 社群媒體 朋友或同事 廣告 部落格或文章 其他

步驟4：預覽和測試

1. 保存表格
2. 前端預覽
3. 點擊下拉選單以確認選項
4. 提交測試條目

下拉式選單配置選項

基本設置

• 標籤： 問題或提示
• 佔位符： 預設文字（例如，“選擇…”）
• 要求： 必須選擇提交
• 幫助文本： 附加說明

選項設定

• 選項清單： 可供選擇的
• 預設已選擇： 預選選項
• 檢索： 輸入以篩選
• 多選： 選擇多個

新增下拉選項

簡單列表

選項1 選項2 選項3 選項4

值與標籤不同

展示一種東西，儲存另一種東西：

顯示：“美國” 值：“US” 顯示：“英國” 值：“UK”

分組選項（Optgroups）

北美洲——美國、加拿大、墨西哥——歐洲——英國、德國、法國

很多選擇

如果清單很長，請考慮：

• 按字母順序
• 最常見的選項優先
• 啟用搜尋功能
• 邏輯分組

佔位符文本

什麼是佔位符？

使用者選擇選項前顯示的文字：

[選擇一個選項... ▼] ← 佔位符

好的佔位符範例

“請選擇您的國家/地區…” “請選擇類別…” “請選擇時段…” “-- 請選擇 --” “請選擇一項”

佔位符最佳實踐

• 保持簡短
• 明確說明這是一個提示
• 不要將其作為有效選項使用
• 請考慮“– 選擇 –”格式

可搜尋下拉式選單

哪些內容可以搜尋？

使用者可以透過輸入文字來篩選選項：

[輸入搜尋內容... ▼] 使用者輸入：「ger」 顯示：德國、阿爾及利亞、尼日

何時啟用可搜尋功能

• 20多個選項
• 國家/州列表
• 產品目錄
• 任何長列表

啟用可搜尋功能

1. 選擇下拉字段
2. 尋找“可搜尋”選項
3. 開啟

可搜尋的使用者體驗

1. 使用者點選下拉選單 2. 顯示文字輸入框 3. 使用者輸入部分符合項目 4. 選項即時篩選 5. 使用者從篩選後的清單中選擇

多選下拉選單

單選與多選

單選：使用者選擇一個選項；多選：使用者選擇多個選項。

何時使用多選

• 請選擇所有適用項
• 多種興趣/偏好
• 選擇多個類別
• 當複選框佔用太多空間時

啟用多選

1. 選擇下拉字段
2. 找到“允許多選”
3. 開啟

多選外觀

[網頁設計、SEO、行銷▼] 精選項目以標籤/索引顯示

多選限制

結合最小值/最大值選擇：

選擇 2-4 個主題」 最少 2 個，最多 4 個

配置範例

範例 1：國家/地區選擇

標籤：「國家」 佔位符：「選擇您的國家…」 可搜尋：是 必填：是 選項：[按字母順序排列的 195 多個國家/地區]

範例 2：查詢類型

標籤：「您想諮詢什麼？」佔位符：「選擇類別…」必填：是 選項：- 銷售 - 支援 - 帳單 - 合作夥伴 - 新聞/媒體 - 其他

範例 3：預算範圍

標籤：「您的預算是多少？」佔位符：「選擇範圍…」必填：否 選項：- 低於 1,000 美元 - 1,000 美元 - 5,000 美元 - 5,000 美元 - 10,000 美元 - 10,000 美元 - 25,000 美元 - 25, 25,55,000 美元尚未確定

範例 4：時間段

標籤：「首選預約時間」 佔位：「請選擇時間…」 必填：是 選項： - 上午 9:00 - 上午 10:00 - 上午 11:00 - 下午 1:00 - 下午 2:00 - 下午 3:00 - 下午 4:00

範例 5：多選興趣

標籤：「感興趣的主題」 佔位符：「選擇主題…」 多重選擇：是 可搜尋：是 選項：- 技術 - 商業 - 行銷 - 設計 - 開發 - 分析 - 安全 - 人工智慧/機器學習

範例 6：分組服務

標籤：「您需要哪項服務？」選項：--- 網路服務 --- - 網站設計 - 網站開發 - 電子商務 --- 行銷 --- - SEO - PPC - 社群媒體 --- 支援 --- - 維護 - 主機託管 - 諮詢

預設選擇

無預設值（建議）

[請選擇一個選項... ▼]

用戶必須主動選擇。最適合必填欄位。

預選預設值

[美國 ▼] ← 預選

使用情況：

• 其中一種選擇極為常見。
• 加快表格填寫速度
• 存在邏輯預設值

設定預設值

1. 在選項清單中，標記預設選項
2. 或在設定中設定“預設值”。

下拉式選單與單選按鈕

使用下拉式選單

• 6多個選項
• 完整清單（國家、州）
• 空間有限
• 期權的性質類似

何時使用單選按鈕

• 2-5 選項
• 所有選項都應可見。
• 選項均有描述。
• 視覺比較很重要

並排比較

下拉選單（6 個以上選項，點擊前隱藏）：[選擇套餐... ▼] 單選按鈕（2-5 個選項，全部可見）：○ 免費 ○ 基礎版（9 美元/月） ○ 專業版（29 美元/月） ○ 企業版（聯絡我們）

樣式下拉選單

預設外觀

下拉式選單繼承表單樣式：

• 邊框顏色/半徑
• 背景顏色
• 字型系列/字號
• 填充

自訂樣式選項

• 下拉箭頭圖標
• 所選項目外觀
• 選項懸停狀態
• 多重選取標籤樣式

移動造型

原生移動下拉選單：

• iOS：輪盤選擇器
• Android：材質選擇器
• 與作業系統一致

最佳實踐

1. 訂單選項的邏輯性

• 按字母順序排列： 國家名稱
• 數字： 數量、範圍
• 頻率： 最常見的
• 時間順序： 時段、日期

2. 保持選項簡潔

好：“美國” 避免：“美利堅合眾國（USA）” 好：“1,000 - 5,000 美元” 避免：“一千美元到五千美元之間”

3. 酌情新增「其他」選項

選項：- Google - Facebook - LinkedIn - 好友推薦 - 其他 ← 擷取特殊情況

4. 使用佔位符，而不是首選方案

正確做法：佔位符：「選擇…」 選項：選項 1、選項 2、選項 3 避免做法：選項：「選擇…」、選項 1、選項 2（第一個選項不應該是提示）

5. 啟用長列表搜索

任何包含 15-20 個以上選項的下拉式選單都應該支援搜尋功能。

6. 考慮負載效能

非常長的清單（1000 條以上）可能需要：

• 延遲加載
• 伺服器端搜尋
• 細分為子類別

下拉式選單的常見使用場景

聯繫表格

- 部門（銷售、支援、結算）- 諮詢類型（問題、回饋、投訴）- 您是如何得知我們的

報名表格

- 國家 - 州/省 - 行業 - 公司規模 - 職位/角色

訂購單

- 產品選擇 - 數量 - 尺寸/顏色選項 - 配送方式

調查表

- 評分等級（1-10） - 頻率（從不到總是） - 同意程度（從非常不同意到非常同意）

預約表格

- 服務類型 - 首選日期 - 時段 - 時長

故障排除

下拉式選單未顯示選項

• 確認選項已儲存
• 檢查選項清單是否為空白
• 清除快取並刷新

搜索不工作

• 確認已啟用搜尋功能
• 檢查 JavaScript 錯誤
• 在不同瀏覽器中測試

多選未儲存所有選擇

• 確認已啟用多選功能
• 檢查表單提交處理
• 減少選項數量進行測試

行動端選擇器未顯示

• 自訂樣式可能會覆蓋原生樣式。
• 在實際行動裝置上進行測試
• 檢查是否有 JavaScript 衝突

無障礙服務

鍵盤導航

• Tab 鍵聚焦下拉選單
• 使用方向鍵導航
• 按 Enter/空白鍵選擇
• 輸入第一個字母即可跳轉

屏幕閱讀器

• 標籤已正確關聯
• 已公佈的選擇權
• 已確認入選

最佳實踐

• 清晰、描述性的標籤
• 邏輯選項順序
• 避免將佔位符作為唯一指令

摘要

建立下拉式選單：

1. 新增下拉式選單字段 – 拖曳以形成
2. 設定標籤 清晰的問題/提示
3. 新增佔位符 – “選擇…”文本
4. 輸入選項 每行一個
5. 啟用可搜尋功能 – 對於長列表
6. 啟用多選 – 如果需要多個選項
7. 設定所需 – 依表格需求
8. 徹底測試 所有選項，所有設備

結語

下拉式選單能夠有效率地處理表單中的選項選擇。它們節省空間、規範數據，跨裝置相容性強。對於較短的列表，可以考慮使用單選按鈕。對於較長的列表，可以啟用搜尋功能。對於多選，可以使用多選模式。正確的配置能夠使下拉式選單成為強大的輸入字段，從而提升使用者體驗和資料品質。

自動表單產生器 包含功能齊全的下拉式選單字段，支援搜尋模式、多選選項和自訂樣式。幾分鐘即可建立專業的下拉式選單。

準備要新增下拉式選單了嗎？ 下載自動表單產生器 立即開始建立帶有下拉式選單的表單。