HOW TO Customize Blogger Contact Form message
21 September 2015
Add Comment
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
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[Replace the Yellow text for E-mail error and Orange for description error.
$(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>
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{Holla Done! If you want to know anything,then our we are waiting for comments.
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;
}
0 Response to "HOW TO Customize Blogger Contact Form message"
Post a Comment
Thanks for your valuable feedback.... We will review wait 1 to 2 week 🙏✅