Contact Form 7 拥有超过一百万的活跃安装量，是迄今为止最受欢迎的 WordPress 插件之一。 它的流行可能与其描述背后的真相有很大关系：“简单但灵活。”
Contact Form 7 允许您使用简单的 HTML 标记（它为您生成）创建多个联系表单。 创建后，可以通过将相应的短代码放置在您希望表单出现的位置来快速部署每个表单； 在页面、帖子或小部件区域中。 通过表单提交的消息将发送到插件设置中提供的电子邮件地址，并且通过对 CAPTCHA 和 Akismet 的支持来打击垃圾邮件。
Contact Form 7 非常简单，似乎任何人都可以有效地使用它。 造型也是，旨在简单。 但也许对某些人来说太简单了。 默认情况下，Contact Form 7 插件不会为其表单设置样式。 他们拥有的任何样式都是 WordPress 主题样式表中存在的默认样式的结果。
通常会产生一些非常基本的东西，例如：
不幸的是，这种形式虽然确实简单灵活，但可能不如网站上的其他元素设计精美。 让许多原本很高兴的用户寻找具有更多样式选项的 Contact Form 7 替代品。 不过值得庆幸的是，只需一点 CSS，就不需要插件替代品。
在今天的帖子中，我将分享一系列技巧，这些技巧将为使用任何主题的任何人打开各种各样的 Contact Form 7 样式可能性。
如何自定义联系表 7 的样式以匹配您的网站
订阅我们的 Youtube 频道
在哪里编辑您的联系表 7 CSS（以及为什么）
重要的是，在添加自定义 CSS 时，不要将其添加到 Contact Form 7 或父主题的样式表中。 一旦主题和/或插件更新，您在那里所做的任何更改或添加都将被覆盖。
相反，您需要将下面的 CSS 添加到您的子主题的 CSS 中。 您还可以使用 Jetpack 上的自定义 CSS 功能，或者如果您的主题在其管理面板中为自定义 CSS 提供了一个部分，您也可以使用它。
好的，现在我们知道在哪里放置我们将在下面讨论的样式，让我们开始吧！
如何创建站点范围的表单样式
让我们首先进行一些适用于整个表单的一般性编辑。 我们可以通过使用类选择器来做到这一点 .wpcf7 然后在它下面添加样式。
（我还强烈建议您将我在下面写的注释掉的标题放在您的样式表中，以表示您的 Contact Form 7 样式开始的位置。）
/* Contact Form 7 Styles
---------------------------------*/
.wpcf7 {
background-color: #F0F0F0;
border: 5px solid #666666;
}
将上述代码添加到样式表后，您使用 Contact Form 7 创建的每个表单都将具有您刚刚定义的背景和边框样式。 下面是一个例子。
如您所见，存在一些间距问题。 要解决此问题，您需要调整边框和内部表单元素之间的边距。 您可以使用下面的代码执行此操作。
.wpcf7-form {
margin-left: 25px;
margin-right: 25px;
margin-top: 25px;
在我的测试站点上，这导致了以下结果：
注意：由于我们很可能使用不同的主题，因此这些样式可能会以稍微不同的方式影响您的表单。 这并不意味着此代码对您不起作用，只是您可能需要稍微调整数字以使内容适合您的站点。
如何创建站点范围的表单字段样式
人们在设计 Contact Form 7 样式时最常见的要求之一是如何调整字段的宽度。 特别是没有延伸很远的消息区域。
下面的代码会将消息区域扩展到您想要的宽度（调整时）。 我在示例中设置了 95%，因为这在我想象的用例中看起来最好。 您也可以设置它以满足您的需求——使用百分比或固定像素数。
.wpcf7-textarea {
width: 85%;
}
您也可以通过调整 输入 类选择器。
.wpcf7 input {
width: 50%;
}
如果您不想使用相同的标准调整所有输入字段，您可以通过只选择您感兴趣的那些来深入了解。在下面的示例中，我选择只更改我的文本字段，以便我的提交按钮也不受影响。
.wpcf7-text {
width: 50%;
}
在完成上述所有更改后，我能够为您在下面看到的表单设置样式。
我个人不想改变我的按钮颜色，但我认为这很可能是另一个共同的愿望。 因此，如果您想更改按钮颜色，可以使用下面的 CSS 进行实验。
.wpcf7-submit {
background: #555555;
color: #ffffff;
}
有了这些 CSS 位，使用 Contact Form 7 创建的每个表单都将看起来像上面的最终图像。 但是，当您特别希望一种形式看起来与其他所有形式不同时会发生什么？
如何设置特定表单的样式
获取对特定表单进行样式编辑所需的特定 CSS ID 可能有点麻烦，但可以稍作修改。
您要做的第一件事实际上是将表单短代码添加到您的站点中并进行预览。 （您会注意到，在该短代码中有一个 ID 编号——但这实际上并不是您需要的完整 ID。）
然后，使用 Google Chrome 的检查元素功能或其他浏览器中的类似功能，查看表单的代码。 使用它，您将找到完整的表单 ID。
就我而言，我的简码中的 ID 号是 4407. 完整的身份证原来是 wpcf7-f4407-p4405-o1. 这意味着我可以通过使用下面的代码以及与我的站点范围设置不同的各种标准来进一步编辑该特定表单。
#wpcf7-f4407-p4405-o1 {
background-color: #333333;
border: 5px solid #0074A2;
}
如何设置特定字段的样式
您可以对特定字段执行相同的操作。 无需在浏览器中跟踪特定的 CSS 类或 ID，您只需将其添加到表单构建器中即可。
当您生成要放置在表单构建器中的标签时，您会注意到有两个选项可用于创建 ID、类或两者。
在这个例子中，我选择创建一个名为 自定义字段. 如果您执行相同的操作（或类似的操作），那么您将能够使用您的新 id（或类）设置该字段的样式，如下所示。
#customized-field {
color: #ffffff;
border: 2px solid #333333;
}
如何为复选框和径向按钮创建自定义表单布局
默认情况下，复选框和半径从左到右显示。
但由于个人偏好或特定用例可能更可取自上而下显示它们，您可以使用以下两个选项之一。
要从上到下和左侧显示您的复选框或单选按钮，请使用此选项。
.wpcf7-list-item {
display: block;
}
要从上到下和右侧显示您的复选框和单选按钮，请使用它。 还要确保在为此选项生成标签时选择“标签优先”复选框。
.wpcf7-list-item {
display: table-row;
}
.wpcf7-list-item * {
display: table-cell;
}
额外提示：如何删除字段标题并改用占位符文本
这个技巧不需要像上面其他的那样使用 CSS，而是对 Contact Form 7 表单构建器中使用的标记进行简单的调整。
有时不需要有字段标题，尤其是当您可以将占位符文本放在字段本身中以解释哪些信息属于那里时。
如果您的网站是这种情况，那么您所要做的就是删除表单构建器中的标题并添加占位符文本，就像我在下面的示例中所做的那样。
<p></p> <p>[email* your-email placeholder "Email Address"]</p> <p></p> <p>[textarea your-message placeholder "Talk to me"]</p>
结果是一个更干净的表格，更少的混乱。
综上所述
我希望我已经在上面的示例中展示了 Contact Form 7 插件是高度可定制的。 的确，它确实需要一些修补，但对于可能预期的免费插件。
我认为默认情况下缺少样式选项是该插件对很多人如此有效的重要原因。 因此，任何想要更多风格的人都可以从中获得很多价值，并花几分钟时间提交上述代码示例之一的版本，这才是公平的。
您有自己的 Contact Form 7 样式提示吗？ 您想分享您使用过的任何收藏夹吗？ 在下面的评论中给我们留言！
文章缩略图来自 Dmitry Lemon5ky // shutterstock.com
