如何製作帶有進度條的表格

您想知道如何在表單中添加進度條嗎？

在表單上設置進度條有助於讓訪問者了解他們的進度，從而減少表單放棄。

我們將向您展示如何在下面的表單中添加一個。

表格上的進度條是什麼？

進度條是向用戶顯示表單中有多少頁面以及他們當前在哪個頁面上的視覺功能。

眾所周知，進度指示器將在用戶填寫表單時跟踪並指示用戶的總體進度。

如何製作帶有進度條的表格

以下是我們將要採取的步驟：

1. 1. 安裝 WPForms 插件
   2. 創建一個新表格
   3. 在表單中添加分頁符
   4. 保存並發布您的表單
   5. 檢查您的表單進度條

讓我們從安裝進度條所需的表單插件開始。

1.安裝WPForms插件

首先，要在表單上顯示進度條，您需要購買 WPForms Pro 許可證，然後登錄到您的 WPForms 帳戶。 登錄後，單擊“下載”選項卡。

這將向您顯示一個包含所有可用許可證的頁面。 要下載插件，請單擊您的一個許可證旁邊的下載 WPForms按鈕。 這會將 WPForms 插件的壓縮文件保存到您的計算機。

重要提示：您將需要 WPForms Pro，因為它包含分頁符字段。 如果表單上有多個步驟並顯示進度條，則需要分頁符字段。

將 WPForms 安裝到您的網站上

下載 zip 文件後，前往要安裝 WPForms 的 WordPress 網站。 然後，在管理儀表板中，轉到Plugins » Add New並單擊Upload Plugin按鈕。

從這裡，單擊選擇文件按鈕並選擇您剛剛下載的 WPForms zip 文件。

上傳文件後，單擊立即安裝按鈕。

這將為您開始安裝過程。 安裝插件後，單擊激活插件按鈕以激活您網站上的 WPForms。

激活插件後，驗證您的 WPForms 許可證密鑰以接收自動更新和插件支持。 添加許可證密鑰還可以讓您從 WordPress 儀表板內輕鬆安裝和激活 WPForms 插件。

就是這樣！ 我們現在可以繼續創建一個新表單。

2.創建一個新表格

首先，您需要登錄到您的 WordPress 管理區域。 到達那里後，單擊管理側欄中的WPForms以轉到“表單概述”頁面。

然後，要創建一個新表單，請單擊Add New按鈕以啟動 WPForms 表單構建器。

在表單構建器的設置頁面上，您可以在表單名稱輸入字段中命名您的表單。

如果未選擇名稱，則表單名稱將默認為您選擇的模板名稱。

在表單名稱字段下方，您會在選擇模板部分找到數百個表單模板。 這些是常用表單的預構建模板，可幫助您快速入門。

注意：如果您想從頭開始構建表單，請使用空白表單模板。

要選擇模板，您可以使用左側菜單中的類別。 您還可以使用模板庫左上角的搜索欄搜索可用選項。

找到所需模板後，將鼠標懸停在其上並單擊“使用模板”按鈕。

如果您在創建表單時遇到任何困難，請閱讀我們關於如何創建和完全自定義表單的深入說明。

3. 在表單中添加分頁符

您現在可以添加分頁符和進度條了。 通過添加分頁符，表單將自動包含進度條。

打開表單生成器後，繼續添加您想包含在表單中的任何字段。 然後將分頁符字段拖到預覽區域並將其拖放到您想要創建新表單頁面的任何位置。

您添加的每個分頁符字段都會將表單拆分為其他頁面，您可以根據需要添加任意數量的頁面。 要將分頁符移動到表單的不同部分，只需在預覽區域中單擊它並將其拖動到您想要的任何位置。

自定義您的進度條

添加分頁符後，您可能會注意到在預覽區域中，首頁區域已出現在表單頂部。 單擊首頁/進度指示器以訪問多頁表單的選項。

您可以在進度指示器下拉菜單中自定義進度條。

然後，您可以從三種進度指示器樣式中進行選擇：進度條、圓圈或連接器。

進度條：

界：

連接器：

要更改進度指示器的顏色，請使用顏色選擇器或輸入十六進制代碼。

最後，在頁面標題字段中輸入表單第一頁的名稱。

但是，如果您對錶單的外觀感到滿意，則可以通過選擇None來隱藏進度條。

想了解更多？ 閱讀完整的如何創建多頁表單說明和自定義詳細信息以充分利用此表單功能。

4. 保存並發布您的表單

完成自定義表單後，您現在可以發布它。 首先，單擊表單構建器右上角的大橙色保存按鈕。

然後，您可以使用嵌入嚮導通過單擊嵌入按鈕將您的表單集成到您的網站上。

從這裡，您可以選擇創建一個新頁面來嵌入您的表單，或者選擇一個現有頁面來添加您的表單。

如果您選擇創建新頁面選項，系統會要求您輸入頁面名稱。 然後單擊Let's Go按鈕以嵌入您的表單並發布您的頁面。

如果您選擇“選擇現有頁面”選項，系統會要求您從下拉列表中選擇要嵌入表單的頁面。

然後單擊Let's Go按鈕以嵌入您的表單。

您現在可以在所選頁面上查看您的表單。 轉到您嵌入它的頁面或轉到WPForms » All Forms 。 將鼠標懸停在表單標題上以顯示附加的選項菜單。 出現選項後，單擊Preview 。

5. 檢查您的表單進度條

您現在將有一個表單，其中包含與此類似的進度指示器：

我們建議您通過填寫字段並提交來測試您的表單，以確保一切看起來都很好並且按照您想要的方式工作。

注意：如果您想調整佈局，可以在表單上向上或向下移動分頁符字段。

接下來，成為表單構建專家

您想增加您的 WPForm 建築知識嗎？ 請務必查看我們完整的表單字段指南以及如何自定義表單上的字段。

您現在準備好構建表單了嗎？ 記得註冊 WPForms Pro，因為它包括分頁字段和進度條、數百個免費模板，我們還提供 14 天退款保證。

立即創建您的 WordPress 表單

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