如何在 WordPress 中設置 Mailchimp 表單的樣式 [2 種方法！]

已發表: 2023-03-02

想要在 WordPress 中設置 Mailchimp 表單的樣式？本指南將向您展示設計 Mailchimp 註冊表單的樣式非常簡單！這是如何做的。

大約閱讀時間：5.5 分鐘

厭倦了試圖找到一種簡單的方法來在 WordPress 中設置 Mailchimp 表單的樣式？

我們明白。您搜索並蒐索但沒有找到很多選項。尤其是那些不希望您知道如何編碼的人。

這令人沮喪。

Formidable Forms 是最好的 WordPress 表單生成器插件。免費獲取！

但它不一定是。事實上，設計 Mailchimp 表單的樣式可能很有趣。

因此，這篇文章將向您展示兩種設置 Mailchimp 嵌入表單樣式的方法：使用 Mailchimp 和 Formidable Forms。

讓我們開始吧。

如何使用 Mailchimp 設置表單樣式
- 1. 如何使用 Mailchimp 設計表單樣式
- 2. 使用表單生成器設計您的表單

如何在 WordPress 中設置 Mailchimp 表單的樣式

Mailchimp 的表格看起來不錯，但有點基礎。

自定義它們以匹配您的網站是使它們脫穎而出的絕佳方式。

因此，可以通過三種方式在 WordPress 中設置 Mailchimp 表單的樣式：

使用 Mailchimp 樣式
使用表單生成器

由於兩者都有效，我們將向您展示如何分別進行。

1. 如何使用 Mailchimp 設計表單樣式

使用他們的方法設計 Mailchimp 的表單樣式可能很複雜。

那是因為您至少需要知道一些代碼才能開始。如果不這樣做，事情可能很快就會變得混亂。因此，我們向對自己的編碼能力有信心的人推薦這種方法。

要開始自定義您的表單，請前往您的 Mailchimp 帳戶並轉到受眾 → 註冊表單 → 嵌入式表單。

您可以通過添加電子郵件地址、名字或姓氏字段來自定義您的表單字段。

完成後，點擊繼續。

接下來，您將看到一段 HTML 代碼，您可以將其複制並粘貼到您的站點以顯示您的表單。

如果您想自定義此表單的外觀，那就意味著自定義您的表單代碼。

但是，有時，您必須使用 Mailchimp 的 CSS 掛鉤。 Mailchimp 有超過 30 個，例如 mc-embedded-subscribe-form 或 mc-embed signup。

如果您對 CSS 和使用這些鉤子足夠熟悉，那麼您可以對錶單做很多事情。

通過將此代碼粘貼到編輯器中並進行更改，可以自定義輸入字段、提交按鈕和任何表單操作。

更改表單的背景顏色

要更改表單的背景，您必須針對 <div id=”mc_embed_signup”> 代碼。

所以，在你的風格部分，你會看到一段代碼：

您可以更改此代碼以調整表單的背景。例如，您可以將背景：#fff更改為背景：#000以將背景更改為黑色。

但現在文本不再可見。所以你可以添加顏色：#fff將其更改為白色。

現在，您的表單看起來更棒了！

隨意嘗試自定義，看看您是否可以匹配您的 WordPress 網站！

自定義提交按鈕

現在，讓我們看看如何更改您的提交按鈕。

因此，您需要定位 <input type=”submit”>。但我們需要採用與您的表單背景不同的方式。

前往您的 <style> 部分，並為您的 Mailchimp 表單樣式覆蓋添加一些代碼：

這會將您的按鈕背景設置為白色，將文本設置為黑色。

現在你的表格開始組合在一起了！

您可以通過定位 CSS 掛鉤（例如mc-field-groups和 <input type=”email”> 代碼）來繼續自定義您的表單。

但是，如果您想要一種更簡單的方式來設置 Mailchimp 表單的樣式，請查看以下方法。

2. 使用表單生成器設計您的表單

使用自定義 CSS 非常適合讓您控製表單的設計。

如果你知道如何編碼。

但是，如果您想要一個更簡單的選項，我們建議您使用Formidable Forms 。

Formidable 是 WordPress 最先進的表單生成器，讓自定義表單變得輕而易舉。無論是聯繫表格還是 Mailchimp 彈出窗口，Formidable 都能滿足您的需求。

此外，憑藉其 Mailchimp 集成和出色的 Visual Form Styler，它是完美的 Mailchimp 聯繫表單構建器。

所以，安裝並激活 Formidable，然後我們就可以開始了。

獲取您的 Mailchimp 表單樣式器！

只需幾個步驟即可完成：

連接 Mailchimp 和 Formidable
創建您的表單
定制設計
顯示您的表單

1. 連接 Mailchimp 和 Formidable

在您的 WordPress 儀表板中，轉到Formidable → Add-Ons ，找到Mailchimp附加組件，然後安裝並激活它。

接下來，轉到Formidable → 全局設置 → Mailchimp 。

您可以輸入您的 Mailchimp API 密鑰以連接到您的 Mailchimp 帳戶。

現在您的 Mailchimp 帳戶已連接，是時候創建您的表單了！

2. 創建你的表格

要開始創建表單，請轉到Formidable → Forms ，並點擊新增。

接下來，從 Formidable 的眾多模板或空白表格中選擇一個，從頭開始。

然後，命名您的表單並單擊創建。

該插件會將您帶到其拖放表單生成器，您可以在其中開始創建表單。

您可以通過添加電子郵件、姓名和文本字段來自定義表單以滿足您的需要。

完成後，單擊“更新”以保存更改，前往“設置” → “操作和通知” ，然後單擊“Mailchimp” 。

Mailchimp 操作將出現在下方，您可以自定義 Mailchimp 設置。

設置好後，單擊“更新”以保存您的更改。現在，將 Mailchimp 訂閱者添加到您的電子郵件列表就像他們填寫您的表格一樣簡單。

現在，是時候自定義您的表單了。那麼，讓我們轉到“樣式”選項卡。

3.自定義設計

Formidable 的 Visual Form Styler 使任何人都可以輕鬆定制漂亮的表單。

無需編碼或使用 CSS Hooks。只需單擊並調整邊欄中的設置。

因此，您會在 Formidable 的樣式選項卡中看到一些選項。

您可以選擇 Formidable 的預製設計模板之一以節省時間或開始設計您自己的樣式。

要自定義一個，請單擊模板上的三個點，然後單擊編輯。

在 Formidable 的 Styler 中，您可以自定義表單以滿足您的需要。

更改字體大小、邊框半徑、顏色——您可以自定義任何您看到的內容。

您可以通過您的表單發揮創意，並使其在您的網站上獨一無二。

例如，這是我們為我們使用的測試網站創建的表單！

無論是初學者還是專家，Formidable 的 Styler 都能讓您輕鬆上手。

因此，請嘗試設置並製作您自己的表格。

只需確保在完成保存更改後單擊“更新” 。

現在，讓我們顯示該表單。

4. 展示你的表格

首先，前往您要添加 Mailchimp 表單的帖子或頁面。

接下來，添加一個新的 WordPress 塊，然後搜索Formidable Forms塊並添加它。

然後，從下拉菜單中選擇您的表單，您將看到您的表單。

最後，單擊“更新”以保存更改，您的表單就可以使用了！

我們告訴過您 Formidable 是 Mailchimp 簡單表單的最佳選擇！

只需幾個簡單的步驟，您就可以準備好自定義表單。

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

獲取您的 Mailchimp 表單樣式器！

您將如何在 WordPress 中設置 Mailchimp 表單的樣式？

在 WordPress 中自定義您的 Mailchimp 註冊表單是讓您的表單脫穎而出的最佳方式。

今天，您學習了兩種不同的方法來為 Mailchimp 定制嵌入式表單——使用代碼和使用 Formidable Forms。您選擇哪一個將取決於您對代碼的熟悉程度，儘管我們建議您使用 Formidable，即使您是一位經驗豐富的編碼員。

如果您仍然想知道為什麼 Formidable 是最佳選擇，請查看這篇文章，了解為什麼它是最好的 Mailchimp 註冊表單 WordPress 插件。

你不會失望的。

如果您已準備好開始，請前往我們的定價頁面並獲取我們出色的計劃之一。

最後，在 Facebook、Twitter 和 YouTube 上關注我們，了解更多很棒的 Mailchimp 提示和技巧！

閱讀有關 Mailchimp 和 Formidable 的更多信息！

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