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

Question

I made a Contact Form 7 on my Wordpress website: http://ppcdigitalblack.com/contact/

I want it to include: full name*, email address*, message*, and budget dropdown list (not required)

I want full name and email address in centered field boxes that each take up half the space. I also want the font to be Lato and blue... For some reason "your full name" is gray!!

I tried all the tricks from this blog post but no luck: https://deliciousthemes.com/contact-form-7-fields-columns/

So I'm wondering if there's a CSS trick for these two things, or if you guys have a trusted plug-in to format Contact Form 7 that works well with Uncode.

This is the code I have for the contact form, attempting to manipulate the font:

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

This is the code I have for the width of the form, which actually gave me a more prefered form width. I'd just love to center the form fields at least, but ideally get Email and Name on the same line!

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

Appreciate any thoughts or advice!

user_7629714 · Answer

I think this will help you.

(For some reason "your full name" is grey!!) - This is because other labels are raped inside

and this label is not if you can apple the same to this then its ok. or you can just use this style.

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

For using font-family: 'Lato'; you better do the following -

Attach a font family URL in the if you don't have yet -

and you can apply as following below -

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

For centre align the you can use -

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

Hope this was helpful. IF there is anything else feel free to ask. :)

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

1 Answers