WPForms 最佳實踐:如何為您的網站製作完美的表單

已發表: 2024-10-18

您是否正在尋找為您的網站創建完美表單的最佳方法?

建立表單時需要考慮很多事情。您將如何設計和組織內容?您是否使用了表單的全部功能?

您有各種自訂選項,但這並不意味著它很複雜。 WPForms 提供了所有工具,讓您可以輕鬆建立完美的表單,而無需編寫任何程式碼。讓我告訴你!

WPForms 最佳實踐:如何為您的網站製作完美的表單

  • 1. 分隔線和標籤
  • 2. 場地大小
  • 3. 用戶選擇和人工智慧
  • 4. 內容欄位客製
  • 5. 佈局和中繼器選項
  • 6. 必填字段
  • 7. 教學文本
  • 8. 通知電子郵件
  • 9.WPForms模板
  • 10. 預覽表格

    1. 分隔線和標籤

    讓我們從頂部開始,然後沿著表格向下進行,好嗎?

    根據表單上的資訊量,您可能需要將其分成幾個部分。例如,您的表單使用者的姓名、電子郵件地址和電話號碼可以組織到名為「聯絡」的部分中。

    若要建立此結構,請將「部分分隔符號」欄位拖曳到上方並將其放置在表單的頂部。

    Adding a Section Divider field in WPForms

    然後,根據需要將表格的其餘部分分成幾個部分。部分分隔符號只是一種直觀地組織表單的方法,使用戶更容易消化資訊。這不僅提高了表單的可用性,而且還增加了使用者填寫表單的可能性。

    至於字段本身,不言而喻,字段標籤需要清晰、簡潔且資訊豐富。避免使用模糊或過於技術性的術語 - 您的使用者應立即了解所要求的資訊。

    立即建立您的 WordPress 表單

    2. 場地大小

    將欄位新增至表單時,您可能會注意到大多數欄位都可以調整大小。欄位可以是小、中或大,其中大多數預設為中。

    Field size options in WPForms

    當您在網站上嵌入表單或預覽表單時,這些中等欄位可能不會填滿表單的整個寬度。

    Medium and Large field sizes in a form preview

    在某些情況下,您可能不介意這一點,但如果您希望所有欄位跨越表單的整個寬度,則可以確保將其「欄位大小」變更為「大」。

    3. 用戶選擇和人工智慧

    建立表單時要考慮的另一件事是您將為表單使用者提供哪種類型的欄位以從中選擇答案。

    您可能希望所有給定的選項都透過複選框或多項選擇單選按鈕顯示在前面。或者,您可以保留下拉選項中包含的某些特定選項。這實際上僅取決於表格的目的。

    幸運的是,一旦您確定了用戶選擇字段,您就可以使用我們的內建人工智慧功能,該功能將立即為您生成合適的選擇。假設您正在建立寵物美容預約表,並且不確定要包含哪些寵物選項。你可以提示人工智慧立即產生「狗」、「貓」甚至「異國寵物」等選項。

    Generate choices with WPForms AI

    但請記住,所有人工智慧都對其給出的提示很敏感。因此,它提供的結果可能會因提示而異。

    就我個人而言,當在表單產生器中使用人工智慧助理時,我發現最簡單的方式是直接使用提示。我只會要求該表格的確切數據點,例如“寵物美容預約表格的熱門寵物選擇”或類似內容。

    WPForms AI choices chat

    這是一種簡單且快速的方法,可確保您不會遺漏表單使用者應該選擇的任何選項。

    4. 內容欄位客製

    在使用者體驗方面,品牌一致性是關鍵。 WPForms 可讓您使用「內容」欄位將您的品牌融入您的表單中。這包括添加徽標、選擇字體,甚至調整大小和方向以符合您的品牌美感。

    Using the Content field to add branding to a contact form

    內容欄位是一種靈活的方式來傳達訊息、突出顯示重要訊息或展示您的品牌,而不會分散對表單功能的注意力。您甚至可以使用此空間來顯示促銷橫幅或季節性訊息。

    如果品牌是您自己的行銷最佳實踐的主要部分,那麼請務必利用這個可自訂的欄位。

    另請閱讀:如何在 WordPress 中添加表單標題圖像或徽標

    5. 佈局和中繼器選項

    與欄位大小注意事項類似,如果您願意,您可以使用各種表單佈局。

    您的表單可以佈置在單列或多列中,後者包括所有形狀和尺寸的選擇。

    Layout field presets

    由於我喜歡透過根據需要調整欄位大小來保持欄位統一,我還喜歡使用「佈局」選項將表單的各個部分保留在簡潔的列中。

    但等等,還有更多!

    您也可以使用“中繼器”欄位選項來使事情井井有條。如果您預期表單使用者會多次輸入相同類型的資訊(例如招募表單上的工作經驗),您可以使用「重複器」字段,讓表單使用者只需點擊按鈕即可重複此欄位。

    Using the Repeater field to list job experience

    您無需使用空白欄位超載表單並建立一系列條件邏輯設定來隱藏它們,只需將所需欄位拖曳到總體中繼器欄位區域中即可。在這裡,您可以選擇您希望這些可重複欄位遵循的佈局類型。

    另請閱讀: WPForms Repeater 字段與具有條件邏輯的佈局字段

    6. 必填字段

    對於添加到表單中的每個字段,您需要記住的一件快速而簡單的事情是您是否將其設定為用戶的必填項。

    在欄位設定中,您將找到一個切換選項,該選項為該欄位提供紅色星號並使其成為必填欄位。

    Making a field required in WPForms

    因此,您的表單使用者必須在提交表單之前填寫該欄位。如果沒有這些必填字段,他們就無法提交,通常(至少)電子郵件地址字段是必填字段。

    7. 教學文本

    建立表單時,有多種不同的方法來包含說明文字。

    說明性文字闡明了您需要的訊息,並使表格填寫過程更加直觀。它可以是範例、說明或一些其他資訊。

    Field description for a Paragraph Text field

    根據我的經驗,包含說明文字的兩個最佳位置是每個欄位的佔位符或描述內。佔位符顯示在輸入欄位本身內部,而說明則位於其正下方。

    您可以在此處提供您向表單使用者要求的資訊的範例。因此,對於電子郵件字段,您可以顯示類似「[電子郵件受保護]」的內容。

    每個欄位的描述區域也是如此,它也可以在每個欄位的設定中找到。

    請記住,表單上過多的文字可能會讓使用者不知所措,因此最好保持表單盡可能簡潔。

    8. 通知電子郵件

    您不想忘記的表單的另一個區域是通知電子郵件。這是您的表單使用者在您的網站上提交表單後收到的電子郵件。您可以將其用作表單已提交的確認。

    您可以透過前往設定 » 通知,直接在每個表單的表單建構器中自訂此訊息。您可以藉此機會進一步與您的用戶建立聯繫並推廣您的品牌。

    Creating a form notification in WPForms

    WPForms 智慧標籤可讓您輕鬆地將表單提交中的資訊提取到通知電子郵件中,以便您可以包含個人化詳細資訊。

    根據您要建立的表單類型,您可以包含大量不同的內容,例如:

    • 簡單感謝您訂閱電子報
    • 訂單的自訂確認訊息
    • 優惠券代碼和新潛在客戶的獨家優惠

    可能性是無限的!

    9.WPForms模板

    我在這裡介紹的所有內容中最好的部分是什麼?您可以使用所有這些最佳實踐來自訂 WPForms 模板,這些模板已經內建了許多這些功能。

    我們在我們的庫中提供了數千個表單模板,因此我們很可能會為您預先建立您想要建立的表單。

    Choosing a template in the form builder

    從簡單的聯絡表單到調查或付款表單等更複雜的應用程序,WPForms 範本旨在節省您的時間和精力,同時確保您的表單得到最佳化。

    因此,最好從表單範本作為基礎開始。樣式和組織選擇、必要的外掛程式、適當的確認訊息——所有這些以及更多內容都經過每個表單範本的仔細考慮。

    10. 預覽表格

    在發布表單之前,請務必花時間預覽它。您可以在桌面和行動裝置上預覽表單,以確保它無論在何處顯示都看起來完美。

    Previewing a form

    請記住,您網站上的主題可能會影響表單的外觀,因此請進行即時測試。例如,當嵌入整個頁面和側邊欄小工具時,欄位大小或佈局可能會有所不同。當您對表單在網站各個區域和不同裝置上的外觀感到滿意時,就可以了。

    這就是全部!

    透過遵循這些 WPForms 最佳實踐,您將能夠很好地建立不僅美觀而且易於轉換的表單。無論您是使用我們的預先建立範本之一還是從頭開始,WPForms 都會為您提供自訂表單所需的所有工具。

    立即建立您的 WordPress 表單

    WPForms 最佳實務常見問題解答

    這些是我們看到的有關 WPForms 最佳實踐的一些首要問題。

    如何在 WPForms 中自訂範本?

    選擇範本後,您可以透過新增或刪除欄位、調整欄位大小以及啟用付款或訂閱選項等其他設定來進行自訂。

    我可以使用 WPForms 收款嗎?

    是的,WPForms 與 PayPal 和 Stripe 等流行的支付網關整合。您可以收取一次性付款或設定定期訂閱。

    WPForms 適合行動裝置嗎?

    絕對地! WPForms 完全響應式且適合行動設備,確保您的表單在任何裝置上看起來都很棒。

    接下來,發現更多隱藏功能

    我已經向您展示了為您的網站建立最佳表單的個人技巧,但我們僅僅觸及了所有 WPForms 功能的皮毛。還有更多的功能有待發現與探索。

    看看我們關於 WPForms 隱藏功能的有趣文章,看看您發現了什麼!

    準備好建立您的表單了嗎?立即開始使用最簡單的 WordPress 表單產生器外掛。 WPForms Pro 包含大量免費模板,並提供 14 天退款保證。

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