1: Sign in to blogger and click on Layout


2: Click on "Add a gadget"

3: Click on "More Gadgets" and then click on Contact Form


4: Now change the title "Contact Form" or leave it and then click on "Save"


5: A Contact Form will appear on you blog as you see below


Now if you want to hide this Contact form here and show it into  Contact Us page then follow given steps.

1: Click on "Pages" and then click on "New Page"


2: Write a title or name for your Contact Us page and then click on "HTML"


3: Copy the below code and paste it in the textarea as you see in below picture

<div align="center" style="width: 100%;"> <form name="contact-form"> Your Name: &nbsp; &nbsp; &nbsp; &nbsp; <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> <br /> Your Email: <span style="color: red; font-weight: bolder;">*</span> &nbsp; &nbsp; &nbsp; <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <br /> Your Message: <span style="color: red; font-weight: bolder;">*</span> <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br /> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" style="margin-top: 5px;" type="button" value="Send" /> <br /> <div style="max-width: 222px; 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> </div>

4: And then click on "Publish"



5: Now go to "Template" From menu and click on "Edit HTML"


6: Now press "Ctrl + f" and find "]]></b:skin>" without double quotes. and place below given code above this "]]></b:skin>"

#ContactForm1
{
display: none ! important;
}

See in the picture

End. Just Enjoy. Don't forget to like our Facebook page