如何美化Contact Form 7表单（包含css代码）
如何设置联系表单的样式？Contact Form 7 不提供任何样式自定义。编辑 CSS 样式表是设置联系表单样式的最佳方法。在本文中，我将向您展示设置联系表单样式的一些重要步骤。
设置联系表单字段的样式
让我们看看如何为联系表单中的各个字段设置样式。输入字段有几种类型。最常见的字段是单行文本输入字段，因此让我们为其添加样式规则：
input[type=”text”]
{
background-color: #fff;
color: #000;
width: 50%;
}
此选择器匹配所有属性具有精确值input的元素（即单行文本输入字段）。此外，此样式规则具有三个属性，指定白色为背景颜色、黑色为前景（文本）颜色以及 50% 为字段宽度。typetext
您可能希望将此样式规则应用于其他类型的字段。让我们为电子邮件地址输入字段和多行文本输入区域添加选择器：
input[type=”text”],
input[type=”email”],
textarea
{
background-color: #fff;
color: #000;
width: 50%;
}
现在，此样式已应用于您网站的每个部分。您可能希望将其限制在联系表单上。Contact Form 7 的表单有一个带有类的包装器元素wpcf7。您可以通过添加祖先选择器来限制目标的范围：
.wpcf7 input[type=”text”],
.wpcf7 input[type=”email”],
.wpcf7 textarea
{
background-color: #fff;
color: #000;
width: 50%;
}
您可能只想设置特定字段的样式。首先，在要设置样式的字段的表单标签中添加id或选项：class
[文本 text-123 id:非常特殊字段]
然后使用 id 或 class 添加样式规则：
#very-special-field
{
color: #f00;
border: 1px solid #f00;
}
为整个联系表单设置样式联系表单整体样式
正如我之前提到的，联系表单的顶级元素具有wpcf7类。要设置整个联系表单的样式，请为类选择器添加样式规则：
.wpcf7
{
background-color: #f7f7f7;
border: 2px solid #0f0;
}
此样式规则为您的联系表单提供了浅灰色背景和绿色边框。
响应消息样式响应消息样式
联系表单底部的响应消息默认具有该类wpcf7-response-output，因此您可以将样式规则应用于此类来设置响应消息的样式。
要根据联系表单的状态决定样式，请参阅form元素的class属性。它应该有一个反映当前状态的类。可能的值包括：init、sent、failed、aborted、spam、invalid或unaccepted。
有关样式的示例，请参阅 Contact Form 7 5.2.2 应用于响应消息的以下默认样式规则：
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; /* Blue */
}
.wpcf7 form.init .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; /* Green */
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; /* Red */
}
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; /* Orange */
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
border-color: #ffb900; /* Yellow */
}
样式验证错误消息样式验证错误消息
当字段包含无效值时，字段下方会显示验证错误消息。由于验证错误消息的元素具有类wpcf7-not-valid-tip，因此您可以使用该类来设置验证错误消息的样式。
Contact Form 7 5.2.2 默认应用以下样式规则：
.wpcf7-not-valid-tip {
color: #dc3232;
font-size: 1em;
font-weight: normal;
display: block;
}