如何在 WordPress 中設置多選下拉字段(簡單方法)

已發表: 2020-10-26

您是否需要在 WordPress 中添加多選下拉字段? 多選下拉菜單是讓用戶從列表中選擇 1 個以上選項的好方法。

在本文中,我們將向您展示一種簡單快捷的方法來製作您自己的多選下拉菜單。 您無需編寫任何代碼即可創建下拉菜單並將其添加到您的網站。

立即創建您的 WordPress 表單

如何在下拉列表中選擇多個選項?

使用 WPForms,您可以將任何下拉列表設置為多選下拉列表。

當您的訪問者單擊列表中的項目時,下拉菜單將保持打開狀態,以便他們可以進行更多選擇。

表單上的 WordPress 多下拉列表

WPForms 是最好的 WordPress Form Builder 插件。 免費獲取!

此下拉菜單還允許您搜索選項。 因此它非常適合長列表,例如國家/地區的下拉列表。

我們將向您展示自己製作多選下拉菜單的簡單方法。

如何在 WordPress 中設置多選下拉字段

讓我們來看看我們將在本教程中完成的步驟。

  1. 安裝 WPForms 插件
  2. 創建您的表單
  3. 在表單中添加多選下拉字段
  4. 在您的網站上發布您的表單

好的,讓我們開始安裝我們將要使用的插件。

第 1 步:安裝 WPForms 插件

WPForms 是 WordPress 最好的表單構建器。 使用拖放構建器為您的網站創建任何表單非常容易。

要開始製作表單,您需要在 WordPress 中安裝並激活 WPForms 插件。 如果您在這一步需要幫助,請查看此安裝插件的初學者指南。

搞定? 讓我們繼續創建您的第一個表單。

第 2 步:創建表單

現在我們將製作一個基本表單並為其添加一個下拉列表。

在這個例子中,我們將製作一個帶有日期選擇器和下拉菜單的志願者表單。

WPForms 有一個很棒的志願者申請表格模板。 但是對於這個例子,我們將使用簡單的聯繫表單作為起點。

首先,打開您的 WordPress 儀表板,然後單擊WPForms » Add New

添加新表單以添加多步下拉列表

繼續並在頂部為您的表單輸入名稱。 然後單擊 Simple Contact Form 模板以在瀏覽器中打開它。

在 WPForms 中打開簡單的聯繫表單模板

現在模板已打開,您將看到我們已經有 3 個字段:

  • 姓名
  • 電子郵件
  • 評論或留言

為多選下拉字段構建新表單

讓我們添加一個日期字段,以便填寫表單的人可以選擇他們想要提供幫助的日期。

首先,將日期/時間字段從表單構建器的左側拖到右側。 然後在日期/時間字段上單擊一次以打開設置。

我們將在這裡自定義 2 個基本設置:

  • 更改標籤文本以適合您的表單
  • 使用下拉菜單將其更改為僅日期字段。

將日期時間字段更改為日期

現在向下滾動到高級選項並單擊它以展開設置。

展開日期字段的高級選項

我們只需要工作日的志願者,所以讓我們點擊限制天數,讓周末變灰。 為此,只需選擇週一至週五:

在時間和日期字段中限制天數

好了,大功告成,我們可以點擊Save 了

讓我們繼續添加我們的多選下拉菜單。

第 3 步:向表單添加多選下拉字段

在這一步中,我們將添加一個下拉字段,然後對其進行自定義以接受多項選擇。

首先,讓我們將下拉列表拖到表單上。 然後單擊該字段,以便在左側打開設置。

將多選下拉菜單拖到表單上

如果需要,您可以從 WordPress 的其他部分(例如您的帖子或產品)自動填充下拉列表。 您可以在本文中了解如何使用動態字段選擇。

但是,如果您想對列表進行硬編碼,WPForms 可以輕鬆實現。 它帶有一些有用的下拉字段預設列表。 為了加快速度,我們將使用其中一個預設添加美國州的列表。

首先,繼續並單擊下拉字段設置中的批量添加

向多選下拉菜單批量添加選項

然後單擊“顯示預設”以打開所有可用的預設列表。

顯示多選下拉預設

現在讓我們單擊“州”以自動獲取我們可以添加到多選下拉列表中的美國州列表。

狀態多選下拉菜單

您將看到完整的狀態列表會自動填充到“選擇”框中。 單擊添加新選項將它們添加為答案選項。

將答案選項添加到多選下拉菜單

您是否注意到下拉字段有 3 個默認答案? 不要忘記單擊這些默認選項旁邊的減號以將其刪除。

從多選下拉菜單中刪除默認答案

好的,這就是我們在下拉字段中設置的所有答案選項。

我們現在需要做的就是告訴 WPForms 我們希望這是一個多選字段。

為此,我們將在左側向下滾動並展開Advanced Options

讓我們在本節中選擇多選項選擇

啟用多選項選擇以進行多選下拉

在下面還有另一個重要的變化。

讓我們將此字段的樣式更改為現代下拉列表。

現代風格多選下拉菜單

你想知道為什麼我們把這個領域改為現代風格嗎?

此字段更適用於多選下拉列表的原因有 3 個:

  • 現代風格字段顯示一行,並帶有箭頭以展開列表。 所以它比 Classic 樣式更緊湊,它總是顯示 4 行。
  • 現代風格字段讓您無需按住鍵盤上的任何鍵即可單擊多個條目。 對於經典字段,您的訪問者需要按住鍵盤上的 Control 或 Command 鍵才能一次選擇 1 個以上的條目。
  • 正如我們在上面提到的, Modern syle 多選下拉菜單有一個搜索框,可以輕鬆快速地找到您想要的項目。

好的,所以我們按照我們想要的方式設置了下拉菜單。 讓我們通過單擊表單構建器頂部的“保存”按鈕來保存到目前為止的進度。

現在我們可以發布表單了。 這是最後一步,只需幾分鐘。

第 4 步:在您的網站上發布您的表單

現在我們已經完成了表格,是時候在您的 WordPress 網站上發布它了。

WPForms 可讓您在任何地方發布表單。 您可以將它們添加到:

  • 帖子
  • 頁面
  • 側邊欄
  • WordPress 頁腳。

在這個例子中,讓我們為表單創建一個新頁面。

首先,單擊表單構建器頂部的嵌入

嵌入您的多選下拉表單

現在讓我們繼續並單擊Create New Page

在 WordPress 中為多選下拉菜單創建新頁面

為您的頁面鍵入一個名稱,然後單擊“開始吧”

單擊 Let's Go 按鈕為多選下拉表單創建一個頁面

WordPress 將打開新頁面並顯示表單的預覽。 單擊右上角的藍色發布更新按鈕。

使用多選下拉列表發布表單

現在您的多選下拉菜單已上線並可以使用。

多選下拉示例

就是這樣! 您學習瞭如何在 WordPress 中輕鬆製作多選下拉菜單。

立即創建您的 WordPress 表單

下一步:將表單拆分為頁面

如果您正在尋找使表單更緊湊的方法,請考慮將其拆分為多個頁面。 這可以使長表單更容易處理。

要了解如何向表單添加分頁符,請閱讀我們的多步驟表單製作指南。

準備好構建您的表單了嗎? 立即開始使用最簡單的 WordPress 表單構建器插件。 WPForms Pro 包含許多免費模板,並提供 14 天退款保證。

如果本文對您有所幫助,請在 Facebook 和 Twitter 上關注我們,以獲取更多免費的 WordPress 教程和指南。