如何在 WordPress 中设置 Mailchimp 表单的样式 [2 种方法！]

想要在 WordPress 中设置 Mailchimp 表单的样式？ 本指南将向您展示设计 Mailchimp 注册表单的样式非常简单！ 这是如何做的。

大约阅读时间：5.5 分钟

厌倦了试图找到一种简单的方法来在 WordPress 中设置 Mailchimp 表单的样式？

我们明白。 您搜索并搜索但没有找到很多选项。 尤其是那些不希望您知道如何编码的人。

这令人沮丧。

但它不一定是。 事实上，设计 Mailchimp 表单的样式可能很有趣。

因此，这篇文章将向您展示两种设置 Mailchimp 嵌入表单样式的方法：使用 Mailchimp 和 Formidable Forms。

让我们开始吧。

如何在 WordPress 中设置 Mailchimp 表单的样式

Mailchimp 的表格看起来不错，但有点基础。

自定义它们以匹配您的网站是使它们脱颖而出的绝佳方式。

因此，可以通过三种方式在 WordPress 中设置 Mailchimp 表单的样式：

1. 使用 Mailchimp 样式
2. 使用表单生成器

由于两者都有效，我们将向您展示如何分别进行。

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 表单样式器！

只需几个步骤即可完成：

1. 连接 Mailchimp 和 Formidable
2. 创建您的表单
3. 定制设计
4. 显示您的表格

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 的更多信息！

• 如何将 Mailchimp 弹出窗口添加到 WordPress [两种简单的方法！]
  阅读更多

  如何在 WordPress 中制作 Mailchimp 弹出窗口（简易指南）
  阅读更多

  您现在需要这个 Mailchimp 注册表单 WordPress 插件
  阅读更多

您是否知道 Formidable Forms 是当今可用的最快的 WordPress 表单构建器插件之一？ 如果您还没有使用它，请开始使用我们的免费插件或功能齐全的专业版！