How to move Contact form to separate page?

Move contact form to separate page

As you know, when you add Contact Form it displayed in sidebar. But you have people also seen many blogs which have contact form in separate page. Today I am going to show you that how can you do that. It is easy process to do but it needs little care.

First login to your blogger dashboard and click on layout. and click on one add gadget.

Another window will open, here you will have to click on 'more gadget' and then on 'contact form' and then click save.

Now click on pages in sidebar of your blogger dashboard which is shown in picture. then click on 'New Page' and then on Blank Page.

Copy the below contact form code block

<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>

Now switch to the HTML of this page to paste the contact form code. Now paste the above HTML code in the post editor. disable the comments and publish your page.

1). Click on HTML.
2). Now paste the above code in the post editor.
3). Click on Option. and then mark " Don't Allow" in Reader Comment section.
4). Click on done to save options.
5). Now Publish your page.

Now go to Dashboard and click on Template and then click on "Edit HTML".

Now Click on "Jump to widget" and select "ContactForm 1" in drop down menu.

Now you will see HTML Coding like in below picture.

Now click on Black Triangle to expand.
you will see coding like that. and delete the highlighted code.

Delete the highlighted code and then click on save template. But keep in mind that not to delete widget from side bar. It will automatically disappear from your side bar. so please don't remove.

Your Contact form is shifted to separate page, enjoy happy blogging.

ME: Keep visiting my blog to learn more about blogging and customization. Feel free to ask any question in below comment box, I am here to answer and help you. THANKS

Posted in: Blog Tricks