Support » Plugin: Contact Form 7 » Email text field not displaying correctly even after HTML5 css update?

  • Resolved flrgroup


    Hi Guys,

    I’ve had a problem with the email text field not displaying correctly as the other fields. I’ve been through the support docs and faqs, and have added the following css to my theme ‘smasher’. However even after adding this code my email text field is still square in shape and the wrong colour background, any ideas as to what I should do now

    .wpcf7 input[type=”text”],
    .wpcf7 input[type=”email”],
    .wpcf7 textarea
    background-color: #fff;
    color: #000;
    width: 100%;

Viewing 7 replies - 1 through 7 (of 7 total)
  • 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.


    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.

    @peterashRE: 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. 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;


    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.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Email text field not displaying correctly even after HTML5 css update?’ is closed to new replies.