Add message and customize contact form in Blogger

Add message and customize message form in Blogger

Contact form is a helpful widget,Blogger provided,since I had provided a customization snippet for it.But,now I'm going to share how to add message in a contact form,like write your full name or Please make sure that e-mail is correct or something like that.Sometimes it is a need or sometimes it is for elaboration.In this post I'll teach how to add message and a customization snippet to customize your contact form using CSS.So lets begin.

Update:Add message in Contact Form and Follow By E-mail widget in Blogger without using Javascript

To add message it requires pure Jquery,so lets begin with adding message.

First you must know how to add contact form,to get form go to the link below.

Contact form released by Blogger

Now to add message follow the steps below.

You must add Jquery first if you didn't add it yet.
You must confirm that Jquery is present or not,if you will add jquery twice,then Jquery won't work.
To add Jquery
Go to Template > Edit HTML
Then paste the following code just after <head>

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

After adding Jquery,
Just before </head> paste the following script.

<script>
$(document).ready(function(){
$(".form p:nth(0)").append("<span class='contact-form-message'>Full name</span>");
$(".form p:nth(1)").append("<span class='contact-form-message'>Make sure e-mail is correct,because we will reply through this e-mail.</span>");
$(".form p:nth(2)").append("<span class='contact-form-message'>Please be descriptive.</span>");
});
</script>

Replace RED highlighted text with your desire text,it will come above name field.
Replace Orange highlighted text with your desire text,it will come above e-mail field.
Replace yellow highlighted text with your desire text,it will come above message field.
Now add the following script just above ]]></b:skin>

/*
---------------------------------------------
Contact Form Widget By Bloggerever.com
---------------------------------------------
*/
.contact-form-widget
{
color: #333;
}
.contact-form-widget input,.contact-form-widget textarea
{
background: #fff;
margin:10px 0;
-webkit-box-shadow: 0px 0px 2px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 2px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 2px rgba(50, 50, 50, 0.75);
border: none;
color: #333;
}
.contact-form-widget input:focus,.contact-form-widget textarea:focus
{
border: none;
}
.contact-form-message
{
font:normal 12px 'open sans',sans-serif;
font-style:italic;
color:#BDBCBC;
}
.contact-form-widget .contact-form-button
{
background: #333 !important;
color: #fff;
}
.contact-form-widget .contact-form-button:hover
{
border: none;
}