Contact 2BUs 1

How to Implement Blogger Contact Form on Your Blog

by

Blogger Contact form is a very efficient user interface by which viewers can contact you by filling in a few requirements, like your name & email, etc. As a Blogger, you may consider using the contact form on your site to increase the 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 globally on your site. The contact form will be visible in the form of the widget in your website’s sidebar and footer area on all web pages including the homepage. So, if you want to add this type of contact form to your blogger website, in this case, you’ll not have to place any codes to your template/theme source code. This method is really easy to do.

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 a global type of contact form on your site.

2. Implement on a page or post

This method shows how to publish a separate contact page on your website. You can implement this type of contact form by placing this code on your blogger page. Here’s how:

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>

That’s it.

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

Leave a comment