您可以自定義表單以匹配您的 WordPress 網站的設計。這可以為您的網站創建更具視覺吸引力和專業的外觀，并改善用戶體驗。在本文中，我們將逐步向您展示如何輕松自定義和設置 WordPress 表單的樣式。
為什么要自定義和樣式化您的 WordPress 表單？
當您使用插件將表單添加到 時，您會注意到它的布局通常簡單明了。
例如，如果您使用用戶注冊表單您的網站，那么您會發現它的布局有點無聊。這可能無法吸引訪問者的注意力，甚至阻止他們填寫表格。
通過自定義您的表單，您可以將它們與您的 和品牌相匹配，以使它們更具吸引力。
這可以帶來更多的轉化，因為樣式化的 WordPress 表單更易于瀏覽，并且可以鼓勵更多用戶填寫它們。
樣式化表單還可以提高您在用戶中的品牌知名度。例如，您可以使用和簽名公司顏色來使您的表單更加令人難忘和有效。
話雖如此，讓我們看看如何一步一步地輕松自定義和樣式化您的 WordPress 表單。我們將在這篇文章中介紹 2 種方法，您可以使用下面的快速鏈接跳轉到您要使用的方法：
方法1：如何使用WPForms自定義和樣式WordPress表單（無代碼方法）
您可以使用 輕松自定義和樣式化您的 WordPress 表單。它是市場上，被超過 600 萬個網站使用。
WPForms 帶有一個拖放構建器，可以非常輕松地創建您想要的任何類型的表單。此外，它甚至為您的表單提供了內置的自定義選項，不需要任何編碼。
首先，您需要安裝并激活 插件。
注意： WPForms 還有一個，可用于本教程。但是，我們將使用高級插件，因為它具有更多設置和選項。
激活后，您需要從 WordPress 管理側邊欄訪問 WPForms ? 設置頁面以輸入您的許可證密鑰。
您可以在 WPForms 網站上的帳戶中找到此信息。
完成此操作后，請前往 WPForms ? 添加新屏幕 從 WordPress 儀表板。
這將帶您進入“選擇模板”頁面，您可以在其中首先輸入表單的名稱。之后，您可以選擇所需的任何表單模板，然后單擊其下方的“使用模板”按鈕。
在本教程中，我們將創建一個簡單的聯系表格并將其添加到我們的網站上。
這將在 WPForms 表單構建器中啟動模板，您將在右側看到表單預覽，在左欄中看到表單字段。
從這里，您可以根據自己的喜好將您選擇的任何表單字段拖放到表單中。
完成自定義表單后，只需單擊頂部的“保存”按鈕即可退出表單構建器。
之后，您需要從 WordPress 儀表板訪問 WPForms ? 設置頁面并選中“使用現代標記”選項。如果未選中此框，則 WPForms 自定義設置在塊編輯器中將不可用。
不要忘記單擊“保存更改”按鈕來存儲您的設置。
接下來，打開要添加剛剛創建的表單的頁面或帖子。
從這里，您需要單擊屏幕左上角的添加塊“+”按鈕以打開塊菜單并添加WPForms塊。
添加塊后，只需從塊本身的下拉菜單中選擇要添加到站點的表單即可。
現在您已經添加了表單，是時候對其進行自定義并設置其樣式了。
為此，您必須打開屏幕右側的塊面板，然后向下滾動到“字段樣式”部分。
從這里，您可以從下拉菜單中選擇表單字段的大小，甚至可以為它們設置邊框半徑。
接下來，您可以使用拾色器工具更改表單字段的背景、文本和邊框顏色。
在這里，您可以使用品牌的標志性顏色或其余部分的其他顏色來創建具有視覺吸引力的形式。
完成此操作后，向下滾動到“標簽樣式”部分，您可以在其中從下拉菜單中選擇標簽的字體大小。
之后，您還可以更改將在表單中顯示的標簽、子標簽和錯誤消息的字體顏色。
要自定義表單中的按鈕，您需要向下滾動到“按鈕樣式”部分，然后從下拉菜單中選擇其大小。
您還可以設置邊框半徑并更改表單按鈕的背景和文本顏色。
完成自定義表單后，只需單擊頂部的“更新”或“發布”按鈕即可存儲您的設置。
現在，您可以訪問您的網站以查看樣式化的 WordPress 表單。
方法2：如何使用CSS設置WordPress表單樣式（高級自定義）
如果您不想使用 WPForms 提供的自定義選項，或者想要使用 CSS 應用不同的自定義項，那么您也可以使用自定義 CSS 代碼段。
為此，首先，您必須使用 創建一個表單，這是市場上的 #1 表單構建器。
它是一個拖放式構建器，帶有許多模板，您可以使用這些模板來創建聯系表單、、注冊表單、等等。
創建表單后，就可以使用 對其進行自定義了，這是市場上最好的 WordPress 代碼片段插件。
這是添加CSS代碼來設置WordPress表單樣式的最簡單，最安全的方法。
首先，您需要安裝并激活 插件。
注意：WPCode 有一個。但是，您將需要插件的高級計劃才能解鎖“CSS 片段”選項。
激活后，從 WordPress 儀表板訪問 Code Snippets ? + Add Snippet 頁面。
到達那里后，只需單擊“添加您的自定義代碼（新代碼段）”選項下的“使用代碼段”按鈕。
這將帶您進入“創建自定義代碼段”頁面，您可以在其中首先輸入代碼段的名稱。
之后，從屏幕右上角的下拉菜單中選擇“CSS 片段”選項。
接下來，將以下代碼復制并粘貼到“代碼預覽”框中：
#wpforms``-0000` `.wpforms-form {`` ``background-color``: ``#ADD8E6` `!important``;`` ``font-family``: ``'Arial'``, ``sans-serif` `!important``;`` ``padding``: ``20px` `15px` `!important``;`` ``border``: ``3px` `solid` `#666` `!important``;`` ``border-radius``: ``20px` `!important``;``}
完成此操作后，您必須將頂部的默認簡碼替換為要自定義的表單的簡碼。
為此，請從 WordPress 儀表板訪問 WPForms ? 所有表單頁面，并復制要設置樣式的表單的 WPForms ID 號。
之后，將表單的 ID 號粘貼到代碼中該行的旁邊?，F在，所有代碼將僅以這種特定形式執行。wpforms-
接下來，您可以輕松更改的十六進制代碼，添加您選擇的字體系列，并通過更改代碼片段來配置表單的填充和邊框半徑。
完成后，向下滾動到“插入”部分，然后選擇“自動插入”模式。
激活后，該代碼將自動在您的網站上執行。
最后，滾動回頁面頂部并將開關切換為“活動”。
之后，單擊“保存片段”按鈕以存儲您的設置
現在，WordPress 表單將根據 CSS 片段自動定制，您可以去查看它。
但是，如果您尚未將表單添加到您的網站，則只需在塊編輯器中打開頁面或帖子即可。
到達那里后，單擊左上角的“+”按鈕以打開塊菜單并添加 WPForms 塊。
之后，從塊本身的下拉菜單中選擇您使用 CSS 片段設置樣式的表單。
最后，單擊“更新”或“發布”按鈕以存儲您的設置。
現在，您可以訪問您的 WordPress 網站以查看自定義表單的實際效果。
獎勵：如何創建自定義網站頁面
樣式化 WordPress 表單只是使您的網站更具吸引力和視覺趣味性的一種方法。您還可以使用 設計自己的完全自定義的網站頁面。
它是市場上，可讓您在不使用任何代碼的情況下創建有吸引力的頁面。
SeedProd 帶有拖放構建器、預制、簡單的自定義選項、調色板和高級頁面塊。此外，您可以輕松地將 WPForms 表單嵌入到 SeedProd 編輯器中。
