Contact Form Email Field Looks Different Than Other Fields

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.

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

Thanks,
Alastair

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.

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

Hi,

Same.

https://studio611.net/contact/

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

Thanks sax_man_al,

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

Best,

John

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

Thanks biswajeet, and thanks all.

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

Best,

John

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

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

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

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

[ 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

@tkaminja post your site url to let us see…

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

the email field looks different
Thanks for the reply and help