CODEWITHSUNDEEP
csswordpresscontact-form-7
Emigriff
Emigriff

Reputation: 197

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

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!

Upvotes: 3

Views: 2123

Answers (1)

Jithin Raj P R
Jithin Raj P R

Reputation: 6797

I think this will help you.

(For some reason "your full name" is grey!!) - This is because other labels are raped inside <p> 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 <head>if you don't have yet -

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

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 <input> 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. :)

Upvotes: 1

Related Questions