Blogger Contact Form Widget-How to use in Separate Page?

Bloggers are expecting something missing since a long time, that is no other then the Contact Form.  Finally Blogger introduce Contact Form Widget Officially this week. Now no need to depend upon the third party code or google docs to create form for blogs. 

Before this Widget many Blogger use Google Docs Form for contact form in blogger. NepaliBlog also used same. Now no need to depend on the Google Docs. Its a great achievement for bloggers. Since this is in initial stage need more modification. 

Missing A lot. 

Since this is widget which can be kept on the right or left sidebar, also in Bottom at footer.  But many bloggers want to keep in separate page. We can also keep it in page after some HTML Tweeks Admin of Bloggerplugins. +Aneesh Joseph Wrote a post about this.
 Many things are lacking in this widget. NepaliBlog list out some of the Drawbacks. 

• No option for File Attachment. 
• No Captcha So chances of Spam Mails. 
• Blog Admin cannot Notice the Email address of senders and their IP address. Contact Message will come from no-reply@blogger.com. We cannot reply them. 

New Improvements
+Blogger has got some improvements. We can see the email address of  Sender.

How To Install This Gadget in Blogs.

In order to install this Gadget in Blogger 

• Login Blogger 
• Go to Layout. 
• Add A Gadgets (Where You want to Keep Contact Form Widget) 
• You cannot find on the Basic So click on the More Gadget (As shown in Figure Below) 

When You Add this Widget, Title will be Contact Form by Default. You can manually Change it. Just click on the edit Widget. You can Keep Title Name as you like. Just see the Picture Below.

When any visitor send message to you using this contact form. This message will be send to the email address attached with the blogger. If there are more than 1 Blog admin then message will be send in every email Id related with them. Here is the Snapshot of message received in NepaliBlog By using this Widget

To Keep It in Separate page Follow the Steps. 

Live Demo
If you want to keep it on separate page then it will not show in sidebar. Create a New Blank Page (See the Below Screenshot)

 New Page will Open , Go the HTML Edit menu and copy the below code and paste on it.

<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='10'></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> 

Click on the Compose you will find the Contact form as shown in the first image.

Remove it from the sidebar. 

After adding Contact form in Separate Page. No need to keep it on Sidebar. Remove HTML Code Related to Contact Form.

Click on the Jump To widget  You will find ContactForm In Drop-down Menu.
You will see the code like this
<b:widget id='ContactForm1' locked='false' title='Contact Us' type='ContactForm'>

click on the arrow delete the below portion of code. from this. and Delete the Portion given below. 

<b:if cond='data:title != &quot;&quot;'>
    <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 + &quot;_contact-form-name&quot;' 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 + &quot;_contact-form-email&quot;' 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 + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' 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 + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>

So the final code should be like this. 

Don't remove the Widget from the Layout of Blogs. This widget will not show in the sidebar of homepage. Instead it will show only in blog Page.

Happy Blogging.