How To Add A Specific Contact Us Page On Blogger

Hey guys, today I am going to show you how to add a specific contact us page on blogger. It is important to create a contact page in blog where people can contact with blog admin to give feedback of ask some questions. Blogger has already a gadget for contact us page. But it does not show a specific page. It is seen in blogger home page. I think you bored about this and you try to find how to add contact us page in a specific page. No more discussion let’s see how to do this.

So Let’s Start

Instructions: You should add the contact form widget from blogger widget store to launch it on a specific page. If you have already added it then ignore the adding contact us widget steps.

Step-1: Sign in to your Blogger account and go to Layout. Now click on Add a Gadget link and More Gadgets.  Find Contact form page element and click on it. Now you have added it into your blog.

Step-2: The Contact form widget that you add for you blog will show in slide bar. Now we will hide it from slide bar and then we will add it in a specific page. You just need to add a simple CSS code to your template. So go to template > Edit HTML.

Step-3: Now press Ctrl+F and paste the following code on search box and hit Enter.

]]></b:skin>

Step-4: Just above this code paste the following CSS code and save template.

#ContactForm1{display: none ! important;}

Step-5: Now we are going to add a specific contact us page on blog. Go to your blogger dashboard click on Pages from the tab on left side. Now click on New Page > Blank Page.

Step-6:  Switch to HTML mode from left side and click on options tab on the right side. Then select the Use <br> tag option in the Line Breaks section like below.

Step-7: Now paste below code on the empty Edit HTML field.

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

Step-8: Now customize these highlighted words as you choice.

You have done now enjoy it……

Read More