Email text field not displaying correctly even after HTML5 css update?

I have the same problem on all my WP sites using Contact Form 7 after this last update. Just the email field is unstyled now.

@flrgroup

Use Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail. Once you understand how the HTML and CSS is configured in your CF7 form, you should be able to see the CSS changes you need to change the appearance of the form to suit your requirements.

You currently appear to be making your CSS changes directly in the parent theme style.css. Your changes look to be being overwritten by more specific CSS in the parent theme, in particular see .simple-form input[type=”text”]

The most common and preferred method is to create a Child Theme and make any necessary additions to the CSS in the child themes style.css only, rather than directly in the themes styles.css. That way you don’t loose your changes when you update the theme.

I have to think something else changed. This happened in all of my WP sites when I updated the plugin; just on the email field.

@peterash – RE: Just the email field is unstyled now

CF7 now uses the new HTML5 input[type=”email”] for the email tag. When you updated the CF7 plugin your email fields may have changed from input[type=”text”] to input[type=”email”].

The CSS in your current WordPress theme probably does not cater for this new HTML5 email input field.

https://contactform7.com/faq/#Why_does_my_email_address_input_field_look_different gives some guidance on how make these fields look the same in your current WordPress theme.

Use Firebug or Chrome Dev Tools to understand the CSS used for your CF7 form elements.

Thanks guys, this code below fixed it;

input[type=”text”],
input[type=”email”]

{
background: #232323; padding: 8px 12px; font-size: 12px; border: none; width: 180px; color: #515151;
box-shadow: inset 1px 1px 3px #191919;
border-radius: 5px;
}

Thanks again.

If this resolves your question, it helps others contributing here, if you can flag your post as [resolved]

Resolved thanks.