如何在 WPForms 中製作帶有轉發器欄位的表單

已發表: 2023-10-04

想知道如何將 WPForms 重複器欄位合併到您的線上表單中,以便為每個表單提交捕獲更多資料?

表單中的重複欄位允許使用者輸入多組相似數據,同時使表單更加直觀和用戶友好。

在本文中,我們將向您展示為 WPForms 設計中繼器欄位最簡單的方法,以增強網站的功能和使用者體驗。

在本文中

  • 1.訂閱並安裝WPForms Pro
  • 2. 建立一個新的空白表格
  • 3. 新增帶有是/否選項的下拉字段
  • 4. 將條件邏輯套用至表單字段
  • 5. 為下拉欄位啟用條件邏輯
  • 6.啟用表單通知與確認
  • 8. 發布帶有中繼器欄位的表單
  • 有關 WPForms 的 Repeater 欄位的更多問題

為什麼要使用 WPForms Repeater 欄位?

WPForms Repeater 欄位的優點在於它能夠簡化資料收集,同時提供其他一些好處,例如:

  • 以使用者為中心的設計:透過引入轉發器字段,您可以讓使用者決定其輸入的範圍。 這是對使用者自主權的微妙認可,並增強了整體使用者體驗。
  • 表單設計的彈性:每種表單都不是一刀切的。 透過重複字段,您可以滿足各種場景—無論是單一條目還是多個條目,確保您的表單適應不同的要求。
  • 一致的資料結構:多個欄位的挑戰之一是資料不一致。 資料透過中繼器欄位保持結構化和統一,從而簡化後端處理和分析。
  • 減少表單長度:重複欄位提供了更簡潔的外觀,確保使用者不會在第一眼看到時感到不知所措,而不是使用包含大量欄位的又長又嚇人的表單。

無論您是致力於簡化客戶入職流程的企業家,還是熱衷於高效數據收集的部落客,WPForms 轉發器領域都是無價的。 讓我們深入了解設定步驟!

如何在 WPForms 中製作帶有轉發器欄位的表單

在 WPForms 中建立帶有重複器欄位的表單非常簡單,只需要對條件邏輯有基本的了解。 請依照以下步驟開始:

1.訂閱並安裝WPForms Pro

當涉及到建立獨特的表單時,WPForms 是最佳選擇。 您可以使用它在 WordPress 中製作和發布任何類型的表單。 此表單外掛程式隨附 1,000 多個表單模板,可用於建立轉發器欄位表單。

由於我們將使用條件邏輯在本指南的表單中設定重複器字段,因此您必須訂閱 WPForms Pro,它還為您提供高級整合、插件和大量有用功能的存取權限。

WPForms homepage

購買 WPForms Pro 訂閱後,您必須在 WordPress 網站上安裝並啟用外掛程式。

現在,讓我們建立您的表單!

2. 建立一個新的空白表格

從 WordPress 管理儀表板前往WPForms ,然後從選項清單中選擇「新增項目」

Add new form WPForms

接下來,為您的表單命名並選擇現有的 WPForms 模板,或根據您的需求設定新表單。

在本教程中,我們將建立一個新表單來向您展示設定重複欄位的所有基本步驟。 因此,我們將選擇“建立空白表單”選項。

Create a blank form for repeater field

現在,您將被定向到“字段”螢幕,其中可用字段顯示在左側面板上。 您有權存取的內容取決於您的許可證等級。

WPForms fields menu

您將在右側面板中看到表單的可編輯預覽。 由於我們選擇了空白表格,因此此部分將顯示為空。

Add fields to your repeater form

使用 WPForms 直覺的表單建構器可以輕鬆新增、修改和排列自訂字段,以根據您的喜好自訂表單。

在本教學中,我們將新增主要欄位類型(例如NameEmailPhone )以取得單一使用者(即註冊者 1)的資訊。

Registration fields for repeater form

接下來,我們將引導您完成透過下拉式欄位和條件邏輯建立中繼器元件的簡單步驟。

3. 新增帶有是/否選項的下拉字段

若要將下拉式欄位新增至表單中,您可以在左側面板中按一下它,也可以將其直接拖曳到表單預覽中。

WPForms select dropdown field

之後,為下拉字段標籤命名,例如“添加另一個?” 然後您可以為Choices添加簡單的是/否選項。

Configure dropdown options

接下來,我們將重複相同的步驟,在註冊者 2 的下拉欄位下方新增「姓名」、 「電子郵件」「電話號碼」欄位。

Fields below dropdown repeater form

之後,我們將在選項中新增具有相同標籤和是/否選項的另一個下拉欄位來建立中繼器效果。

Configure dropdown options

這允許您建立一個效果,其中每個後續註冊者欄位集使用條件邏輯僅在使用者對「新增另一個?」回答「是」時顯示。

Dropdown field below repeater fields

現在,我們需要將條件邏輯套用到您的表單字段,以便只有當使用者在下拉清單中選擇「是」時才會顯示其他註冊人欄位。

4. 將條件邏輯套用至表單字段

您可以透過點擊右側表單預覽中的任何欄位並導航至「欄位選項」下的「智慧邏輯」標籤來輕鬆完成此操作。

Smart Logic tab in field options

「智慧型邏輯」功能表中,選取「新增另一個?」下方所有表單欄位的「啟用條件邏輯」選項。 我們之前建立的下拉字段。

Enable conditional logic for repeater field

接下來,使用條件邏輯僅在下拉欄位(即「新增另一個?」)時顯示該欄位。 「是」。 對其下方的所有其他欄位重複此操作。

Conditional logic show field if yes

5. 為下拉欄位啟用條件邏輯

為了防止填寫表單的人新增第三個註冊者(除非他們輸入了註冊者 2 的資訊),您需要為其下方的下拉欄位設定條件邏輯。

為此,請選取註冊者 2 – 姓名、電子郵件和電話欄位下方下拉式欄位的啟用條件邏輯選項。

Enable conditional logic for dropdown field

接下來,使用條件邏輯僅在「註冊者 2 – 電子郵件」欄位不為空時才顯示該欄位。 這將產生中繼器場效應。

Dropdown field is not empty

您可以根據需要重複上述步驟,以獲得大量註冊者信息,只有當用戶對“添加另一個?”回答“是”時才會顯示這些信息。

接下來,點擊表單產生器右上角的「儲存」按鈕,然後再繼續,以確保您的任何變更都不會遺失。

Save the form

我們快到了! 現在,我們需要啟用表單提交後出現的表單通知和確認。

6.啟用表單通知與確認

設定使用者填寫並提交註冊表後顯示的訊息和通知至關重要。

這個過程很簡單。 在「表單產生器」畫面上的「設定」標籤下選擇「通知」

Form notification settings

警報將自動發送給管理員。 但是,如果需要,您可以設定主題、正文和收件者清單。

Enable form notifications for repeater field form

您的消費者在提交表單後將看到的訊息可以透過選擇「設定」頁面下的「確認」來更改。

Form confirmation

您也可以使用 WPForms 中的確認類型設定來顯示訊息、連結到另一個頁面或重新導向使用者。

Customize confirmation message for repeater field form

做得好! 現在剩下要做的就是在現有頁面或新頁面上發布您的表單,以將其公開並準備好收集提交內容。

8. 發布帶有中繼器欄位的表單

建立新網頁或帖子,或修改現有網頁或帖子。 之後,按一下「新增區塊」按鈕選擇WPForms圖示。

Add form widget WPForms

接下來,從 WPForms 區塊的下拉式選單中選擇您的轉發器欄位表單設計,將其新增至您的頁面或貼文。

如果您想自訂表單的外觀,現在可能是使用區塊編輯器對其進行樣式設定的好時機。

Repeater field form

如果一切看起來都在朝著正確的方向發展,您可以透過點擊「更新」「發布」按鈕來公開您的表單。

完成發布表單後,唯一要做的就是測試嵌入的表單,以確保它在前端按預期運行。

WPForms repeater field

有關 WPForms 的 Repeater 欄位的更多問題

建立中繼器欄位表單是我們讀者感興趣的熱門話題。 以下是一些最常見問題的快速解答:

什麼是中繼器欄位?

重複欄位是一種多功能工具,可讓使用者在表單中動態新增多組相同欄位。 將其想像為一組欄位的「複製」按鈕。 它增強了輸入可重複資料(例如多次註冊)時的靈活性。

如何在 WordPress 中新增中繼器欄位?

您通常需要一個可靠的 WordPress 外掛來合併中繼器欄位。 如果您想在表單中新增重複器字段,而無需任何 CSS 或編碼知識,那麼 WPForms 是一款頂級 WordPress 表單產生器,它可能是一個理想的選擇。

WordPress 中的轉發器欄位是什麼?

在 WordPress 生態系統中,重複字段可讓您建立一組子字段,使用者可以在填寫表單時複製這些子字段。 當未預先定義可重複資料集的數量時,這尤其有用。

接下來,學習如何在 WordPress 中建立手風琴表單

您是否正在尋找一種簡單的方法來將手風琴表單設計添加到您的 WordPress 網站? 請參閱我們關於使用 WPForms 建立手風琴表單的最簡單方法的文章,以提高網站的可用性和使用者體驗。

立即建立您的 WordPress 表單

準備好建立您的表單了嗎? 立即開始使用最簡單的 WordPress 表單產生器外掛。 WPForms Pro 包含大量免費模板,並提供 14 天退款保證。

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