如何更改 WordPress 聯繫表單樣式

想要更改您的 WordPress 聯繫表單樣式？ 那麼本指南適合您！ 您將了解 WordPress 表單樣式如何變得超級簡單！ 了解更多。

大約閱讀時間：6 分鐘

你只有一次機會留下第一印象。

以漂亮的形式吸引訪問者的注意力是給人留下深刻印象的一種方式。

這也是讓他們填寫您的表格的完美方式。 畢竟，如果他們看不到它，他們怎麼能填寫呢？

所以，如果您已準備好從基本的表單到漂亮的表單，那麼本指南適合您。

我們將向您展示兩種輕鬆更改 WordPress 聯繫表單樣式的方法！

讓我們開始吧。

如何更改您的 WordPress 聯繫表單樣式

正如我們提到的，有兩種方法可以自定義表單的樣式

您選擇哪一個取決於您對編碼的熟悉程度。 但我們會向您展示這兩種方法，以便您了解所有可用選項。

方法 1：在 WordPress 中編輯表單代碼

那麼，您想一頭扎進編碼領域，對吧？

我們假設您已經構建了一個表單並希望對其進行自定義。 如果您沒有表格，請轉到我們的創建表格指南以開始使用。

第 1 步：獲取表單的 ID 或類

首先，您需要獲取表單的ID或類。

一種簡單的方法是前往您的網站，右鍵單擊您的表單，然後單擊Inspect 。 在這裡，我們將在您的子主題中看到表單 HTML 模板。

Google 的開發人員工具側邊欄將滑出，您可以查看表單的不同代碼部分。

最重要的是找到您要自定義的區域並跟踪ID或類名。 您將使用它來進行更改。

例如，如果我們想要更改“聯繫我們”表單模板的背景顏色，我們會找到最外層的代碼。 在這種情況下，它是一個帶有 類api-form-b​​ox 。

我們甚至可以從這個控制台測試它的外觀。

如果我們右擊div並點擊Add Attribute ，我們可以添加背景顏色樣式。

按Enter，更改會立即顯示在窗口中。

不過別擔心。 每當您刷新頁面時，表單都會恢復正常。

接下來，進入您的 WordPress 管理員以進行必要的 CSS 代碼更改。

第 2 步：更改 WordPress 管理面板中的 CSS

現在您已經記下了您想要在我們的表單上更改的一些內容，請前往您的 WordPress 管理員開始。

接下來，在您的 WordPress 側邊欄中，選擇外觀→ 自定義→ 附加 CSS來設置表單樣式。

您可以在此處為表單輸入 CSS 類。

例如，我們決定更改表單中的一些內容，因此這是我們輸入的代碼：

要標記Class ，您必須包含一個. 在類名之前。 對於ID ，您輸入# 。

但是，如果您使用此方法，我們建議您更多地了解 CSS 規則以更好地理解您的更改。

對於我們的示例，它會像這樣分解：

• .api-form-b​​ox正在將背景顏色更改為淺藍色
• .frm-button-submit正在將提交按鈕背景更改為黃色，將文本更改為黑色
• .frm-submit使按鈕在表單中居中

通過這些更改，我們的表單將如下所示：

從這裡開始，你的力量是無限的。 如果您學習瞭如何使用 CSS，則可以根據自己的喜好自定義表單。

但是，這種方法有一些缺點。

更新可能會破壞您的表單設計並導致您再次這樣做。 更不用說它很耗時了。 如果您有多個聯繫表單，則必須編輯 HTML 代碼並為每個表單添加自定義 CSS。

但是，如果您想要更直接和牢不可破的東西，我們建議您查看以下方法。

方法 2：使用帶有視覺樣式器的表單生成器

編碼是一項需要時間學習的技能。

而且很多人沒有時間學習。 如果是您，那麼表單生成器是您的最佳選擇。

我們推薦的一個是Formidable Forms 。

它是 WordPress 最先進的表單構建器 WordPress 插件，這意味著表單構建簡單且省時，可以將更多時間用於您網站的其他區域。

無論您網站上的表單類型如何，Formidable 都能快速處理。

沒有編碼，沒有麻煩——只是簡單的表單構建。

還有其他表單構建器可供選擇（WPForms、Gravity Forms 等），但它們不提供 Formidable 附帶的樣式功能。 這意味著您可以更好地控製表單的外觀。

我們建議您也查看 Formidable 的高級計劃。

雖然他們不需要為您的表單設計樣式，但您可以獲得許多很棒的功能：

• 訪問表單設計模板
• 能夠自定義您的背景圖像
• 更多表單模板可讓您更快地開始使用表單
• 以及更多

因此，一旦您安裝並激活了 Formidable，您就可以開始了。

立即獲取 Formidable Forms！

只需三個簡單的步驟即可設置表單樣式並使其在您的網站上生效：

1. 創建表單
2. 樣式表
3. 顯示表格

第 1 步：創建表單

要設置表單樣式，您需要設置表單樣式，對吧？

因此，前往您的 WordPress 管理員並轉到Formidable → Forms → Add New 。

您可以選擇我們眾多預建模板（高級功能）或空白表格中的一種來開始使用。

接下來，為您的表單命名並單擊創建。

該插件會將您帶到其拖放構建器，您可以在其中輕鬆編輯表單。

添加您想要的任何表單字段、自定義字段標籤、更改輸入類型，以及從側邊欄菜單中進行更多操作。

如果您要創建聯繫表單，最好添加以下內容：

• 訪客姓名的文本字段
• 通過電子郵件聯繫他們
• 他們要添加的消息段落

設置聯繫表格後，單擊“更新”以保存您的更改。

然後，我們將前往“樣式”選項卡。

第 2 步：設置表單樣式

在“樣式”選項卡下，您會看到一些選項。

您可以選擇我們預製的設計模板之一來節省您的時間（高級）或開始設計您自己的模板。

要設計您自己的樣式，請單擊Formidable Style旁邊的三個點，然後單擊Edit 。 Formidable Style 是 Formidable 中的默認風格。

這會將您帶到我們的 Formidable Style 設計器，您可以在其中自定義您的表單。

您可以更改標籤的大小和顏色、輸入字段、字體大小和背景顏色，甚至可以上傳背景圖片！

例如，對於一個名為Cheap n' Cheesy的測試網站，我們設計了一個反映業務的表單：

您和您的聯繫表的可能性是無限的！

因此，在自定義表單後單擊更新以保存更改。

現在我們只需要讓它顯示出來！

第 3 步：顯示表單

顯示表單比創建表單更容易。

首先，前往您要顯示表單的帖子或頁面並添加一個新的 WordPress 塊。

接下來，搜索Formidable Forms塊，將其添加並從下拉菜單中選擇您的表單。

最後，更新您的帖子或頁面，您的表單將出現在您的頁面上！

我們告訴過你這很容易，就像 Formidable 的所有內容一樣。

立即獲取 Formidable Forms！

準備好在您的網站上設置 WordPress 聯繫表單的樣式了嗎？

能夠設計聯繫表格的樣式是您需要的，而不是想要的。

您可能會看到有關自定義的 Contact Form 7 插件的搜索。 諸如 Contact Form 7 CSS、WPCF7 中的輸入類型文本或 WPCF7 中的輸入類型電子郵件之類的東西。

這兩種方法都不需要這些。 這篇文章教你如何在 WordPress 中自定義聯繫表單，讓你的表單看起來如你所願。 無論您是輸入自定義 HTML、CSS 等，還是使用 Formidable Forms。 你不會失望的。

所以，不要再等了。 獲取 Formidable Forms 並開始設計您的表單！

並在 Facebook、Twitter 和 YouTube 上關注我們，以獲取更多出色的表單提示和技巧！

從 Formidable 博客閱讀更多內容

• 強大的表格 6.0！ 樣式模板、確認表單操作等
  閱讀更多

  Jotform vs Typeform vs Formidable Forms [比較]
  閱讀更多

  如何使用 WordPress 聯繫表單在提交後重定向
  閱讀更多

您是否知道 Formidable Forms 是當今可用的最快的 WordPress 表單構建器插件之一？ 如果您還沒有使用它，請開始使用我們的免費插件或功能齊全的專業版！