How To Convert Blogger Contact Form in A Contact Page

In last tutorial, I showed you how to add Blogger’s official contact form to your Blogger blog. You can also Add Blogger contact form into a Contact us Page of your Blogger website. It will work absolutely fine and it will not break anything. Let me show you how:
Note: In order to add contact form to a page, you first need to add the contact form widget to the sidebar of your Blogger.
< 

Sometimes, we don't want to show a contact form widget at blogger sidebar or else where, So this post will help you to how to hide contact form widget and create a contact us page with official blogger contact us widget. This style works good and all messages send to your blogger emailbox.Also you can add multifunction contact us widget like upload option.  

Hiding Contact Form From Your Sidebar

First, you need to hide the default contact form from your Blogger’s sidebar widget. Navigate to your Dashboard > Template > Edit HTML. Search ]]></b:skin> and paste below code just above.

]]></b:skin>

#ContactForm1{

display: none !important;

}

Save your template.

Adding Contact Form To A Page

Now, we will add the contact form to a static page of your Blogger blog. Navigate to yourDashboard > Posts, and click on New Page and select Blank Page.

Now, in your blank page, click on HTML option to switch to HTML editor mode. Add following code and publish your page:

<form name='contact-form'>

<p></p>

Name<br />

<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' value='' type='text' />

<p></p>

Email

<span style='font-weight: bolder;'>*</span><br />

<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' value='' type='text' />

<p></p>

Message<span style='font-weight: bolder;'>*</span><br />

<textarea class='contact-form-email-message' cols='25' 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' 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>

That’s it! You can also customize the contact form with custom CSS styling or jQuery.
You can change Name, Email and Email Message in your own words like your good name to name.
If you are facing any difficulty to adding this widget or its not work properly please feel free to contact us or use another method to create contact us page with official blogger contact us form.