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

已發表: 2020-07-24

多步驟表格是一種長表格,分解為多個部分/步驟,以使其他長表格更容易完成。

與傳統的長表單不同,多步驟表單可以提高網站的表單轉換率,尤其是當表單具有 3 個以上的表單域時。 它還鼓勵用戶在將信息分解為頁面而不是作為一個長格式呈現時完成您想要的信息。

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

首先,您必須確保 WPForms 已安裝在您的 WordPress 網站上。

現在,轉到WPForms » Add New創建一個新表單。

在本指南中,我將創建一個簡單的聯繫表格。

我確定您在“表單設置”選項卡上。

現在,您的表單命名並選擇您要使用的模板

簡單的聯繫表格模板
使用 WPForm 插件創建簡單的聯繫人

在這裡,我選擇了簡單聯繫表單模板。

WPForms 將在拖放構建器中創建一個簡單的聯繫表單。

使用 WPForms 的簡單聯繫表格
使用 WPForms 的簡單聯繫表格

現在,您將自動重定向到“字段”選項卡,您可以從該選項卡中將其他字段添加到表單中,只需拖動它們即可。

獲取 WPForms 插件

您還可以單擊現有表單字段並將其拖動以重新排列聯繫表單上的順序。

下一步是將表單拆分為不同的部分

向表單添加字段或編輯表單後,您需要將分頁表單字段添加到您的站點以將其拆分為不同的頁面。

Page Break 字段位於Fancy Fields下,就在Standard Fields下方。

WPForms 中的分頁花式字段
WPForms 中的分頁花式字段

字段放置在要拆分錶單的位置。

您可以在任意位置添加分頁符字段。 令人著迷的是,您可以從那裡添加其他表單字段來完成您的表單。

繼續前進,是時候自定義進度條了

假設您想顯示進度指示器以讓用戶了解表單的不同部分。 這樣,他們總是知道他們在您的表單上的位置以及在根據進度條單擊“提交”之前還剩下多少要填寫。

為了使它更容易,WPForms 具有三種不同的麵包屑樣式指示條:

  1. 連接器:顯示多階段表單每個部分的連接欄和頁面標題。
  2. 圈子:在多步驟表單上每頁顯示一個圈子和頁面標題。
  3. 進度條:指示用戶填寫表單時的進度。
第一個分頁符部分。
第一個分頁符部分。

要自定義進度條,您需要單擊First Page break 部分。

在這裡,您將在表單編輯器中看到一個新面板,您可以從中選擇一個進度條。 還有一個用於更改進度指示器顏色的選項。

更重要的是,您可以更改頁面標題,以便用戶在您選擇“圈子”或“連接符”選項時知道他們在表單的哪個部分。

wpforms中的第二個分頁符部分
wpforms中的第二個分頁符部分

要自定義下一頁標題和將站點訪問者帶到表單上的下一頁的按鈕,請單擊您在將分頁符添加到表單時創建的分頁符部分

在 wpform 分頁符中顯示上一頁按鈕
在 wpform 分頁符中顯示上一頁按鈕

您還可以啟用將在表單上顯示上一頁按鈕的功能。 這將允許您的訪問者根據需要返回到表單的上一頁。

完成後,點擊保存

配置表單設置的時間

從“設置”選項卡中,轉到“常規”。

WPForms 中的常規表單​​設置
常規表單設置

您可以配置:

  • 表格名稱:您可以在此處更改表格的名稱。
  • 表單說明:您可以添加表單說明。
  • 提交按鈕文本:自定義提交按鈕上的副本。
  • 垃圾郵件預防:使用蜜罐功能或 Google reCAPTCHA 阻止聯繫表單垃圾郵件。

所有 WordPress 表單都會自動啟用垃圾郵件防護功能。 如果您想使用其他形式的垃圾郵件預防,請取消單擊此選項。

  • AJAX 表單:啟用 AJAX 設置,無需重新加載頁面。
  • GDPR 增強功能:您可以禁用條目信息和用戶詳細信息(例如 IP 地址和用戶代理)的存儲,以符合 GDPR 要求。

完成後,點擊保存

讓我們跳轉到表單通知的配置

在此部分中,您可以選擇是否要接收新條目(用戶提交)的通知。

表單通知
管理表單通知

如果您使用智能標籤,您還可以在用戶提交表單時向他們的電子郵件地址發送通知,讓他們知道您已收到並很快與他們聯繫。

下一步包括設置表單的確認

表單確認是在提交表單後向訪問者顯示的確認消息。 他們確保訪問者的表格已被處理。

WPForms 有三種確認類型可供選擇:

  • 消息:這是 WPForms 中的默認確認類型。 當網站訪問者提交表單時,會出現一個簡單的消息確認,讓他們知道他們的表單已被處理。 在這裡尋找一些偉大的成功信息,以幫助提高客戶的幸福感。
  • 顯示頁面:此確認類型會將網站訪問者帶到您網站上的特定網頁,感謝他們提交表單。 如需幫助,請查看我們關於將客戶重定向到感謝頁面的教程。 此外,請務必查看我們關於創建有效的感謝頁面以提高客戶忠誠度的文章。
  • 轉到 URL(重定向):當您要將站點訪問者發送到不同的網站時使用此選項。

首先,單擊確認”選項卡。 現在,從下拉列表中選擇確認類型。 在這裡,我將選擇消息類型。

管理 WPForms 確認
管理 WPForms 確認

在此之後,您必須在出現的文本框下創建一條確認消息。

完成後,點擊保存

現在,您已準備好將表單添加到您的網站

首先,從您的 WordPress 創建一個新頁面或帖子。 之後,在第一個塊內單擊,搜索 WPForms,然後選擇WPForms 圖標

在 WordPress 頁面中嵌入 WPForms
在 WordPress 頁面中嵌入 WPForms

WPForms 小部件將出現在您的塊內。 單擊WPForms 下拉菜單並選擇您已經創建的表單之一。

從 WPForms 下拉列表中選擇要嵌入的表單
從 WPForms 下拉列表中選擇要嵌入的表單

發布您的帖子或頁面,以便您的聯繫表格出現在您的網站上。

而已。 這就是您可以使用 WPForms 插件在 WordPress 中輕鬆創建多步驟表單的方法。