How to add Contact Form Widget to Blogger - Official


The long wait is finally over and blogger has come up with it’s own contact form. Now you no longer have to rely on 3rd party Contact form solutions. Blogger has added a new Contact Form Widget which will fit into your Blog’s sidebar. You can also add the same contact form on a separate page and customize it  if you want to.
Adding a contact form to Blogger is now really easy. Below steps will guide you in adding the contact form as a sidebar widget.

Why should I add the new Blogger Contact form

Visitors can easily drop a message to you straight from your blog. You don’t have to reveal your email address to the web to provide users with an option to contact you.If you like getting suggestions, queries or any other feedback from the users, make sure that you add the contact form to your blog. It’s really easy to add the form and doesn’t require any 3rd party code to be added to your blog.

How to add the contact form to Blogger

Login to your Blogger Dashboard and Navigate to the Layout Page
Click on the Add a Gadget Link and select More from the left Menu. You can add the add the brand new contact form the right side list
add-contact-form-in-blogger
You can set an appropriate title for the Gadget and Save it.
configure-blogger-contact-form

Once it’s done, you should see the slick and clean Contact Form added to your Blog’s sidebar.The contact form has the below input fields

  1. Name – Name of the reader who is sending you a message
  2. Email – Email address of the reader who is sending you a message
  3. Message – The message which the reader wants to send to you.
  4. Below is the screenshot of the Contact Form Widget added to one of my test blogs.
    blogger-contact-form
    The Contact form has validations in place and Error messages will be displayed in case the user misses out the email address or message. Thought the form doesn’t have any captcha validation,it is less likely to be attacked by spam bots as the send button is triggered by JavaScript.

When the reader sends you a message via the contact form, you will receive it straight in your inbox. Copies of this message will be sent to each Admin user of the Blog. Below screenshot will give you an idea of how the message will look like. contact-form-email-received
You can directly reply back to your reader from you email. If you want to move the Contact Form to a separate page, then checkout the tutorial on creating a separate contact page for blogger.

You can change the look and feel of the contact form by altering the CSS styles. We will try to publish another tutorial which will help you in customizing the contact form. You can see a slightly customized version of the contact form widget on our Contact Page.

If you have any further queries on adding the contact form, do let us know and we will be happy to help. You can reach us via comments or the Forum

Happy Blogging!

30 comments :

  1. How can I add this form to any page or post of my choice?. I mean how can I get the code?

    ReplyDelete
  2. I added it to one of my blogs but I think it's a little large on average.

    ReplyDelete
    Replies
    1. if you think that it's too big for your sidebar, you can move it to a separate page. Tutorial link is there to the end of this post.

      Delete
  3. It was most awaited as i was using third party widget in my blog because of unavailability of contact page and third party contact page form always comes with limitations which is not good for me.and finally blogger itself launched it.thanks to google.One quaetion can i add it to a separate page then adding as a gadget.

    ReplyDelete
  4. How can I add this form to any page,Rather i would put the widget in http://bbloggertutorials.blogspot.com/p/contact-me.html

    ReplyDelete
    Replies
    1. please read the last part of the post or the previous comments.

      Delete
  5. Hi
    How to force this Contact Form Widget to send to another email....(no email Blogger).

    ReplyDelete
    Replies
    1. Add a new author from Settings > Basic > Add Authors.Once the author accepts the invitation, mark him as admin. All admins will be copied in the emails sent via the contact form.

      Delete
  6. Welcome. Question: I put in my blog >> widget Contact Form. Can I put another adress email ? >> to redirect messages . Where? How?

    ReplyDelete
    Replies
    1. Add a new author from Settings > Basic > Add Authors.Once the author accepts the invitation, mark him as admin. All admins will be copied in the emails sent via the contact form

      Delete
  7. I have put it up on my blog, but when i test it out and click send nothing happens

    ReplyDelete
    Replies
    1. Go to your gmail account (or whatever email is set as your primary author under Settings/Basic). If using gmail, click the "social" tab at the top of the page. Your test message should appear there.

      Delete
    2. Thanks for help :)

      Delete
  8. When i tested this i noticed when i replied my real name was shown. Is there a way to change it to my username here on Blogger.

    ReplyDelete
  9. Hey Admin
    Thanks for sharing great information, but i want to add a Contact form in side box (like Facebook likes box)

    ReplyDelete
  10. hey
    i cant found te contact form in "more widgets"

    ReplyDelete
  11. Beautiful <3

    Thanks a ton or this awesome post :)

    HPBolly

    ReplyDelete
  12. Nice info.........m search for this from a long time....Thanks google..

    ReplyDelete
  13. There is just Name, Email and Message option. I want to add some new option and also dropdown menu. is it possible ?

    ReplyDelete
  14. how to create a blogger template. please give me any instruction

    ReplyDelete
  15. Thanks for the tip in adding a contact form for the pages as well

    ReplyDelete