如何自定义联系表格的样式 7 以匹配您的网站
已发表: 2018-10-10Contact Form 7 的活跃安装量超过一百万，是迄今为止最受欢迎的 WordPress 插件之一。 它的流行可能与其描述背后的真相有很大关系：“简单但灵活。”
Contact Form 7 允许您使用简单的 HTML 标记（它为您生成）创建多个联系表单。 创建后，每个表单都可以通过在您希望表单出现的位置放置其相应的短代码来快速部署； 在页面、帖子或小部件区域。 通过表单提交的消息将发送到插件设置中提供的电子邮件地址，并通过对 CAPTCHA 和 Akismet 的支持来打击垃圾邮件。
Contact Form 7 非常简单，似乎任何人都可以有效地使用它。 造型也很简单。 但也许对某些人来说太简单了。 默认情况下，Contact Form 7 插件不会设置其表单的样式。 他们拥有的任何样式都是 WordPress 主题样式表中存在的默认样式的结果。
通常会导致一些非常基本的东西，如下所示：
不幸的是，这种形式虽然确实简单灵活，但可能不如网站上的其他元素设计得那么精美。 让许多其他快乐的用户寻找具有更多样式选项的联系表 7 的替代方案。 值得庆幸的是，只需要一点 CSS，就不需要替代插件。
在今天的帖子中，我将分享一系列技巧，这些技巧将为使用任何主题的任何人打开各种联系表格 7 样式的可能性。
如何自定义联系表格的样式 7 以匹配您的网站
订阅我们的 YouTube 频道
在哪里编辑您的联系表格 7 CSS（以及为什么）
重要的是，在添加自定义 CSS 时，不要将其添加到 Contact Form 7 或父主题的样式表中。 一旦主题和/或插件更新，您在那里所做的任何更改或添加都将被覆盖。
相反，您需要将下面的 CSS 添加到您的子主题的 CSS 中。 您还可以在 Jetpack 上使用自定义 CSS 功能，或者如果您的主题在其管理面板中为自定义 CSS 提供了一个部分，您也可以使用它。
好的，现在我们知道在哪里放置我们将要讨论的样式，让我们开始吧！
如何创建站点范围的表单样式
让我们首先进行一些将应用于整个表单的常规编辑。 我们可以通过使用类选择器.wpcf7然后在它下面添加样式来做到这一点。
（我还强烈建议您将我在下面写的注释掉的标题放在您的样式表中，以指示您的联系表格 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 。 完整的 ID 原来是wpcf7-f4407-p4405-o1 。 这意味着我可以通过使用下面的代码以及与我的站点范围设置不同的各种标准，对特定表单进行进一步编辑。
#wpcf7-f4407-p4405-o1 {
background-color: #333333;
border: 5px solid #0074A2;
}
如何设置特定字段的样式
您可以对特定字段执行相同的操作。 无需在浏览器中跟踪特定的 CSS 类或 ID，您只需将其添加到表单构建器中即可。
当您生成要放置在表单构建器中的标签时，您会注意到有两个选项可用于创建 ID、类或两者。
在这个例子中，我选择创建一个名为custom-field的类。 如果您执行相同（或类似的操作），您将能够使用您的新 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 插件是高度可定制的。 确实，它确实需要一些修补，但对于可能预期的免费插件。
我认为默认情况下缺少样式选项是该插件对这么多人如此有效的重要原因。 因此，如果任何想要获得更多风格的人从中获得很多价值，就可以花几分钟时间投入上述代码示例之一的版本，这是公平的。
您是否有自己的联系表格 7 风格提示？ 你用过的任何收藏夹想要分享吗？ 在下面的评论中给我们留言！
文章缩略图来自 Dmitry Lemon5ky // shutterstock.com