如何在自定义页面中更改cf7的样式？

Question

我尝试使用CF7将联系表格插入自定义模板，如下所示

 <?php echo do_shortcode('[contact-form-7 id="107" title="enquiry"]')  ?>

它会正常工作。然后我尝试为该表单提供自定义样式。在我的style.css中，我添加了以下几行：

.wpcf7 form {
background-color: #46fb44 !important;
border: 1px solid #f28f27;
padding:20px;
 }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, sans-serif;
font-style:italic;
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

但没有任何影响。还有其他办法吗？

Answer 1

这是css尝试将它放入主题编辑器style.css

form.wpcf7-form {
background-color: #46fb44 !important;
border: 1px solid #f28f27;
padding:20px;
 }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, sans-serif;
font-style:italic;
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
color: #fff;
}
textarea.wpcf7-form-control.wpcf7-textarea {
    width: 807px;
}
input.wpcf7-form-control.wpcf7-text {
    width: 807px;
}

，输出为：    

在我的localhost上正常工作尝试以px而不是％

给出宽度

由于

Answer 2

您可以尝试使用此示例How to Style Contact Forms in WordPress

添加联系表单7的自定义css代码