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