Styling CF7

See Styling Contact Form for a general explanation of styling CF7 forms using CSS.

There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.

Great, thank you! I finally got it to work.

One problem, though – it styles everything except for the larger text area, “Message.” This is the page I’ve been working on, and the CSS I’m using is listed below. Can you tell me what to add to make it style the message section as well?

Thanks!

.wpcf7-form input,
#wpcf7-f235-p1277-o2 .wpcf7-form textarea{
background:#ffffff;
border:1px solid #989898;
border-radius:5px;
width:262px;
margin: 4px 0 8px 0;
padding: 5px 7px;
color: #000000;
font-size: 14px;
vertical-align: middle;
}
.wpcf7-form p {
color:#484848;
margin-top:3px;
font-size:15px;
}
.wpcf7-form .wpcf7-submit {
background:#787878;
border-radius:5px;
cursor:pointer;
width:100px;
margin:7px 0;
padding: 5px 15px;
color:#fff;
align: center;
}
.wpcf7-form .wpcf7-submit:hover{
background:#585858;
}

Additionally, is there a way to style a contact form to look like the one at the bottom of this page? I don’t like this contact form, and I would like to replace it if possible with a contact form styled so that the name and email boxes are on the same line, if that makes sense.

Thanks again for your help. I really appreciate it!

The following code is more specific than I would use:

.wpcf7-form input,
#wpcf7-f235-p1277-o2 .wpcf7-form textarea{
?

Instead I would just use:?

.wpcf7-form input,
.wpcf7-form textarea{

??
Do you have a reason for restricting your textarea CSS to that particular CF7 form?

At any rate using Use Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail should tell you what is going in.

RE: Additionally, is there a way to style a contact form to look like the one at the bottom of this https://www.mediaboxdesign.com/ page?

?
Yes and it’s probably pretty easy.

???You could use Firebug or Chrome Dev Tools to examine the HTML and CSS of the form you like in detail and then apply the skills you have learned regarding styling CF7 forms to implement that design.