Blogger Contact form is the very efficient user interface by which viewers can contact you by filling a few requirements only like name & Email. As a Blogger, you may consider using the contact form on your site to make more engagement between you/your site and viewers.


There are two main ways to implement contact form on Blogger/Blogspot site
  1. Use as Widget (on the sidebar)
  2. Implement on a page or post

Here's How to implement Blogger Contact Form on your Blog:


1. Use as Widget (on the sidebar)

This method will apply contact form on every page or post's sidebar or footer area of your website. So in that case, if you want to make it visible to all the pages or posts, you may consider this method. In this method, you don't need to place any code to your template/theme source code. It is very easy to implement.
Follow the given instructions:
  • Goto Blogger.com and open your blog website
  • Then select Layout from the left sidebar
  • Click add a widget from the sidebar or footer area
  • Choose Contact Form and add this to your blog
That's it.  You have successfully implemented contact form to your site.

2. Implement on a page or post

Those blog posts or pages in which you want your viewer easily can send you any information are required to implement contact form. Follow the given steps:

Step1: Copy the given code
<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>

Step2: Now create a new blog post and goto HTML section, paste the above code. That's it.

I hope you have implemented Blogger contact form successfully. If you are facing any issue let me into the comment box.

Post a Comment

Any spam comment will be removed immediately

Previous Post Next Post

Like us on Facebook