在 WordPress 中設計多頁表單的 4 個簡單步驟

已發表: 2022-06-10

您的 WordPress 網站有長表單嗎？並且遇到低轉化率？這是因為您的在線表格越長，想要填寫的人就越少。為什麼？因為人們在填寫長長的表格時會感到不知所措。但是許多企業，例如教育機構、食品配送網站、車輛供應商等，需要為其網站提供冗長的表格。

那麼，解決方案是什麼？嘗試使用 WordPress 中強大的表單構建器將多頁表單添加到您的網站。因此，它可以讓您的聯繫表格看起來更簡單、更簡單，並且您的任何訪問者都不會覺得填寫表格很乏味。

在本文中，我們將研究如何使用強大的表單構建器 Fluent Forms 創建多頁表單 WordPress 以及表單類型的一些示例，以便您獲得靈感並開始為您的 WordPress 網站製作高效的多步驟表單.

Fluent Forms 是最適合初學者的表單構建器。立即下載並開始免費製作精美的表格！！！

什麼是多頁表單？

多頁表單是一種分為多個頁面的長表單。通常，它們用於長表單，例如註冊表單、結帳表單等。您可以通過為客戶啟用較小的長表單塊來創造積極的用戶體驗並提高網站的轉化率。

多頁表單的優秀示例

以下是為 WordPress 創建多頁表單的一些很好的示例。

獲取“Khoros”的演示

總部位於英國的數字客戶參與平台公司 Khoros 在其網站上放置了一個帶有進度條的令人驚嘆的多步驟表單。如果您從他們的主頁單擊獲取演示按鈕，您將獲得多步驟表單。表格如下圖所示。

多頁表單 WordPress，多頁表單示例， — *Khoros.com 的多步驟表格*

要獲得演示，您必須從您的電子郵件地址開始逐步完成。如果您單擊粉紅色的下一步按鈕，那麼您將獲得更多要填寫的字段。表單非常簡單，但提供了一個簡單、智能和漂亮的界面。

“優步”的註冊表單

優步是多步驟表單的另一個很好的例子。這個網站基本上是關於送餐、乘車等。例如，你想成為優步服務的司機。為此，首先，您必須在那裡註冊。所以，去優步的網站，然後點擊首頁右上角的註冊按鈕。然後從註冊類別中，選擇驅動程序選項，您將獲得表單。

您必須在第一頁提供一些基本信息，例如姓名、電子郵件、電話號碼等。然後，當您單擊“下一步”按鈕時，您將獲得更多要填寫的字段。因此，這也是一個出色的多步驟表單示例。整個過程是通過一步一步的任務來完成的，這樣用戶就不會覺得他們正在經歷一個成型過程。

通過“快速基地”開始免費試用

Quickbase 是一款將業務和 IT 團隊聚集在一起以解決任何技術背景問題以安全合作的應用程序。它還使可持續性能夠創建應用程序生態系統。他們還在其網站上提供了帶有進度條的多步驟表單。例如，如果您單擊主頁上的開始免費試用按鈕，它會將您轉到多頁表單。

表單非常簡單，每一步都有 2 個表單域。此外，它是豐富多彩的享受。

通過“Hello Fresh”選擇您的用餐計劃

Hello Fresh 是一個膳食計劃提供商網站。它是美國最大的餐包供應商，還在丹麥、新西蘭、瑞典、加拿大、澳大利亞和西歐提供服務。從主頁轉到查看我們的計劃選項，您將獲得多步驟表格。他們的表格看起來非常驚人，當您填寫此表格時，您甚至不會認為它是表格。它將帶您順利完成流程，您還可以在表單頂部看到進度條。

我們希望您了解 WordPress 網站上多頁表單的概念。現在，讓我們看看這些表格如何使您的在線業務受益。

為什麼要為您的網站使用多頁表單？

您可能會問自己，拆分錶單如何成為提供更多信息和提供更好用戶體驗的好東西——好問題。

答案是多步驟表單以更有條理的方式呈現大量長篇信息，並使其不那麼不堪重負。此外，多頁表單比單步表單驅動更多的轉換。例如，出色的多步驟表單可以將您的轉化率提高 100%。此外，在一項實驗中，單步形式在轉換為多步形式時增長了 59.2%。

更重要的是？多階段表格允許您提出更多問題而不會讓訪問者感到無聊，並讓您收集更多合格的潛在客戶。在 WordPress 網站上使用多階段表單的一些主要好處是：

提供用戶友好的體驗
幫助提升品牌知名度
提高轉化率
為銷售團隊獲取優質線索

現在，讓我們進入主要部分，使用 Fluent Forms for WordPress 設計一個多階段表單。您為什麼為此選擇 Fluent Forms？原因如下。

為什麼選擇流利形式？

Fluent Forms 是 WordPress 存儲庫中一個強大而輕量級的表單構建器。它擁有 60 多個字段、70 多個預建模板和 40 多個第三方集成，讓您的表單更美觀。在輸入字段部分，它包括文件上傳、圖像上傳、複選框、多項選擇、自定義 HTML、動作掛鉤、可檢查掛鉤、範圍滑塊、淨推薦分數、單選按鈕、自定義提交按鈕、顏色選擇器字段、測驗分數字段、post/CPT 選擇、表格步驟等選項，讓您的多步驟表格看起來很棒。它還支持容器、支付字段和支付集成，如 Stripe、PayPal、Mollie、RazorPay、PayStack 等。

還有什麼？該插件足以讓您擁有運行整個網站的所有訪問權限。它與 MailChimp、CleverReach、Zapier、Gist、Platformly、CampaignMonitor、Getrespone、ActiveCampaign、Trello、Drip、Sendinblue、Zoho、Moosend、SendFox、FluentCRM、Ninja Tables、WP Social Ninja、Twilio、Hubspot、持續聯繫、Discord、 MailerLite、Salesforce、Slack、Telegram 和更多選項。是不是很神奇？

此外，測驗構建器模塊和會話表單功能使該插件比市場上的其他表單構建器更有價值。更重要的是，您可以在表單提交後向您的用戶發送電子郵件通知，限制和安排您的表單，使用全局樣式器選項使您的表單更漂亮，等等。出於安全考慮，Fluent Forms 具有 hCaptcha、reCAPTCHA（v2 和 v2）、Honeypot 和專用的 GDPR 字段來保護用戶的信息。該工具更令人驚奇的是，您無需任何編碼經驗即可訪問該工具的所有功能。由於其時尚的界面和流暢的拖放功能，任何初學者都可以使用該插件。

獲取 Fluent Forms Pro

所以，事不宜遲，讓我們繼續這個過程。

使用 Fluent Forms 輕鬆設計多頁表單

假設您想為您的產品網站製作一個結帳表單，並希望通過一個步驟表單來顯示它。我們按照這四個簡單的步驟來設計表單。

創建表單
自定義表單
表單設置
發布

步驟 1：創建表單

轉到 Fluent Forms Pro 儀表板，因為您將需要 pro-add-on 包才能使用多頁表單選項。然後，選擇所有表單選項，然後從打開的新選項卡中單擊添加新表單按鈕。在這裡，您可以從下拉菜單欄中選擇Create Conversational Form選項或Create Post Form按鈕。

假設您要選擇創建帖子表單選項，因為這裡不需要會話表單。單擊按鈕後，您必須選擇帖子類型。要將表單粘貼到帖子、頁面、文檔或 kadence 元素中，請從彈出窗口中選擇任何人。

如果你想創建更簡單的，你可以跳過下拉菜單部分，直接點擊添加新表單按鈕。我們將選擇第二個選項，選擇空白表格圖而不是任何其他預先構建的模板。

現在，讓我們設計表格。

第 2 步：自定義表單

創建表單後，您將看到 Fluent Forms 界面。在這裡，您會注意到三個不同的區域：主界面、輸入字段和輸入自定義。現在，是時候在表單中添加必要的字段了。那麼，我們需要在結帳表單中添加哪些字段？這很簡單。因為我們已經填寫了這麼多結帳表格，並且表格字段已經在我們的腦海中。

因此，現在從輸入字段部分拖放或選擇字段。在 Fluent Forms 中，您將獲得四個部分的輸入字段：通用字段、高級字段、容器和支付字段。我們從通用字段部分獲取姓名、電子郵件、號碼和地址字段。

要自定義字段的設置，請轉到輸入自定義部分。例如，我們正在解決地址字段的設置。在這裡，我們不想為結帳過程收集任何第二個地址和州名。所以我們取消了這些選項。

之後，我們將轉向高級字段選項。現在，我們選擇表單步驟字段，因為表單將是長格式。我們想在這裡讓我們的客戶休息一下，把他們帶到下一頁。

這裡是核心部分——使用 Fluent Forms 自定義多頁表單。該插件的表單步驟字段包含三個不同的部分。這些在下面描述。

分頁開始

這是表單步驟字段的第一個選項。這部分包含表單的第一頁。當您完成表單的第一部分時，它將自動轉換為分頁開始部分。要自定義此部分，請單擊選項的編輯圖標。它涵蓋三個不同的部分。讓我們討論一下選項。

元素類：它將自定義 CSS 類添加到輸入字段本身。
進度指示器：此選項可幫助用戶根據自己的選擇查看表單的進度。您可以從三種不同的指示條樣式中進行選擇：進度條、步驟和無。我們正在選擇進度條選項。前往進度欄將顯示表單的進度，並在欄中顯示百分比。選擇步驟按鈕代表表單過程的步驟，而無按鈕將不顯示任何有關表單進度的信息。

步驟標題：使用此部分，您可以命名表單步驟或部件。例如，我們將步驟 1 設置為個人信息，將步驟 2 設置為產品信息。客戶將看到如下圖所示的表格。

最後一部分是關於禁用表單的自動滾動、啟用自動頁面和啟用每一步數據保存。

- 我們的步驟表單默認啟用自動滾動。您可以勾選“更改每一頁時禁用自動對焦”按鈕以禁用它。

如果啟用“啟用自動頁面單單選字段”選項，它將觸發多步驟表單下一頁上的最後一個單選按鈕字段。

最後，如果您啟用“啟用每步數據保存”字段，將保存當前數據。因此，您的用戶可以恢復他們離開的那一天。勾選此部分後單擊打開的字段以啟用恢復會話。

分頁符

每次您需要執行新步驟時，單擊或拖放此部分下方的表單字段。因為它會自動在構建器點上創建一個新步驟或部分。之後，您會注意到已經創建了一個新空間來輸入新的字段或步驟。將鼠標懸停在字段上時，您必須通過單擊編輯圖標來自定義此段。在這裡，您將看到以下要自定義的部分。

上一個按鈕：在這部分，您必須從兩個選項中進行選擇，默認或圖像。選擇默認選項將顯示上一頁的文本按鈕。選擇圖像部分將代表您選擇的圖標。
上一個按鈕文本：此字段將幫助您編輯上一個按鈕文本或將您添加的圖像的圖標鏈接添加到上一個按鈕。
下一個按鈕：此按鈕的設置與上一個按鈕的設置相同。唯一的區別是這是為下一個按鈕。您必須選擇要在下一個按鈕上顯示的文本或圖像選項。
下一個按鈕文本：在本節中，您必須提供所選選項的文本或下一個按鈕的鏈接。
元素類：您可以將自定義 CSS 添加到輸入字段本身。

尋呼結束

分頁結束是 Fluent Forms 的 Form Step 字段的最後一部分。它表示多頁表單的結束。同樣，您必須通過單擊字段的編輯圖標來編輯此部分。此選項包含三個不同的編輯選項。這些是：

元素類：包括輸入字段本身的自定義 CSS 類。
上一個按鈕：您必須從兩個選項中進行選擇，例如默認或文本。
上一個按鈕文本：自定義上一個按鈕文本或調整圖標鏈接以展示圖像。

這樣我們就完成了表單的第一步。在第二步中，我們將添加容器，以及一些支付字段，例如支付項目、項目數量、支付方式等。要設計出色的支付表單，您可以查看我們關於使用 Fluent Forms 支付集成收款的文章。如前所述，這些字段將在分頁選項之後添加。我們的表單是一個兩步表單，所以現在，這是我們表單的最終外觀。