如何更改 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 表单构建器插件之一？ 如果您还没有使用它，请开始使用我们的免费插件或功能齐全的专业版！