WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] [closed] Contact Form Email Field Looks Different Than Other Fields (34 posts)

  1. AndreaK22
    Member
    Posted 1 year ago #

    Hi,

    Not sure when exactly this happened as I have not checked the Contact page in a while, but the field where the visitor would enter their email address is a skinny narrow one with sharp corners, as opposed to the rest of the fields which have nice rounded corners.

    I tried to create a new email field, but still no rounded corners.

    Can anyone suggest what to do?

    Thanks,
    Andrea

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

  2. sax_man_al
    Member
    Posted 1 year ago #

    Hi,

    I have the same issue, it happened when I updated the plugin today, in addition when you click send the arrows spin and the mail sends, but there is no confirmation.

    http://www.greendragonbus.co.uk/clydaucarclub/?page_id=76

    Thanks,
    Alastair

  3. AndreaK22
    Member
    Posted 1 year ago #

    Hi,

    I sent out a test email to via the form and did get a confirmation that it was sent. But still would love to change the look of the email field...

    Regards,
    A.

  4. barkeyo
    Member
    Posted 1 year ago #

    Hi,

    Having the same problem here. Both the Tel No. and Email fields have changed style since the upgrade to 3.4 today. Previously the Phone Number field was a Text field, but in 3.4 it uses the the form Tag "Tel" and both that and the Email field gets validated. If I change the field tag for a phone number input back to text, I recover the form's css styling for that field, but we lose any validation. I happy with that for the phone number, but not with email. So for the moment I'm stuck with an email field which visually doesn't fit with the rest of the form.

    Any help would be appreciated.

    Thanks,

    Owen

  5. John Seven
    Member
    Posted 1 year ago #

  6. biswajeet
    Member
    Posted 1 year ago #

    @sax_man_al send mail fail due to captcha error. You need to fix it...

    @John Seven If you are referring about the email field looks different because of there is no style defined for input[type="email"]. You need to add it to your theme css so that it will look uniform with rest of the fields style.

  7. John Seven
    Member
    Posted 1 year ago #

    Thanks sax_man_al,

    Got it fixed. This only recently appeared after the latest update.

    Best,

    John

  8. sax_man_al
    Member
    Posted 1 year ago #

    Hi, and thanks for the assistance, I had a look in the style.css file, found the section for input settings, and then just added the line: input[type="email"], with the text and password input fields, the field now looks right, so just need to fix the captcha error.

    Thanks again, Al

  9. John Seven
    Member
    Posted 1 year ago #

    Thanks biswajeet, and thanks all.

    Got it fixed. This only recently appeared after the latest update.

    Best,

    John

  10. barkeyo
    Member
    Posted 1 year ago #

    Thanks for the pointer biswajeet. Fixed mine too, but I'm not sure in the most efficient way. My new style.css edit looks like this -

    .inner_main input[type=text]{width:95%;height:16px;padding:6px 10px 6px;margin:1px 0 10px;background-color:#f1f1f2;border:1px solid #fff;border-radius:4px;box-shadow:inset 0 1px 3px #ccc;color:#b6b6b6;text-shadow:1px 1px #fff;outline:0}
    .inner_main input[type="email"]{width:95%;height:16px;padding:6px 10px 6px;margin:1px 0 10px;background-color:#f1f1f2;border:1px solid #fff;border-radius:4px;box-shadow:inset 0 1px 3px #ccc;color:#b6b6b6;text-shadow:1px 1px #fff;outline:0}

    I've effectively repeated the entire style entry of the text input field, for a whole new entry addressing the "email" input field. Is it possible to actually merge the two, so I have both fields being handled by the one style line?

    Thanks,

    Owen

  11. susangkd
    Member
    Posted 1 year ago #

    Is this the correct css to use to get those rounded corners/soft gray etc.

    .entry input[type=email] {
    background: none repeat scroll 0 0 #F9F9F9 !important;
    border: 4px solid #E4E4E4;
    box-shadow: none;
    color: #333333;
    font: inherit;
    padding: 12px 17px;
    width: 80% !important;
    }

  12. AndreaK22
    Member
    Posted 1 year ago #

    @ susangkd

    Hi,
    I inserted all this into our Custom CSS and the forms shows the way we need:

    input[type="text"], textarea, input[type="email"]{
    	background-color: #ffffff;
    	padding: 10px;
    	font-family: Arimo;
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    	color: #6a6a6a;
    	border: 1px solid #ddd;
    	background:	#ffffff url(images/field_bkg.png) repeat-x;
    }
    
    input[type="text"]:focus {outline: none; background-color: #f7f7f7;}
    textarea:focus {outline: none; background-color: #f7f7f7;}
    input[type="email"]:focus {outline: none; background-color: #f7f7f7;}
    
    textarea { width: 80%; font-size: 13px;}
    input[type="text"] {width: 40%; font-size: 13px;}
    input[type="email"] {width: 40%; font-size: 13px;}

    I am not a programmer, maybe some of the code above is redundant and someone else might have a suggestion how to simplify it. :)

    In any case - guys, thanks for the tip how to solve this, it worked for me!

    Regards,
    A.

  13. CossTas
    Member
    Posted 1 year ago #

    Hi,

    After the update the watermark text (name, phone, email, message etc.) does not clear on focus nor you can select the text to delete.

    It gets deleted only when you start typing.

    Is this the way it should be? Before the update was fine.

    Cheers

  14. tkaminja
    Member
    Posted 1 year ago #

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. Not blockquote. ]

    input[type="text"], textarea, input[type="email"]{
    	background-color: #ffffff;
    	padding: 10px;
    	font-family: Arimo;
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    	color: #6a6a6a;
    	border: 1px solid #ddd;
    	background:	#ffffff url(images/field_bkg.png) repeat-x;
    }
    
    input[type="text"]:focus {outline: none; background-color: #f7f7f7;}
    textarea:focus {outline: none; background-color: #f7f7f7;}
    input[type="email"]:focus {outline: none; background-color: #f7f7f7;}
    
    textarea { width: 80%; font-size: 13px;}
    input[type="text"] {width: 40%; font-size: 13px;}
    input[type="email"] {width: 40%; font-size: 13px;}

    this did not work for me. I inserted this to my main css on wordpress

  15. biswajeet
    Member
    Posted 1 year ago #

    @tkaminja post your site url to let us see...

  16. tkaminja
    Member
    Posted 1 year ago #

    http://www.werufamily.com/Makaazi/?page_id=59

    the email field looks different
    Thanks for the reply and help

  17. biswajeet
    Member
    Posted 1 year ago #

    @tkaminja you need to fix a couple of style rules in your theme css. Here you go -

    .wpcf7-form input[type="text"], input[type="email"], .wpcf7-form input[type="password"] {
        max-width: 420px;
    }
    
    .wpcf7-form input[type="text"], input[type="email"], .wpcf7-form input[type="password"], .wpcf7-form textarea {
        -moz-box-sizing: border-box;
        width: 100%;
    }
    
    input[type="text"], input[type="email"], input[type="password"], textarea {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) inset;
        padding: 6px;
    }
    
    input[type="text"], input[type="email"], input[type="password"], textarea, select {
        background: none repeat scroll 0 0 #F9F9F9;
        border: 1px solid #AAAAAA;
        border-radius: 4px 4px 4px 4px;
        color: #555555;
        font-family: Arial,sans-serif;
        font-size: 12px;
    }

    enjoy :)

  18. tkaminja
    Member
    Posted 1 year ago #

    thanks @biswajeet . I will give you feedback on this.

  19. tkaminja
    Member
    Posted 1 year ago #

    Hey @biswajeet it worked.

    So i did 2 things for this to work.
    I think it will be good for people who aren't good at coding.
    first i added a plugin called My custom css.
    secondly i added the code above from @biswajeet to the custom css created by the plugin and it worked . thanks

  20. trektheandes@gmail.com
    Member
    Posted 1 year ago #

    Sorry, I see plenty of answers and have tried some of the things suggested but have not managed to change my email field back so that it matches the rest of the form, after the update.

    I need it to be the same width as the other fields, and I want the ability to colour it again, which I can still do for all the other fields, through the theme settingss
    http://escapedtoperu.com/

    Many thanks in advance

  21. AndreaK22
    Member
    Posted 1 year ago #

    Hi,
    Please take a look at the code in my last post up in this thread. The percentage dictates the width of the fields.

    textarea { width: 80%; font-size: 13px;}
    input[type="text"] {width: 40%; font-size: 13px;}
    input[type="email"] {width: 40%; font-size: 13px;}

    So, if I wanted my email input field to be the same width as the rest of the fields, the 40% would need to change to 80%. You can "play" with it in your custom css, to see how it comes out.

    I am not a programmer, sorry, I can't help more. Maybe someone else will chime in. :)

    Good luck,
    A.

  22. tizz
    Member
    Posted 1 year ago #

  23. trektheandes@gmail.com
    Member
    Posted 1 year ago #

    Thanks AndreaK22 and Tizz for the replies. Unfortunately I can still not get it to work.

    Using Andrea┬┤s method,the email field does not change width when I alter it from 40% and while your code changed the colour of everything else, the email field remained un colourable.

    Tizz thank you too, I cannot get the methods to work either, there is no child theme either, just using the Modernize theme which has a controller which allows you to change the colour of the contact form, but again the email field is standing alone uncoloured and of the wrong size.

    The code suggested by Biswajeet does not manage to control the email field either for some reason.

    Looking like the only option is to deselect the html tags in the functions php file as suggested by author, but for some reason it is not allowing me to save it when I try.

    Is there any way of just downloading the old pre update version of contact form 7, ie 3.3.3 ? Frustrating because it all used to work so well.

  24. fpats
    Member
    Posted 1 year ago #

    thanks, code worked perfectly.

  25. nextlevelremodeling
    Member
    Posted 1 year ago #

    I cannot find where to look up or even edit this "code"
    This is my first website and everything so far has been successful using plugins. I never had to mess with code. Any help would be appreciated. Same issue...email looks different than other input fields.

    http://www.nextlevelremodeling.com

  26. buzztone
    Member
    Posted 1 year ago #

    CF7 now uses the new HTML5 input[type="email"] for email fields and input[type="text"] for other fields.

    Likely the CSS in your current WordPress theme 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.

    See Styling Contact Form for a general explanation of styling CF7 forms using CSS. If you are not familiar with CSS, this page also includes some links to where you can learn CSS.

    Quick and easy solution is to use [text] CF7 tag in place of [email] CF7 tag.

  27. nextlevelremodeling
    Member
    Posted 1 year ago #

    I just spend 2 hours trying to do this and frustration has set in overtime. I guess my biggest problem is finding where to even input any of this code.

    This is about as far as I get if anyone can list the steps from there:
    1 dashboard
    2 plugins
    3 edit contact form 7
    4 takes me to Editing contact-form-7/wp-contact-form-7.php (active) page

    LOST from that point on. Can someone direct me where to go from here?

    Thanks

  28. AndreaK22
    Member
    Posted 1 year ago #

    @ nextlevelremodeling

    Hi,

    If you still need to adjust the width of the email field, go to your Custom CSS section which is under Dashboard/Appearance/Theme Options/General and place/save the code there. You might have to "play" with the percentage, which dictates the width of the field. Also, you will probably want to change the font family from Arimo to whatever font you are using...

    input[type="text"], textarea, input[type="email"]{
    	background-color: #ffffff;
    	padding: 10px;
    	font-family: Arimo;
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    	color: #6a6a6a;
    	border: 1px solid #ddd;
    	background:	#ffffff url(images/field_bkg.png) repeat-x;
    }
    
    input[type="text"]:focus {outline: none; background-color: #f7f7f7;}
    textarea:focus {outline: none; background-color: #f7f7f7;}
    input[type="email"]:focus {outline: none; background-color: #f7f7f7;}
    
    textarea { width: 80%; font-size: 13px;}
    input[type="text"] {width: 40%; font-size: 13px;}
    input[type="email"] {width: 40%; font-size: 13px;}

    Hope this helps, I know it can be frustrating as I am not a programmer, so I am often digging around forums to find solutions. Maybe someone else knows an easier way...

    Regards,
    A.

  29. nextlevelremodeling
    Member
    Posted 1 year ago #

    I posted a link to show everyone what is going on.

    http://nextlevelremodeling.com/

  30. tizz
    Member
    Posted 1 year ago #

    @nextlevelremodeling
    Look in style.css at line 367
    You should add this rule:
    input[type="email"]
    in this way

    select, input[type="text"], input[type="password"], input[type="email"] {
    ...
    }

    leaving things in brackets unchanged.
    If you do this directly in the theme's style sheet, you will lose your changes the next update, so use a child theme or theme's custom css if you have it, copying the whole block and adding that rule as said.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic