WordPress.org

Forums

Contact Form 7
Email field not styled like other form fields (18 posts)

  1. SerenadeWebDesign
    Member
    Posted 2 years ago #

    Just recently the email field on my contact form has changed styling, i have changed nothing in the contact form settings. What is the problem?

    http://www.lastkeyrealty.com/contact-us/

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

  2. akaalvin
    Member
    Posted 2 years ago #

    Having the same issue here. The email field is not properly aligned anymore.

  3. trektheandes@gmail.com
    Member
    Posted 2 years ago #

    Try this, go into the contact form in the dashboard of wordpress. Go into the Form section then where this is,

    <p>Your Email (required)
    [email* your-email] </p>

    change it to
    <p>Your Email (required)
    [text* your-email] </p>

    ie you just change the email* to text*

    Worked for me after spending two weeks trying lots of other more complicated methods that had worked for others

  4. swearingdad
    Member
    Posted 2 years ago #

    I am having the same issue - the email field is now styled differently for some reason.

    As a work around, changing the code as suggested above works to a degree, but Contact Form 7 checks the field marked [email] to see if it is a correctly formatted email address.

    If you use a workaround, then the text entered can be 'anything' making it easier for spammers to send you rubbish on the form. So ideally this still needs a 'proper' fix.

  5. Arro
    Member
    Posted 2 years ago #

    Any progress on a 'proper' fix yet?

  6. Arro
    Member
    Posted 2 years ago #

    Sorry, double post redacted.

  7. breeze76
    Member
    Posted 2 years ago #

    See my post here and look at my code, my email field gets coded fine:

    Here

  8. Arro
    Member
    Posted 2 years ago #

    I am very basic on this stuff. Your code looks great but I am still intimidated by so much CSS code. Sorry for that and long for the day when I advance to your level. I only use the form wizard but am having issues there because the 'generate tag' tab and the code to copy for the shortcode are missing so the author of Contact 7 is asking me to reinstall but I cannot find Contact 7 after searching through two pages of new plugins. I changed the 'email"' code to 'text*' code but as posted above that does not verify email format. Thank you so much and if you have any more input, I am all ears, figuratively speaking.

  9. breeze76
    Member
    Posted 2 years ago #

    Arro, You are no different than me.. This is all Greek to me, I just look around, search the internet and ask questions and maybe someone will throw me a bone.. I am still having trouble with the code I posted and can not figure it out either, that is why I ask questions. I was always told, the only stupid question is an unasked question... Hope I help some..

  10. breeze76
    Member
    Posted 2 years ago #

    Arro, if you would like to see what the coding posted makes your form look like, go HERE

  11. Arro
    Member
    Posted 2 years ago #

    Thanks, Breeze, for the help. The coding looks nice. They told me my Weaver was old and to update so I did and now a nearly perfect site is in shambles and I am back to square one. Whew. Why would they change perfectly good themes and then when you update have no compatibility within the same theme family? Apparently, they took back some of the features and control from the earlier version and are hawking a paid version which their right. Just seems that fundamental ethics would suggest that it might be an impropriety to let people walk off a cliff and then offer them a health plan. Then again, I am new at this and hope I learn to protect myself from such goings on.

  12. swearingdad
    Member
    Posted 2 years ago #

    Does anyone know if this CSS styling bug (for I assume it is that) has been fixed yet?

  13. breeze76
    Member
    Posted 2 years ago #

    swearingdad,
    here is the code I use and it works fine for me..:

    .wpcf7 input[type="text"], .wpcf7 input[type="password"], .wpcf7 input[type="email"]{
    	margin-bottom: 10px;
    	border:1px solid #5b5b5b;
        height: 19px;
        padding:2px 5px;
        border-radius:5px;
        font-size:12px;
    	max-width: 200px;
    }
  14. swearingdad
    Member
    Posted 2 years ago #

    Thanks! And did you add that to a child theme CSS or did you edit the Plugin's CSS directly?

  15. breeze76
    Member
    Posted 2 years ago #

    I added it into the style sheet located in my themes main directory. Style.css

  16. swearingdad
    Member
    Posted 2 years ago #

    Thanks for letting me know!

  17. helpfulwebhosting
    Member
    Posted 2 years ago #

    We noticed this happening on a couple of customer sites as well. I think that a recent Contact Form 7 update changed the input type of the email box from input[type="text"] to input[type="email"] but some theme developers haven't updated their style sheets with it.

    You just have to add .wpcf7 input[type="email"] to the styling for it to work as breeze76 has done.

    It's a good thing that this has changed because tablet and phone keyboards change to suit the input type. With type="email" the '@' is made easier to find on the keyboard.

    Now, having typed this, I realise I must go and fix my own personal site...

  18. swearingdad
    Member
    Posted 2 years ago #

    This was happening on several sites. So I copied the original CSS for each theme for the "input" and "focus" for example:

    input[type=text] {
    	background: #eee;
    	border: solid 1px #ccc;
    	padding: 6px 10px;
    	border-radius: 5px;
    	-webkit-appearance: none;
    }
    
    input[type=text]:focus {
    	outline: none;
    	background: #fff;
    }

    Pasted it into a child theme CSS file (or the theme's custom CSS field in the Admin area) and changed "text" to "email" eg:

    input[type=email] {
    	background: #eee;
    	border: solid 1px #ccc;
    	padding: 6px 10px;
    	border-radius: 5px;
    	-webkit-appearance: none;
    	max-width: 240px;
    }
    
    input[type=email]:focus {
    	outline: none;
    	background: #fff;
    }

    I also found I had to add a max-width attribute.

    Thanks to everyone who has helped with this - really appreciate pointing me in the right direction.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic