如何添加 HTML 以在 WordPress 註冊表中顯示額外內容?
已發表: 2023-03-13想了解如何添加 HTML 以在 WordPress 註冊表中顯示額外內容嗎? 如果是,那麼這篇文章適合您!
HTML(超文本標記語言)是一種用於從頭開始創建網頁的編碼語言。
然而,在 WordPress 中,我們只使用其中的一小部分來控制內容的結構。 因此,您可以在 WordPress 帖子中包含額外的文本、圖像和視頻。
使用 WordPress 註冊表單上的 HTML 表單字段也可以完成同樣的操作。 這是為在您的網站上註冊的用戶提供額外信息或說明的好方法。
下面,我們準備了一個簡單的指南,向您展示如何將 HTML 添加到 WordPress 註冊表單。 開始吧!
目錄
什麼是 HTML 表單域? 為什麼要在 WordPress 註冊表中添加 HTML?
人們傾向於對 HTML 的技術方面保持警惕。 特別是當您需要將 HTML 添加到註冊表單這樣簡單的內容時。
但是有了 WordPress 中的 HTML 表單字段,就沒有什麼可擔心的了。 HTML 字段僅使用最少的編碼,這讓您非常容易理解。
將此字段添加到您的註冊表後,您可以對其進行自定義,以便為在您的站點上註冊的用戶提供額外的信息或說明。
除此之外,該領域還有其他幾個原因是有益的:
- 增加用戶參與度:圖像或視頻等視覺元素可以提高用戶參與度。 它還鼓勵用戶完成註冊過程。
- 自定義:在註冊表單中添加 HTML 允許您自定義您的表單以更好地適應您網站的設計和品牌。 這使網站脫穎而出,看起來更專業。
- 展示特別優惠:如果您提供特價或進行促銷,HTML 可以幫助您展示此類信息。 這會鼓勵用戶註冊您的網站。
這些是您應該將 HTML 添加到 WordPress 註冊表單的幾個原因。 我們相信你能想出更多。
話雖如此,讓我們探索在 WordPress 註冊表單中添加 HTML 的最佳方式。
在註冊表中添加 HTML 字段以顯示額外內容的最佳方式
在註冊表單中添加 HTML 字段的最佳方法是藉助註冊表單插件。
這些插件允許您毫不費力地將 HTML 字段添加到您的 WordPress 註冊表單中。
有很多選項可供選擇。 但是,我們建議使用用戶註冊插件,這是一個拖放註冊表單插件。
即使使用免費版本,它也可以讓您創建無限的表單。 同樣,您將獲得無窮無盡的字段來添加到您的註冊表中。
除此之外,用戶註冊還可以讓您:
- 使用個人資料圖像創建直觀且設計良好的用戶個人資料帳戶。
- 只需單擊一下即可導出註冊表,然後將它們導入到相同或不同的站點。
- 輕鬆創建多步驟註冊表格。
- 創建 WooCommerce 註冊表格並將其與結帳頁面同步。
但最重要的是,這個功能豐富的插件帶有各種附加組件,包括 Advanced Fields 附加組件。
此插件可幫助您解鎖高級字段,例如註冊表的 HTML 字段。 這正是您在這裡所需要的。
鑑於其強大的功能,我們將在本教程中使用用戶註冊。
在 WordPress 註冊表中添加 HTML 的分步指南
要了解如何添加 HTML 字段以向您的註冊表單添加額外內容,請按照以下簡單步驟操作:
第 1 步:安裝並激活用戶註冊專業版
您確實可以使用該插件的免費版本創建簡單的表單。 但是,HTML 字段位於“高級字段”部分下。
要解鎖此字段,您需要Advanced Fields附加組件,該附加組件僅隨插件的高級版本一起提供。
User Registration Pro 的安裝過程非常簡單。 只需訪問該插件的官方網站,您就會在其中看到 3 種不同的定價計劃。
您將在所有計劃中獲得Advanced Fields附加組件,因此請根據您的預算和要求購買計劃。
之後,您將收到指向您電子郵件的鏈接。 點擊鏈接並訪問您的帳戶信息中心。
從那裡,您可以下載插件的專業版並在許可密鑰選項卡下獲取許可密鑰。
之後,返回您的 WordPress 儀表板並導航至插件 >> 添加新插件。 然後只需單擊“上傳插件”按鈕。
接下來,選擇您之前下載的User Registration Pro zip 文件並點擊立即安裝。
現在,將許可證密鑰粘貼到所需區域並在您的站點上激活插件。
如果您需要詳細的整個安裝和設置過程,請點擊此鏈接了解如何安裝 User Registration Pro。
正確設置插件後,您可以繼續下一步。
第 2 步:安裝並激活 Advanced Fields 插件
現在您擁有高級版本,您可以輕鬆訪問Advanced Fields附加組件。
因此,導航至用戶註冊 >> 擴展並蒐索高級字段。
接下來,單擊“安裝附加組件”按鈕,然後依次單擊“激活” 。 就這樣,您擁有了Advanced Fields附加組件。
第 3 步:使用 HTML 字段創建一個新的註冊表單
現在,這是有趣的一步,創建一個新的註冊表單。 您可以從頭開始創建表單,也可以為此過程使用預先存在的模板。
因此,轉到用戶註冊 >> 添加新用戶,選擇從頭開始,或選擇一個表單模板。
高級版顯示您的大部分模板都已解鎖。
在這裡,我們將在本教程中使用學生註冊表模板。 您可以將鼠標懸停在所需的模板上,然後單擊開始按鈕。
執行此操作後,系統會立即要求您命名表單。 因此,輸入合適的表單名稱並按Continue 。
您可以看到學生註冊表所需的所有基本字段都已添加。
但是,您需要在表單上有一個 HTML 字段來添加額外的內容。 如前所述,您可以在“高級字段”選項下找到此字段。
因此,將其拖放到註冊表的適當部分。
您可以根據表單的要求添加任意數量的字段。
此外,您可以自定義每個表單字段選項。 只需單擊所需的字段,其字段選項就會出現在左側。
因此,單擊 HTML 字段,並編輯以下內容:
- Label :為您的字段提供合適的標題,例如 Notes、Request 等。
- 描述:添加您想要包含在表單中的描述。
- 字段名稱:此區域包含字段的 ID。 您可以保留原樣或根據您的喜好更改它。
- 隱藏標籤:您還可以從下拉列表中隱藏字段標籤。 只需選擇是或否。
- HTML :您可以從該部分將所有額外內容添加到您的表單中。 您需要的額外內容可以是註釋、免責聲明內容、警告等。
- 啟用工具提示:啟用工具提示以向用戶顯示有關該字段的信息。
以同樣的方式,編輯其餘字段的字段選項。
注意:表單字段具有類似的字段選項,您可以編輯這些選項。 但是,根據字段添加/刪除了一些選項。 所以,相應地定制。
自定義完成後,單擊“更新表單”按鈕保存。
您應該知道 HTML 字段的內容不會顯示在表單生成器中。 但是您始終可以預覽它以查看它在前端的外觀。
這就是您的表單在網絡上為用戶顯示的方式。
第 4 步:自定義註冊表單設置
下一個重要步驟是配置註冊表單的設置。
您會在Field Options旁邊找到Form Settings選項。
單擊它將進一步帶您進入常規設置。 從這裡,您可以自定義以下選項:
- 用戶批准和登錄選項:您可以從下拉列表中為您的用戶設置自定義批准和登錄條件。
- 默認用戶角色:該插件允許您設置在您的表單中註冊的用戶的角色。 您可以從 6 個默認用戶角色中進行選擇,例如Administrator 、 Subscriber 、 Author等。
- 啟用強密碼:勾選複選框並為用戶密碼選擇所需的強度。
- 重定向 URL :此選項允許您在成功註冊後為用戶添加重定向 URL。
- 提交按鈕類:您可以為提交按鈕分別輸入單個或多個 CSS 類名。
- 提交按鈕文本:為提交按鈕輸入所需的文本。 您可以使用“申請”、“立即加入”等術語。
- 成功消息位置:您可以選擇成功消息的位置,例如頂部或底部。
- 啟用驗證碼支持:您可以為垃圾郵件和機器人保護啟用驗證碼支持。
- 表單模板:使用下拉菜單從 5 種不同的表單模板樣式中進行選擇。
- 表單類:為表單包裝器添加單個或多個 CSS 類名稱。
接下來,就像常規設置一樣,您可以配置表單的額外設置。
您可以啟用各種重要的保護選項,例如Activate Auto Generated Password for users 、 Activate Spam Protection by HoneyPot和Enable Whitelist/Blacklist Domain 。
同樣,您可以啟用鍵盤友好型表單和啟用重置按鈕以使表單用戶友好。 您還可以更改 標籤 從Form Reset Button Label中刪除您的重置按鈕。
並且您可以啟用帶有額外字段的表單字段映射,以使用戶註冊插件與外部插件兼容。
這就是設置部分。 再次單擊“更新”表單以保存所有更改。
第 5 步:在您的網站上發布註冊表
最後,是時候發布帶有 HTML 字段的註冊表單,供用戶在您的網站上填寫。
要將表單嵌入您的網站,請轉至帖子/頁面 >> 添加新內容。
接下來,單擊添加塊( + ) 按鈕並蒐索用戶註冊塊。 然後,通過單擊將其添加到頁面。
之後,從下拉菜單中選擇您的 WordPress學生註冊表。
您還可以使用頂部的預覽按鈕檢查表單在前端的外觀。
下面是您的表單在前端的外觀圖像。
最後,如果您喜歡表單的外觀,可以點擊發布。
最後的想法!
就是這樣; 我們已經到了文章的結尾。 我們希望您已經學會了在 WordPress 註冊表中添加 HTML 以顯示額外內容。
感謝用戶註冊插件,在註冊表單中添加 HTML 字段非常容易。 您所要做的就是將字段拖放到您的表單中並對其進行自定義。
同樣,您可以探索用戶註冊的功能,例如在註冊表單中添加密碼字段、啟用管理員批准 Woo-Commerce 用戶等。
您可以在我們的博客上閱讀有關此強大插件的更多信息。 對於簡單的視頻教程,您可以訂閱我們的 YouTube 頻道。
如果您對該插件有任何疑問,請通過社交媒體聯繫我們。 我們在 Facebook 和 Twitter 上可用。