Add Contact Form on Blogger Page

If you are planning to make one of your page as contact form and you are using a blogger platform, i got a bad news for you because by default you can only add contact form on your blog's sidebar or any part in your layout as long adding gadget is available but dont worry i got some trick for you to make it possible.


There are also third party sites that allows you to embed a set of codes to add contact form in your page but you need to agree that they are going to include their links in your form that will look like its not blend in with your template and also when using a third party gadget you wont recieved emails from your contact form right away not like the contact form in blogger.

So its better if we find a way to put the blogger contact form in your blogger page and heres how you do it.

Before we proceed please don't forget to like my facebook fan page found in the right sidebar of my blog so whenever I have a new tips and tricks you will get notified.

Tutorial On How To Add Contact Form on Blogger Page

I prepared a short video tutorial for you the codes are just below of this page:


Step 1: Go to Layout >> Add a Gadget >> Add Contact Form Widget and put it in the sidebar.

Step 2: Go to Template >> Customized >> Advance >> Add CSS and add this code.

The page is protected, the select and copy function is disabled, just copy this code manually.

#ContactForm1 {
display:none;
}

Now let's put the contact form in any page you want.

Step 3: Go to Page >> New Page >> and copy the code below and paste it on a page.

Since this page is protected, the select and copy function is disabled, if you wish to get the code you use this download link.

<div id="custom_ContactForm1" class="widget ContactForm"> <div class="contact-form-widget"> <p>Get in touch with us by filling out the form below.</p> <div class="form"> <form name="contact-form"> <p></p> Name <br> <input type="text" value="" size="30" name="name" id="ContactForm1_contact-form-name" class="contact-form-name"> <p></p> Email <span style="font-weight: bolder;">*</span> <br> <input type="text" value="" size="30" name="email" id="ContactForm1_contact-form-email" class="contact-form-email"> <p></p> Message <span style="font-weight: bolder;">*</span> <br> <textarea rows="5" name="email-message" id="ContactForm1_contact-form-email-message" cols="25" class="contact-form-email-message"></textarea> <p></p> <input type="button" value="Send" id="ContactForm1_contact-form-submit" class="contact-form-button contact-form-button-submit"> <p></p> <div style="text-align: center; max-width: 222px; width: 100%"> <p id="ContactForm1_contact-form-error-message" class="contact-form-error-message"></p> <p id="ContactForm1_contact-form-success-message" class="contact-form-success-message"></p> </div> </form> </div> </div> <div class="clear"></div> <span class="widget-item-control"> <span class="item-control blog-admin"> <a title="Edit" target="configContactForm1" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;ContactForm1&quot;));" href="//www.blogger.com/rearrange?blogID=8799058979810298021&amp;widgetType=ContactForm&amp;widgetId=ContactForm1&amp;action=editWidget&amp;sectionId=sidebar-right-1" class="quickedit"> <img width="18" height="18" src="//img1.blogblog.com/img/icon18_wrench_allbkg.png" alt=""> </a> </span> </span> <div class="clear"></div> </div>

Thats it were done!  Hope you have learn something on this page,  if you have doubts about this tutorial,  please leave a comment below and I will be glad to give you my reply. 
Advertisement