Separate Contact page in Blogger

Thursday, September 12, 2013

Separate Contact page in Blogger

Well we discussed about how to "create a blogger contact form". In this tutorial I want to discuss on How to create a page where the contact form will be placed. In the earlier tutorial we came across the points to create a blogger contact form but to have a professional feel we should have it on a separate page. However no need to worry about that because I have came up with a trick to add a contact form on a separate page that we see on other blogs such as wordpress.

Why should I use a contact form on separate page?

When you are using a contact form that is released by Blogger, it normally appears as other widgets on every page. This gives your blog an odd look. To make your contact form professional lets have it on a separate page. That is what I want to bring it to you in this tutorial.

How to earn money with your facebook pages?

How to Trace details of unknown number

How to add facebook like button below blogger posts?

Best practices to write titles for Search Engine Optimization(SEO)

Great tips to reduce loading time of your blog to increase more readers

Idiotic and funny ways you never know to promote your blog

How to earn money from blogs?

Add floating widget to your blogger blog

Get more viewers to your blog using facebook fan page

How to add contact form on a separate page?

1. First you need to login to your blogger dashboard.
2. You should have already added a Blogger Contact form, if you don't know how to add it please read this article
3. After adding the contact form widget to your blogger you need to create a new page as shown in the figure below.
       Step a) Navigate to Pages in your blogger dashboard.
       Step b) Now click on New Page.
       Step c) Select Blank Page.

4. Copy the code below and paste it in the page editor.

<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> <p></p> <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> </div> </form>

Note: Switch to HTML while pasting the below code into the page editor as shown below.

5. Disable the comments for the page by selecting "Don't allow, hide existing"
6. Now publish it.
7. Now navigate to Template > Edit HTML.
8. Click Jump to widget and select ContactForm widget from there.

9. Click the arrow mark to expand the widget. Then expand <b:includable id='main'> by other arrow mark beside it.

You can see the below code. Delete it.

<b:widget id='ContactForm1' locked='false' title='Contact Me' type='ContactForm'> <b:includable id='main'> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <p/> <data:contactFormNameMsg/> <br/> <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/> <p/> <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span> <br/> <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/> <p/> <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span> <br/> <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/> <p/> <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/> <p/> <div style='text-align: center; max-width: 222px; width: 100%'> <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/> <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/> </div> </form> </div> </div> <b:include name='quickedit'/> </b:includable> </b:widget>

Now replace the above code with the below piece of code.

<b:widget id='ContactForm1' locked='false' title='Contact Me' type='ContactForm'> <b:includable id='main'> <b:include name='quickedit'/> </b:includable> </b:widget>

If you still have anything to ask please comment below.

Author: Bhanu Chander Bathini (CEO, Tricks Town.)

Hey friends, I am Bhanu Chander a Web Designer/Developer, Content writer, Freelance SEO analyst and a blogger. I am pursuing my M.Tech in Computer Science and Engg. You can contact me on bhanu4funn@gmail.com for web design solutions at low cost with effective SEO.

Free Mobile Balance →

Labels: Blogger Plugins, blogger tips

Thursday, September 12, 2013