Search code examples
csswordpresscontact-form-7

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!


Solution

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