Change error message in Blogger contact form using Jquery

Change error or success message in Blogger contact form using Jquery

Blogger contact form has filled with lots of possibility in which many of them are already unveiled customization of this form and adding the message above the fields.Now one more trick that will change the error message message in this form.The error message shows when someone do not write correct e-mail or do not write description,which are two required fields in this contact form.So lets begin with it,
In this form I've considered three messages

E-mail error.
Description error.

Now add the Jquery in your template if you do not have it,to add Jquery paste the following line just after <head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>

Now lets move to important Jquery part,add the following code just before </head>

<script type='text/javascript'>//<![CDATA[
$(function(){
$('.contact-form-button-submit').click(function(){
$('.contact-error,.contact-success').hide();
var email="Cowboy! Provide the correct E-mail.";
var description="Whats your problem Sir write in description box.";
if($('.contact-form-error-message-with-border').text()=="A valid email address is required."){
$('.contact-form-error-message-with-border').replaceWith("<div class='contact-error'>"+email+"</div>");
$('.contact-form-error-message-with-border').hide();
}
else if($('.contact-form-error-message-with-border').text()=="Message field cannot be empty."){
$('.contact-form-error-message-with-border').replaceWith("<div class='contact-error'>"+description+"</div>");
$('.contact-form-error-message-with-border').hide();
}
else{
}
});
});
//]]></script>

Replace the Yellow text for E-mail error and Orange for description error.

Your message setting has been done,now its time to customize it.To customize it,add the following lines just before ]]></b:skin>

.contact-error{
display:block;
color:#fff;
font:400 13px 'open sans',sans-serif;
background:#ff6d6d;
}
.contact-success{
display:block;
color:#fff;
font:400 13px 'open sans',sans-serif;
background:#00bfff;
}

Holla Done! If you want to know anything,then our we are waiting for comments.