Subscribe For Free Updates!

We'll not spam mate! We promise.

Monday, August 5, 2013

Create Separate Contact Page For Blogger

Hi Everyone how are you. I think everyone Quite Good. In this my first tutorial You learn HowTo Create A Contact Form For Blogger Site. I think everyone do this correctly. Now today you will learn create separate contact page for blogger. Day by Day Blogspot  working hard and create attractive stylish gadget for blogger. Nowadays time has changed don't depends on third party software because blogger help us as their creative and attractive gadget.

Blogger launched it’s official version of the Contact Form Widget but it works only on the Blogger Sidebar. If you don’t want to add the contact form to your Blog’s sidebar but want it to add on a specific page then todays tutorial will help you out. If you didn't want the contact form to appear every where on my blog than follow my tutorial...Before going to my today's tutorial  please look at my previous post. If you don't see my previous post related to this tutorial than you can't add this to your separate page. SO LETS PLAY...

How to show blogger contact form on separate page:

1. First, Add the Blogger Contact Form Widget to your sidebar. (We will hide the contact form later in this tutorial, but you have to add it) See my previous post...

2. Log In to Blogger Dashboard

3. Now create a new page in your blog. See below screenshot


4. Copy The Below contact form code:

<form name='contact-form'>
<div>Your Name : </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Your Email: <em>(required)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Your Message: <em>(required)</em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<div style='text-align: center; max-width: 450px; 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>

5. Select HTML Mode, don't select compose mode because this code only work on HTML Mode. Copy and paste the code in HTML mode

6. I recommend post title name select Contact Us or Contact Me

7. Publish Your Page....


8. Go to Template Click on HTML


9. Jump to Widget Click on contactform1 see the image below:


10. Then click left side black icon and expand it you will see like this (<b:widget id='ContactForm1').


11. Click on & Expand it <b:includable id='main'> Highlighted below image:


12. Now delete the code highlighted below Image:


13. After that code look like this on Template


14. Save the template

That's all now see your site your side bar widget layout is hidden than you see your separate page you definitely see your contact me or contact us page.

Don’t remove the official “CONTACT ME” widget as added in before. If you remove your widget from Layout you can not run this on Separate page. SO DO NOT REMOVE FROM LAYOUT.

Some Advice For You Guys:
Think, you publish a new post and your readers likes your post and they faces problem, ya you say that they should comment on comment box. But sometime faces major problem cant shows everyone, so dear friends please make a contact me page on your blog or site.

Think 1, If you haven't contact us page so you face another problem, What is the problem? yes you face very big problem. Alexa is a information company and provide your site ranking suppose your site ranking like 1 thousands you need advertisement on your site And your page shows Google first page. Many internet buyers searching Google everyday which site is better ranking. Suddenly they find your site and they will contact you. So this is my point IF you have no contact me page you definitely lose you best buyers.

Final Words
I Just hope this tutorial would be helpful all of you. I made this tutorial Almost 5 hours, If you understand correctly than i feel so happy because lots of time i am providing this tutorial. I try my level best. Now your turns put you site hurry this contact me page. Please DO NOT FORGET TO SUBSCRIBE.

If you have any problem feel free to ask any question, I will Answer you as soon as possible. Share this post and like this post.

For my readers help I will make a video tutorial About this Topic. 

Till Than Good bye, Allah Hafez
Happy Blogging..........


  1. Hi Ariful,

    Informative tutorial indeed :)

    I wish I knew how to do this when I had my blogs on a Blogger platform a few years back. That time I really had NO idea how to add a separate contact page to my blog, except what came with the normal Blogger platform.

    Thanks for sharing. Have a nice weekend :)

  2. Fast thnx Harleena mam, I am totally surprised that you place your nice comment on my blog, I am glad and too much happy. In my little career i didn't know this importance of this page. Now day by day i am learning and grab some knowledge......