CODEWITHSUNDEEP
csswordpress
J K
J K

Reputation: 505

Email field in Contact Form 7 looks different

I am working on the contact form on this page: http://www.thundermailer.com/contact-us/

Am using a plugin called Contact Form 7. The email field is different than the other fields, any idea how can I make it the same?

Thanks.

Upvotes: 1

Views: 2030

Answers (3)

cloudymouse
cloudymouse

Reputation: 1

There are two spots in your css where you reference form input[type="text"], without adding form input[type="email"].

After making these changes, it appears the same as your other input fields. You could simply change type='email' in your email input field to type='text'; though, you could just find those two sections (one in your main.css, and one in blue theme.css) where you set the border, background, padding and other settings.

Upvotes: 0

omma2289
omma2289

Reputation: 54639

The problem is that your theme's CSS is only targeting inputs of types text and password

You need to either add a selector for email inputs on your current CSS rules or add a new rule that sets all the required styles for email inputs

The relevant parts that you need to change are:

Line 571 of blue_theme.css:

form input[type="text"], form input[type="password"],form input[type="email"], form select, textarea {
    border-top: 1px solid #b2b2b2;
    border-left: 1px solid #b2b2b2;
    border-right: 1px solid #d6d6d6;
    border-bottom: 1px solid #d6d6d6;
    background: #f3f3f3 url(images/input_bg.png) repeat-x;
    color: #868686;
}

And Line 1654 of main.css

form input[type="text"], form input[type="password"], form input[type="email"], form select, textarea {
    font-size: 13px;
    margin: 0;
    padding: 8px 6px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    display: block;
}

Of course you can also change the type of your input to text but then you lose the added extras of using HTML5 like automatic validation and custom keyboard on mobile devices

Upvotes: 3

Leo T Abraham
Leo T Abraham

Reputation: 2437

On analysing the code, the input type of email field is given as "email", make it "text".

Upvotes: 0

Related Questions