如何自定義和設計您的 WordPress 表單（兩種簡單方法）

最後更新於 2024 年 4 月 25 日，編輯團隊撰寫 | 審核者：Syed Balkhi

分享：

為什麼要自定義和設計您的 WordPress 表單？

當您使用插件將表單添加到 WordPress 網站時，您會發現其布局通常簡單而單調。例如，使用用戶註冊表單插件添加註冊表單時，會發現其布局有些乏味，這可能無法吸引訪客的注意，甚至會讓他們不願填寫表單。

通過自定義您的表單，您可以將其與 WordPress 主題和品牌相匹配，使其更具吸引力。這可以帶來更多轉化，因為設計精美的 WordPress 表單更易於瀏覽，可以鼓勵更多用戶填寫它們。

設計美觀的表單還可以增加用戶對您品牌的認知。例如，您可以使用網站標誌和公司標識顏色使表單更具記憶性和有效性。

方法1：使用 WPForms 自定義和設計 WordPress 表單（無需代碼方法）

您可以輕鬆地使用 WPForms 來自定義和設計您的 WordPress 表單。它是市場上最好的 WordPress 聯繫表單插件，使用超過 600 萬個網站。WPForms 提供拖放生成器，使您可以非常簡單地創建任何類型的表單。此外，它還擁有預製的主題庫和內置的自定義選項，不需要任何代碼。

首先，您需要安裝並激活 WPForms 插件。詳細說明請參見我們的步驟指南「如何安裝 WordPress 插件」。注意：WPForms 也有免費版本可供本教程使用。然而，我們將使用高級插件，因為它具有更多設置和選項。

啟動後，從 WordPress 管理員側邊欄訪問 WPForms » 設置頁面，輸入您的許可密鑰。您可以在 WPForms 網站的帳戶中找到此信息。

完成後，從 WordPress 儀表板導航至 WPForms » 新增頁面。這將帶您來到「選擇模板」頁面，您可以從這裡開始鍵入表單名稱。之後，您可以選擇任何表單模板並點擊其下的「使用模板」按鈕。在本教程中，我們將創建並添加一個簡單的聯繫表單到我們的網站。

這將在 WPForms 表單生成器中啟動模板，您將看到右側的表單預覽以及左列的表單字段。從這裡，您可以根據喜好拖放任何表單字段到表單中，也可以重新排列或刪除字段。

完成表單後，點擊頂部的「保存」按鈕退出表單生成器。然後，您需要從 WordPress 儀表板導航到 WPForms » 設置頁面並勾選「使用現代標記」選項框。如果不這樣做，WPForms 自定義設置將無法在塊編輯器中使用。不要忘記點擊「保存更改」按鈕以存儲設置。

接下來，打開您想要添加剛剛創建的表單的頁面或文章。從這裡，您只需點擊左上角的添加塊按鈕‘+’以打開塊菜單並添加 WPForms 塊。完成後，從塊內的下拉菜單中選擇您想要添加到網站的表單。

現在您已經添加了表單，是時候來自定義和設計它了。要做到這一點，您必須打開屏幕右側的塊面板並滾動到「主題」部分。從這裡，您可以從 40 多個預設主題庫中選擇一個，以立即為表單賦予美觀的外觀。

接著，您可以滾動到「字段樣式」部分進一步自定義表單。您可以從下拉菜單中選擇表單字段的大小，甚至為它們設置邊框大小和半徑。接下來，您可以使用顏色選擇工具更改表單字段的背景、文本和邊框顏色。在這裡，使用品牌的標識顏色或 WordPress 網站中使用的其他顏色以創建一個視覺吸引力表單。

完成後，滾動到「標籤樣式」部分，您可以從下拉菜單中選擇標籤的字體大小。然後，您還可以更改表單中顯示的字段標籤、副標籤和錯誤消息的字體顏色。

要自定義表單中的按鈕，您需要滾動到「按鈕樣式」部分，並從下拉菜單中選擇其大小。您還可以設置邊框半徑並更改表單提交按鈕的背景和文本顏色。

自定義完表單後，只需點擊頂部的「更新」或「發布」按鈕以存儲設置。現在，您可以訪問您的網站觀看設計後的 WordPress 表單。

方法2：使用 CSS 設計 WordPress 表單（高級自定義）

如果您不想使用 WPForms 提供的自定義選項或希望使用 CSS 應用不同的自定義，您也可以使用自定義 CSS 片段來做到這一點。首先，您需要使用市場上最好的表單生成器 WPForms 創建表單。它是一個拖放生成器，提供許多模板，例如聯繫表單、文件上傳表單、註冊表單、RSVP 表單等。詳細說明，請參見我們的教程「如何在 WordPress 中創建聯繫表單」或方法 1。

創建完表單後，是時候使用市場上最好的 WordPress 代碼片段插件 WPCode 來自定義它。這是添加 CSS 代碼來設計您的 WordPress 表單最簡單和最安全的方法。首先，您需要安裝並激活 WPCode 插件。詳細說明，您可能希望參見我們的初學者指南「如何安裝 WordPress 插件」。注意：WPCode 有一個免費版本可供本教程使用。但是，我們將使用高級計劃。

啟動後，從 WordPress 儀表板導航到代碼片段 » + 新增片段頁面。一旦到那裡，只需點擊‘添加自定義代碼（新片段）’選項下的「使用片段」按鈕。

這將帶您到「創建自定義片段」頁面，您可以從這裡開始鍵入代碼片段的名稱。之後，從屏幕右上角的下拉選單中選擇「CSS 片段」。接著，將以下代碼複製並粘貼到「代碼預覽」框中：

#wpforms-0000 .wpforms-form {背景顏色：#ADD8E6 ！重要；字體家庭：'Arial'，無襯線 ！重要；填充：20px 15px ！重要；邊框：3px 寬實線 #666 ！重要；邊框半徑：20px ！重要；}

一鍵使用於 WordPress

完成後，您需要將頂部的默認短代碼替換成您要自定義表單的短代碼。要做到這一點，訪問 WordPress 儀表板中的 WPForms » 所有表單頁面並複製您要設計的表單的 WPForms ID 號碼。之後，在代碼中的 wpforms- 行旁邊粘貼表單的 ID 號碼。現在，所有代碼將僅在特定表單中執行。

接下來，您可以輕鬆更改背景顏色的十六進制代碼、添加您選擇的字體家族，並通過更改代碼片段來配置表單的填充和邊框半徑。完成後，滾動到「插入」部分並選擇「自動插入」模式。代碼將在啟動後自動在網站上執行。

最後，滾回頁面頂部並將開關切換到‘啟用’。之後，點擊「保存片段」按鈕以存儲設置。現在，WordPress 表單將根據 CSS 片段自動自定義，您可以查看它。如果尚未將表單添加到網站，只需在塊編輯器中打開頁面或文章。

一旦到那裡，點擊左上角的‘+’按鈕以打開塊菜單並添加 WPForms 塊。之後，從塊內的下拉選單中選擇您使用 CSS 片段設計的表單。最後，點擊「更新」或「發布」按鈕以存儲設置。現在，您可以訪問您的 WordPress 網站查看自定義後的表單。