How to add CONTACT US form and page to BLOGGER

Hello to Bloggers Tricks  ,today we are going to add a "contact us" form page

watch this Tuto and fallow the instruction bellow the video :

Instruction: 

* First you have to backup your temlplate befor making any changes  and then :

1) Add the contact us form :

1.      loggin to your blog 

2.     go to layout  and add the  " contact form "  from  add a gadget  

2)Hide the contact form from sidebar  :  

1.     Go to template and  then  edit  html 

2.     Search for  this code   ]]></b:skin>    with   CTRL + F    

3.     Right above that place this code :     

#ContactForm1                  {                                              display : none! important;                                              }

        4.Save it
3) Go to page  and add new page  and copy and paste the code below :

<form name="contact-form"> <div style="text-align: center;"> <br /> <br /> <br /> <br /> <br /></div> <div style="text-align: center;"> <span style="color: #0b5394;">Your Name:</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</div> <div style="text-align: center;"> <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> </div> <div style="text-align: center;"> <span style="color: #0b5394;">Your Email:</span> <span style="color: red; font-weight: bolder;">* &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span><br /> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div> <div style="text-align: center;"> <span style="color: #0b5394;">Your Message:</span> <span style="color: red; font-weight: bolder;">* &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span></div> <div style="text-align: center;"> <div style="text-align: center;"> &nbsp; &nbsp;&nbsp;<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>&nbsp; &nbsp;&nbsp;</div> </div> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #0b5394;"> &nbsp;<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /></span> <br /> <div style="max-width:300px; text-align: center; width: 100%;"> <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div> <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> </div> </div> </form>

4) To add this page to your  contact us bouton in your blog then just past the URL  of this page in place of  #    you will find it in this form :    <li><a href='#'>Contact us </a></li