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