How to add custom Contact Us form in Blogger blogs

Some day ago , blogger introduced a new widget , It is about Contact Form which you can add at your blog very easily and then your visitor able to easily contact with you .

Any contact form contains :

1. Field for the User Name
2. Field for Email-ID
3. Field for your message
4. And at last submit button

Firstly you have to add Contact form from Blogger widget.

Steps To Add Contact Form In Blogger

      To add widget Goto Layout then More gadgets and then CONTACT FORM .

Now some Styling :

/* Contact Form Container */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}

/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}

/* Submit button style */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}

/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}

Now it looks like  :

 

Now , to add this CSS in your HTML , GOTO Template > Edit Html and find  <b:skin>...</b:skin>    and paste this above closing of skin.

Now you have new stylish Contact Us form.