如何通過 5 個步驟構建 Elementor 條件邏輯表單

已發表: 2022-03-29

Elementor 表單添加條件邏輯可以提高表單提交率。

如何? 好吧,因為條件邏輯 Elementor 表單可以確保您的客戶不必填寫不必要的字段。 因此,它提供了更好的用戶體驗。

你知道 Elementor 條件邏輯形式最好的部分是什麼嗎?

好吧,最好的部分是構建 Elementor 條件邏輯表單是一項非常容易的任務。 特別是如果您關注這篇文章。 因為在本博客中,您將學習如何通過5 個步驟構建 Elementor 條件邏輯表單。

此外,您將了解使用 Elementor 條件邏輯形式的優勢以及何時使用它。

所以,繼續閱讀……

內容隱藏
什麼是表單中的條件邏輯?
為什麼以及何時在 Elementor 形式中使用條件邏輯?
如何構建條件邏輯 Elementor 表單:分步指南
第 1 步:安裝必要的插件
第 2 步:將 MetForm 小部件拖放到您的 Elementor 頁面
第 3 步:創建/添加表單到您的頁面
第 4 步:向 Elementor 表單字段添加條件邏輯
第 5 步:自定義與 Confirmation、Notification 相關的表單設置以完成
如何使用 MetForm 的 Pre Built 模板在 Elementor 中添加條件表單
最後的話

什麼是表單中的條件邏輯?

表單中的條件邏輯是一種根據用戶輸入控製表單行為方式的方法。 您可以隱藏特定的表單字段或多個字段,並且僅在用戶執行特定操作或在表單中選擇特定值後才顯示它們。

這是當今 WordPress 表單中的常見做法。 轉到下一部分,了解為什麼條件邏輯很受歡迎,以及人們通常何時在表單中使用它。

為什麼以及何時在 Elementor 形式中使用條件邏輯?

有條件的表格實際上非常有效地確保您的客戶在填寫表格時獲得最佳體驗。 此外,它還可以確保您獲得所需的確切數據量。

想知道怎麼做?

好吧,客戶並不特別喜歡填寫表格。 讓我們面對現實吧,這真的不是任何人的愛好!

最重要的是,如果您要求他們提供對他們不是特別有用/不相關的信息,那麼您的用戶很明顯會生氣。

這正是表單中的條件邏輯派上用場的地方。 因為使用條件邏輯,您可以確保您的表單只會要求用戶填寫相關信息,而不是表單中的所有字段。

基本上,Elementor 中的條件形式遵循“如果條件”邏輯。 例如,如果條件 A 為真,則動作 X 將發生,否則不會。 您還可以為單個操作設置多個條件。 例如,只有當條件 A 和條件 B 都為真或其中任何一個為真時,動作 X 才會發生。

讓我們談談一個現實生活中的例子,假設您想知道一個活動會帶多少孩子。

現在你不需要讓每個人都填寫孩子的數量。 您可以先詢問他們是否打算帶孩子,一旦他們同意,您就可以在表格中顯示選項以選擇他們將帶多少孩子。

這樣,那些不打算帶孩子的人就不必填寫孩子字段的數量。 事實上,他們將有一個較短的表格,這將激勵他們完成填寫表格,而不是中途放棄。

綜上所述,以下是在 Elementor 形式中使用條件邏輯的優點:

  • 它節省了用戶的時間,因為用戶只需要填寫適合他們的字段。
  • 由於條件表單更方便,因此改善了用戶體驗。
  • 鼓勵用戶填寫表單,因為它們比沒有條件邏輯的表單要短。
  • 您可以獲得所有相關信息並提高表單提交率。

既然您知道條件邏輯有多有用,讓我們繼續下一部分,您將學習如何將條件邏輯添加到 Elementor 表單。

如何構建條件邏輯 Elementor 表單:分步指南

正確按照所有步驟在幾分鐘內創建條件邏輯 Elementor 表單。

第 1 步:安裝必要的插件

要將條件邏輯添加到 Elementor 表單以及 Elementor 免費版本,您需要安裝 Elementor 表單構建器 MetForm。 你將需要兩者

  1. MetForm(免費)
  2. MetForm Pro

如果您在安裝和激活 MetForm 的過程中需要幫助,可以查看文檔。

注意:您不需要 Elementor Pro 版本來執行此過程。

立即獲取 MetForm

第 2 步:將 MetForm 小部件拖放到您的 Elementor 頁面

現在轉到要添加 Elementor 條件邏輯表單的頁面。 您可以將條件表單添加到現有頁面或創建新頁面。 但是,請確保您處於使用 Elementor 編輯模式。

條件邏輯 Elementor 形式

現在搜索 MetForm,找到小部件後,將其拖放到頁面上。

Elementor 條件邏輯形式

第 3 步:創建/添加表單到您的頁面

現在,您可以選擇現有表單或創建新表單。 要創建新表單或添加現有表單,請單擊“編輯表單”按鈕。

條件邏輯 Elementor 形式

我已經創建了一個演示預訂表格,所以我要

  • 選擇“選擇表格”
  • 下拉列表選擇我現有的名為“Conditional logic Elementor form”的表單
  • 然後點擊編輯表格。
條件邏輯 Elementor 形式

如果您想使用 MetForm 從頭開始構建您的表單,請查看我們的博客
如何使用 MetForm 從頭開始創建多步驟聯繫表格。

第 4 步:向 Elementor 表單字段添加條件邏輯

使用 MetForm 條件功能,您可以根據多個條件隱藏/顯示表單字段,例如依賴字段是否為空、不為空、等於(匹配某個值)、不等於、大於、大於等於、小於、等等。此外,您可以自定義是否所有條件都需要為真,或者其中任何一個條件都需要為真才能執行操作。

在本文中,我將應用其中一些條件,您可以按照相同的步驟應用所有條件。 要應用任何條件,您需要執行以下步驟:

編輯字段並啟用條件邏輯

為此,在表單字段上,單擊右上角的編輯圖標,然後在左側設置面板上向下滾動一點,然後展開條件邏輯選項,最後打開啟用按鈕。

條件邏輯 Elementor 形式

  設置標準和操作

現在,從下拉列表中選擇條件匹配條件為 AND /OR和操作類型為顯示此字段/隱藏此字段

條件邏輯 Elementor 形式

設置條件

現在是設置條件,設置條件的時候了

  • 點擊+ 添加新項目
  • If 字段上,添加要添加條件的字段的名稱
  • 匹配(比較)下拉列表中選擇條件。

例如,我想讓“電子郵件”字段僅在“全名”字段不為空時可見。 因此,當有人填寫他們的姓名時,電子郵件字段才會出現。 為此,我將

  • 複製全名文本字段的名稱
  • 返回電子郵件字段條件邏輯部分並將其粘貼到“如果字段”
  • 最後從匹配(比較)下拉列表中選擇不為空
Elementor 中的條件形式 Elementor 形式條件字段

按照這些確切的步驟將條件邏輯添加到 Elementor 條件表單的所有表單字段,或者根據您的要求添加幾個。

注意:如果要為具有多個選項的單選或複選框等表單字段設置條件,則需要將字段名稱放在 If 字段上,並在匹配值字段上設置單選/複選框的選項值。

例如,要使其他狀態字段僅在某些人選擇其他人作為其材料狀態時出現,您需要 

  • 選擇匹配(比較)等於
  • 複製婚姻狀況字段名稱
  • 將其粘貼Other Status 的條件邏輯的“If”選項中
  • 婚姻狀況比率字段複製其他選項的值
  • 然後將其粘貼到其他狀態的條件邏輯的“匹配值”選項中
Elementor 中的條件形式

我已按照相同的步驟使Need Pet 保姆表格僅在Number of Pets 大於 1時可見。

Elementor 中的條件形式

在彈出窗口中添加表單是一種經過驗證的鉛磁鐵。 檢查如何通過3 個步驟在模式彈出窗口中添加表單。

第 5 步:自定義與 Confirmation、Notification 相關的表單設置以完成

將所有條件邏輯添加到 Elementor 表單後,單擊FORM SETTINGS自定義不同的設置。 你可以

  • 在常規設置下自定義標題、成功消息、所需登錄、查看次數等。
  • 您可以在確認設置下自定義選項,例如打開確認、設置電子郵件主題、電子郵件發件人、發件人電子郵件和感謝信息等。
  • 在通知設置下,您將獲得電子郵件通知選項,例如向管理員啟用通知郵件、電子郵件主題、電子郵件收件人、電子郵件發件人、管理員註釋等。

如果需要,您還可以設置不同的付款和 CRM 集成。 有關這些主題的更多詳細信息,請查看文檔。 進行所有更改後向下滾動並單擊保存更改。

Elementor 條件邏輯形式

單擊UPDATE & CLOSE以保存您剛剛創建的條件表單。

Elementor 條件邏輯形式

現在,如果您單擊預覽按鈕,您應該會看到如下所示的 Elementor 條件表單:

Elementor 條件邏輯形式
立即獲取 MetForm

如何使用 MetForm 的 Pre Built 模板在 Elementor 中添加條件表單

現在,如果您正在尋找 Elementor 條件邏輯表單的預製模板,那麼您找不到比 MetForm 更好的選擇。 因為這個 WordPress 表單構建器提供了 6+ 個預製的 Elementor 條件邏輯表單模板。

要使用 MetForm 的預建條件形式,當您到達上述過程的第三步時,向下滾動一點以找到所有條件形式。 要選擇您喜歡的表格,請單擊表格,然後單擊編輯表格。

Elementor 形式的條件邏輯

當表單加載時,點擊 UPDATE & CLOSE,最後保存你的頁面。 這是 MetForm 預製的 Elementor 條件邏輯表單的預覽:

Elementor 條件邏輯形式 條件邏輯 Elementor 形式

相關文章:
MetForm vs Contact Form 7 vs Gravity Forms:哪個是最好的表單生成器?
如何創建引人入勝的空缺申請表

最後的話

恭喜! 現在您知道如何向 Elementor 表單添加條件邏輯了。 我希望現在您將使用此過程在您的 WordPress 網站中製作用戶友好的 Elementor 條件邏輯表單。

請記住,您的工作是確保用戶需要盡最大努力填寫您的表單。 這就是 MetForm 的條件特性的驚人作用。 此外,MetForm 還支持簡碼。

不要忘記預建的 Elementor 條件邏輯表單模板。 此外,我強烈建議您查看 MetForm 的所有驚人功能。 這個 WordPress 插件的高級功能將幫助您構建更優化的 Elementor 表單。

下載 MetForm