Contact Form 7 - CSS 文本和字段宽度的技巧？

Question

我在我的 Wordpress 网站上制作了联系表格 7：http://ppcdigitalblack.com/contact/

我希望它包括：全名*、电子邮件地址*、消息*和预算下拉列表（不需要）

我想在居中的字段框中显示全名和电子邮件地址，每个框都占 space 的一半。我还希望字体是 Lato 和蓝色...出于某种原因 "your full name" 是灰色的！！

我尝试了此博客 post 中的所有技巧，但没有成功： https://deliciousthemes.com/contact-form-7-fields-columns/

所以我想知道这两件事是否有 CSS 技巧，或者你们是否有一个可信赖的插件来格式化 Contact Form 7，它与 Uncode 配合得很好。

这是我用于联系表格的代码，试图操纵字体：

.contactform {
text-align: center;
font-family: 'Lato';
color: #777777;
}

这是我的表单宽度代码，它实际上给了我一个更喜欢的表单宽度。我只是想至少将表单字段居中，但理想情况下将电子邮件和姓名放在同一行！

.wpcf7-form {
max-width: 800px;
margin: 0 auto;
}

感谢任何想法或建议！

Answer 1

我想这会对你有所帮助。

(出于某种原因 "your full name" 是灰色的!!) - 这是因为其他标签在 <p> 内被强奸而这个标签不是，如果你可以用苹果做同样的事情然后就可以了。或者你可以只使用这种风格。

form .contactform>label{
 color: #007ec7;
}

要使用 font-family: 'Lato';，您最好执行以下操作 -

如果您还没有，请在 <head> 中添加一个字体系列 URL -

<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>

您可以按以下方式申请-

   form .contactform {
     text-align: center;
     color: #777777;
     font-family: 'Lato', sans-serif;
     font-weight: 400;
    }

要使 <input> 居中对齐，您可以使用 -

form .contactform input[type="text"],form .contactform input[type="email"]{
         margin: 9px auto 0 !important;
    }

希望这对您有所帮助。如果还有什么可以随时问。 :)

Contact Form 7 - CSS Tricks for Text & Field Width?