WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] Email text field not displaying correctly even after HTML5 css update? (8 posts)

  1. flrgroup
    Member
    Posted 1 year ago #

    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%;
    }

    flrfloors.com/test/

    http://wordpress.org/extend/plugins/contact-form-7/

  2. peterash
    Member
    Posted 1 year ago #

    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.

  3. buzztone
    Member
    Posted 1 year ago #

    @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.

  4. peterash
    Member
    Posted 1 year ago #

    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.

  5. buzztone
    Member
    Posted 1 year ago #

    @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.

    http://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.

  6. flrgroup
    Member
    Posted 1 year ago #

    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.

  7. buzztone
    Member
    Posted 1 year ago #

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

  8. flrgroup
    Member
    Posted 1 year ago #

    Resolved thanks.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.