如何通過 5 個簡單的步驟在 WordPress 中添加多步驟表單

您是否知道將您的單步 WordPress 表單轉換為多步表單 WordPress 可以將您的轉化率提高近 60% ？ 事實上，在某些情況下，轉化率可以高達 300% 。

是的。 因為現在人們太忙了，注意力也很短。 最重要的是，如果您要求他們填寫一步長表格，他們很可能會離開您的網站，導致表格不完整。

但是，您可以通過為您的 WordPress 網站使用多步驟表單來更改此方案。 但問題是如何？

好吧，這就是為什麼我在這裡向您展示如何在 WordPress 中添加多步驟表單的分步指南。

繼續閱讀以了解如何在幾分鐘內輕鬆地在 WordPress 網站中創建多步驟表單……。

什麼是多步驟表格？

好吧，顧名思義，它是一個包含多個步驟的表單，其中問題/輸入字段被分成不同的步驟，而不是把所有的步驟都放在一個步驟中。 如果您正在尋找定義，這裡是 HubSpot 如何定義多步表單。

多步驟表格是一種長表格，被分成多個部分。 它們用於使長表格不那麼令人生畏和令人生畏。

– Hubspot

多步表單基本上是輸入字段過多的長表單的替代品。 如果您有一個相對較小的表格，那麼您可以堅持使用一步式表格。

既然您知道什麼是多步驟表單，那麼讓我們看看您應該考慮將多步驟表單添加到您的 WordPress 網站的一些原因。

為什麼在 WordPress 中使用多步驟表單？

好吧，簡單的答案是讓您的轉化率飆升。 如今，多步驟表格在註冊表格、預訂表格、食品訂單表格等用途的網站上變得非常流行。您還應該考慮在您的網站中使用多步驟表格的一些原因包括：

• 多步驟表單在吸引用戶注意力方面效果更好。 結果，人們參與得更多，並更頻繁地完成表單提交。
• 用戶發現 multistep 更加用戶友好，並且它比長的一步形式提供更好的易用性。
• 由於有一個帶有多步驟表單的導航欄/進度條，用戶會感到更鼓勵完成多步驟表單。
• 有條件的多步驟表單非常適合僅收集您需要的相關數據。
• 由於上述所有積極方面，多步驟形式提高了轉化率。

現在您知道應該在 WordPress 網站中使用多步驟表單，是時候創建構建多部分錶單所需的完美設置了。

設置您需要構建一個 WordPress 多步驟表單

除了 WordPress，您還需要兩個插件才能輕鬆地在 WordPress 中創建多步驟表單。 這些WordPress插件是：

1. 元素 （免費版）
2. MetForm （免費和專業版）

Elementor 是最好的 WordPress 頁面構建器，而 MetForm 是增長最快的 WordPress 多步驟表單插件之一。 如果您在安裝 MetForm 時需要幫助，可以查看我們關於如何安裝 MetForm 的文檔。

完成安裝後，您需要先使用 Elementor 頁面構建器創建一個頁面，然後才能使用 Metform。 為此，請轉到Dashboard ⇒ Page ⇒ Add New 。

現在，提供一個合適的Title ，選擇Elementor Full Width作為模板，點擊 Publis h。 之後，單擊使用 Elementor 編輯。

最後，您已準備好構建多步驟表單。 那麼，讓我們繼續進行主要流程。

注意：在本教程中，我將向您展示如何向頁面添加多步驟表單。 但是您也可以在模態彈出窗口中輕鬆添加使用 MetForm 構建的表單。

如何在 WordPress 中創建多步驟表單

在本博客中，您將學習通過 5 個簡單的步驟從頭開始創建具有現代感的多步驟表單：

第 1 步：拖放 MetForm

進入使用 Elementor 編輯模式後，搜索MetForm 並將其拖放到您希望表單出現的位置。

第 2 步：創建新表單

單擊表格部分以轉到編輯 MetForm選項。 單擊編輯表單按鈕。

一旦彈出新窗口

• 選擇新建（創建新表單）
• 為表單提供表單名稱
• 選擇空白模板，
• 並點擊編輯表格

第 3 步：使用 MetForm 和 Elementor 頁面構建器從頭開始構建多步驟表單

單擊“編輯表單”後，您將可以使用 Elementor 頁面構建器訪問另一個新窗口，以從頭開始創建表單。 要構建單步多步表單，您需要遵循以下四個步驟：

添加一個全新的部分

根據要求拖放輸入字段

根據表單的短語拖放 Prev/Next/Submit 按鈕

為該部分提供適當的名稱

對於這個博客，我將使用上述步驟創建一個 3 步酒店預訂多步驟表單的演示。 表格的三個步驟將包括個人信息、預訂信息和附加信息

預訂表格第一步 - 個人信息：

• 對於個人信息部分，單擊Elementor +圖標並選擇具有兩個相等列的結構。

• 搜索文本輸入字段並將表單字段拖放到左側列中。

• 現在要編輯此輸入字段的屬性，單擊編輯標誌，轉到內容⇒內容並編輯以下選項：
  • 顯示標籤：打開此選項以顯示輸入字段的標籤。
  • 位置：您可以選擇將標籤放置在頂部或左側。
  • 標籤：為您的標籤命名。 我將使用“名字”。
  • 名稱：名稱字段是必需的，並且必須是唯一的。 因此，請確保為每個字段指定不同的名稱，並用下劃線/連字符替換空格。
  • 佔位符：提供佔位符文本。
  • 幫助文本：如果您想為用戶提供幫助文本，您可以在此處進行。

• 接下來，轉到內容⇒設置以修改以下選項：
  • 必需：要使此表單字段成為必需，請打開此選項。
  • 驗證類型：您可以根據字符長度、字長和表達式為文本字段設置不同類型的驗證。
  • 警告信息：您可以在此處設置未滿足要求時將顯示的警告信息。

注意：我將在此表單的第二步中使用條件邏輯功能。

就像名字一樣，為姓氏添加另一個文本輸入字段。 作為個人信息步驟的一部分，我將在這裡添加另外兩個字段； 電子郵件和手機號碼。

完成修改電子郵件和手機號碼字段的設置後。 搜索並拖放 Next Step 按鈕。 您可以更改不同的按鈕設置，例如標籤、按鈕對齊方式、圖標、圖標位置等。

• 現在第一步的部分已經準備好了，給第一步起一個合適的名字
  • 單擊六點圖標以打開設置選項並轉到佈局⇒多步。
  • 在多步驟選項卡標題選項上提供名稱
  • 從庫中選擇一個圖標或上傳一個 SVG。
  • 點擊更新保存。

現在第一部分已經準備好了，讓我們構建第二步。

預訂表格第二步 - 預訂信息：

• 對於第二步，您需要選擇一個新部分。 我將選擇一個具有單列的新部分，然後添加一個具有兩個相等列的新內部部分。
• 選擇列後，拖放簽入和簽出選項的 2 日期輸入字段。

必須遵循的規則：您必須選擇一個新部分來開始新步驟，否則，您添加的任何輸入字段都將添加到上一步。 所以，永遠記住，新的步驟需要一個新的部分，即使它具有相同的佈局。

• 除了提到的文本字段設置選項外，您還可以在內容⇒設置下獲得日期輸入字段的以下設置
  • 將當前日期設置為最小日期：打開此選項可將當前日期設置為最小日期。
  • 手動設置最小日期：如果您不想將當前日期設置為最小日期，您也可以手動設置最小日期。
  • 手動設置最大日期：在這裡您可以設置最大日期。
  • 禁用日期列表：您可以使用此選項禁用某些日期。 要禁用任何日期，請單擊 +添加項目按鈕並選擇日期。
  • 日期範圍輸入：通過打開此選項，您可以使用戶可以選擇日期範圍。 但是對於這種形式，我將關閉此選項。
  • 年份輸入：打開此選項以將年份作為日期輸入的一部分。
  • 月份輸入：要啟用月份作為日期輸入的一部分，請打開此選項。
  • 日期輸入：打開此選項以將日期（日）作為日期輸入的一部分
  • 日期格式：設置此處輸入的日期格式。
  • 本地化：根據您的偏好從下拉列表中選擇位置。
  • 想要輸入時間：打開此選項以將時間與數據一起作為輸入。 如果您打開此選項，您將獲得另一個選項，即啟用時間 24 小時。 使用此選項，您可以啟用 24 小時格式。

現在，最後，我們將為 Check Out 字段使用條件表單功能。 要使簽出字段僅在簽入字段為空時可見，

• 複製 Check-In 輸入字段的 Name 字段的值。
• 然後轉到Content ⇒ Conditional ，打開啟用選項
• 從條件匹配條件下拉列表中選擇 AND 。
• 從操作下拉選項中，選擇顯示此字段。
• 單擊+ ADD ITEM ，在 if 輸入字段上，粘貼您複製的簽入字段名稱值。
• 從匹配（比較）下拉菜單中選擇“不為空”。

現在點擊預覽按鈕查看。 只有在您選擇了入住日期後，才能看到退房字段。

添加一個新的內部部分，以便在條件選項最初隱藏簽出時表單看起來不錯。 拖放 Number 表單字段兩次，為房間數和人數再創建兩個字段。

由於這是中間步驟，我們需要同時包含 Prev 和 Next Buttons 。

完成編輯此部分的所有添加字段的設置後，將部分/步驟名稱從佈局 ⇒ 多步更改，就像您對第一部分所做的那樣。 我將其命名為預訂信息。

現在第二步準備好了，讓我們繼續第三步

預訂表格第三步 - 附加信息

對於第三步，讓我們添加一個帶有單列的新部分。 並添加一個文本字段並將其命名為 Additional Information。

接下來，在該部分中添加一個兩列的內部部分。 之後，拖放一個上一個按鈕，然後是一個提交按鈕以提交表單。

注意：您可以根據需要添加任意數量的內部部分。 但是要創建一個新步驟，您必須添加一個新部分。

要為第三部分命名，請轉到layout ⇒ multistep並添加標題“ Additional Information ”並添加一個圖標。

最後，我們通過 3 個步驟完成了 WordPress 多步驟表單的構建。 現在單擊更新以保存並關閉窗口以繼續進行多步驟設置。

第 4 步：啟用 MetForm 的多步表單選項

現在我們有了表單，是時候將其轉換為有效的多步驟表單了。 這樣做

• 轉到內容⇒多步驟設置
• 打開啟用多步選項以激活多步選項
• 啟用 Display Multistep Nav，以便 Section 菜單顯示在頂部。 您還可以編輯不同的設置，例如自適應表單容器高度、啟用滾動到頂部等。
• 完成所有更改後，單擊更新以保存

步驟 5：配置確認、通知和其他設置以完成

現在您已經設計了多步表單。 讓我們配置 MetForm 必須提供的所有表單設置。 要從 WordPress 儀表板修改 MetForm 設置，請轉到 MetForm ⇒ 表單 ⇒ 單擊剛剛創建的表單的“編輯”選項。

注意：在這裡您還可以找到您創建的表單的簡碼，您只需複制並粘貼即可將您的表單添加到網站的任何位置。 您也可以從“編輯表單”選項訪問表單設置。

在這裡，您將找到以下設置：

一般的：

作為常規設置的一部分，您可以修改Title、Success Message、Required Login、Count views等。您還可以設置任何您希望用戶在提交表單後登陸的自定義 URL 。

確認：

您可以使用此表單構建器插件向您的用戶發送一封確認電子郵件，其中包含他們提交的表單的副本。 打開確認選項，然後您可以設置電子郵件主題、電子郵件發件人、發件人電子郵件、電子郵件回復至和感謝信息。

通知設置：

您也可以使用 MetForm 向管理員發送表單通知電子郵件。 啟用向管理員發送通知郵件選項。 然後設置電子郵件主題、電子郵件收件人、電子郵件發件人、管理員註釋等。

進行所有編輯後，向下滾動並單擊保存更改以更新設置。

除了我在本博客中介紹的設置之外，您還可以獲得REST API、Mail Chimp、Google Sheet等集成。此外，還有PayPal、Stripe 等支付網關集成。 CRM 集成，包括 HubSpot、Zoho等。您還可以獲得登錄和註冊等身份驗證選項。 有關這些設置的更多詳細信息，請查看我們的 MetForm 文檔。

如果您已正確執行上述步驟，您應該會獲得一份多步驟預訂表格，如下所示：

包起來

在那裡，您剛剛在幾分鐘內創建了 WordPress 多步驟表單。 如果您認為此表格很簡單，請不要擔心。 本博客的主要目的是展示如何使用 MetForm 在 WordPress 中創建多步驟表單。

現在您知道如何創建 WordPress 多步驟表單，您可以創建自定義表單和邏輯。 我希望您利用 MetForm 的功能來創建精彩的多步驟表單。 如果您在此過程中遇到任何問題，請與我們分享，我們的團隊將盡快回复。

不要忘記查看 MetForm 提供的所有驚人功能。