How to add simple blogger contact form in blog easily?



Today i will told you How to add blogger contact form in you blog easily? This is very simple task to add a simple contact form in your blog blogger. Many people search on Google to find how to add a simple contact form on blog. But they will not find the way to add a blogger contact form in blog. So, i'm writing a post on "How to add a blogger contact form on blog." These are simple steps you can follow then and add a simple blogger contact form in blog.

View Demo


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

How to add simple blogger contact form in blog easily? How to add simple blogger contact form in blog easily? Reviewed by Muhammad Awais on 04:42 Rating: 5