联系人表单7拥有超过100万的活跃用户，是WordPress最流行的联系人表单插件之一。 他们最大的缺点是，你添加的盒子形式非常简单。 谢天谢地，联系表格7可以很容易地在您的WordPress主题中使用CSS风格。 在这篇文章中，我们将向您展示如何在WordPress中设计联系表格7的样式。
注意： 我们不推荐使用联系表单7插件。 相反，我们建议WPForms，这是最初学者友好的联系表单插件。 您还可以免费下载WPForms Lite。
我们有一个关于如何在WordPress中创建联系表格的一步一步的指南。
入门
我们假设你已经安装了联系表格7插件，并已经创建了你的第一个联系表格。 下一步是复制联系人表单的短代码，并将其粘贴到一个WordPress帖子或者希望显示表单的页面中。
为了这篇文章，我们使用了默认的联系表单，并将其添加到一个WordPress页面。 这就是联系表单在我们的测试网站上的样子。
正如你所看到的，联系表单继承了WordPress主题中的一些表单样式。 除此之外，这是非常基本的。
我们将使用CSS来联系表单7表单。 所有的CSS进入你的主题或儿童主题的样式表。
在WordPress中为联系表格7格式设计风格
联系表格7为这些表格生成非常有用且符合标准的代码。 表单中的每个元素都有一个与之相关的正确的ID和CSS类。
每个联系表单使用CSS类 .wpcf7 您可以使用它来设置窗体的样式。
在这个例子中，我们在输入字段中使用Google字体Lora。 了解如何在WordPress中添加Google字体。
div.wpcf7 {
background-color：#fbefde;
border：1px solid＃f28f27;
填充：20像素;
}
.wpcf7输入[type =“text”]，
.wpcf7输入[type =“email”]，
.wpcf7 textarea {
背景：＃725f4c;
颜色：#FFF;
font-family：lora，sans-serif;
字体样式：斜体;
}
.wpcf7输入[type =“submit”]，
.wpcf7输入[type =“button”] {
背景色：＃725f4c;
宽度：100％;
文本对齐：中心;
文本转换：大写;
}
这就是我们的联系表单在应用这个CSS之后的样子。
造型多个联系表格7表格
上面我们使用的CSS的问题是，它将应用于您网站上的所有联系表格7表单。 如果您使用多个联系表单，并且想要以不同的方式对其进行设置，则需要使用联系表单7为每个表单生成的ID。
只需打开包含要修改的表单的页面即可。 将鼠标移至表单中的第一个字段，右键单击并选择检查元素。 浏览器屏幕将被拆分，您将看到页面的源代码。 在源代码中，您需要找到表单代码的起始行。
正如您在上面的屏幕截图中看到的，我们的联系表单代码以行开头：
id属性是联系表单7为此特定表单生成的唯一标识符。 它是表单ID和添加此表单的帖子ID的组合。
我们将在我们的CSS中使用这个ID来设计我们的联系表单。 我们将用我们的第一个CSS代码替换.wpcf7 ＃wpcf7-F201-P203-O1 。
DIV＃wpcf7-F201-P203-O1 {
background-color：#fbefde;
border：1px solid＃f28f27;
填充：20像素;
}
＃wpcf7-f201-p203-o1 input [type =“text”]，
＃wpcf7-f201-p203-o1 input [type =“email”]，
＃wpcf7-f201-p203-o1 textarea {
背景：＃725f4c;
颜色：#FFF;
font-family：lora，“Open Sans”，sans-serif;
字体样式：斜体;
}
＃wpcf7-f201-p203-o1 input [type =“submit”]，
＃wpcf7-f201-p203-o1 input [type =“button”] {
背景色：＃725f4c;
宽度：100％;
文本对齐：中心;
文本转换：大写;
}
使用CSS英雄设计联系表单7表单样式
许多WordPress初学者没有任何编写CSS的经验，他们不想花时间学习它。 幸运的是，对于初学者来说，有一个很好的解决方案，可以让你不仅仅设计你的联系表单，而且几乎可以在你的WordPress站点的每一个方面。
只需安装并激活CSS Hero插件，然后转到包含表单的页面。 点击CSS Hero工具栏，然后点击你想要的样式。 CSS Hero将为您提供一个简单的用户界面来编辑CSS，而无需编写任何代码。
这就是我们希望这篇文章帮助你学习如何在WordPress中设计联系表格7的形式