How To Add a Contact Form and Create a Contact Us Page in Blogger

A contact page is how generally a reader of your blog or an advertiser, sponsor or someone with a general query would reach you through.

BlogSpot (Blogger) is an ideal choice for beginners to learn the basics of blogging and understand how it works.

BlogSpot users can use a contact form in their widgets, but you can not add them to the pages. This a problem for newbies.

AdSense, including most of the other quality ad networks, and affiliate marketplaces won’t approve you to join them if you don’t have an about, contact and a privacy policy page.

So make sure you create these pages as soon as you start your blog.

In this tutorial, I’ll help you to create a contact us page and add a contact form in your BlogSpot blog. I’ll show you two different and easy way to do this, you’ll have choices.

Method one is by using a third-party tool, and method two is by using an official Blogger “contact us” gadget. Feel free to choose any.

Method No. 1 – Using 123FormBuilder

This is my favourite tool to create any kind and type of forms for all non-WordPress sites.

123FormBuilder (previously 123 ContactFormBuilder) is a cloud tool to build any type of online forms, manage workflows, and collect their data very quickly.

It works for every CMS platform, including BlogSpot and WordPress.

Step 1- Go To 123FormBuilder and Create A Free Account

Step 2 – Login To Your Dashboard and Click On The Arrow Next To The Create A New Form Button. Click on contact form & Lead form option.

A Contact Form Will Appear On The Second Page Which Is Ready To Be Used. You can add any extra fields you may want by clicking the fields button.

Click on save and publish button.

Step 3 – Copy the javascript code from the screen. (Press CTRL + C)

Step 4 – Go to your Blogger blog dashboard and click on add new page. Name this page, “Contact Us.”

Step 5 – Click on the HTML format editor button and paste the code here (Press CTRL + V to paste) and click publish.

Your contact form is now live on your blog. Take a look at it.

Let’s move to our second method

Method 2 – Customizing the Blogger “Contact Us” Gadget

Blogger Gadgets section has an official contact us gadget, but you can not use it on any of your pages. It’s only accessible through sidebars. Follow this tutorial below to customize it for using it on pages.

Step 1 – Go to your Blogger dashboard and click on the layout tab.

Step 2 – Click on add new gadget.

 

Step 3 – Select the contact us gadget from the menu and click on the add button. Uncheck the visible option and save the gadget.

Step 4 – Add a new page to your blog. Name this page, “Contact Us.” In the HTML editor of this page copy and paste the following HTML contact form code:

<div id="custom_ContactUsFromForBlogSpotBlogger" class="widget ContactForm">
<div class="contact-form-widget">
<p>Please fill in the form below to get in touch with us.</p>
<div class="form">
<form name="contact-form">
<p></p>
Your Name
<br>
<input type="text" value="" size="30" name="name" id="ContactForm1_contact-form-name" class="contact-form-name">
<p></p>
Your 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>
Your 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("ContactForm1"));" href="//www.blogger.com/rearrange?blogID=84427382819377482&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&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>

Important – Make sure you change the BlogID located in line 33 of the code above with your blog’s original ID. You can find your BlogSpot blogID by going to your BlogSpot blog dashboard and looking at your URL in the browser’s’ address bar. Here’s how it looks for reference:

Turn off the comments for your contact us page and make sure you add it to your menu so that it is easily accessible.

Congratulations! – Your contact us page is now live. Go have a look at your contact form and test it for the first time.

I hope this tutorial was helpful to you. You would also like to read about the best chrome extensions for bloggers and the best blogging tools. Share this post to help others and also leave a comment below sharing your thoughts.

54 Comments

  1. Hi Aayush Bhaskar, thanks for sharing this tutorial, it worked!. had a great time in reading your blog.

  2. Where will i get these messages that come through contact form?

    1. You’ll get the messages on the email address you used to create your Blogger blog.

  3. I was searching ACTUAL working form format. But nothing on the internet was working. I did tried form sites but it wasn’t what I was looking for. After N numbers I went through some really crappy explained tutorials I came across your article.

    Thanks a ton for for your helpful and actual working tutorial.

  4. Thanks for your helpful Article. I have read many other articles about contact us page , but nothing worked. But after applying your method and it actually started working on my blog. Kudos.

  5. Abdul Mustaqim-Ul-Alam Shovon says:

    Thanks for your nice article and real working codes. Everyone else the code fails but your one works.

  6. i have created the contact page and tried sending a test message but have not received any mail on the email id.
    please help

    1. This is a wonderful tutorial. I could create the contact form easily. Have two questions:
      1) Send button doesnt work. I tried to test with a my another id.
      2) How to turn off the comments?

      Thanks in Advance.

      1. It depends on the template you are using. Try changing it to another template or check if the Javascript conflicting with other scripts such as ad scripts.

        To disable comments, go to settings, and click on the posts and comments section. There, click on the Hide option to disable comments.

  7. Hey, this is really helpful its working properly.

    Thank you!

  8. Thank you Aayush, i have successfully added a contact us page to my blog. I must admit that it looks a lot professional then adding an email id for contacting me.
    Really appreciate your help 🙂

  9. Hi Aayush Thank you for the code. I created contact page using your ID but I have not received the email. My blog is correct. I double checked that. Page and form is coming. But when the “send” button is clicked it looks like its not working. Please help.

  10. Thank you, sir. I have downloaded your blogger SEO list very helpful.

  11. Hello, hope all well!

    I have done all the things and page is also added to my blog, but I am not to getting answer through contact form, even it is not submitted by the users. I have also changed blog ID, as per mentioned in blog.

    Looking your reply on the same.

    Thank you so much.

    Avijeet

    1. Hi Avijeet, it seems the form is not working for the Blogspot domain and working fine for custom domains. Try switching and let me know.

  12. Sayed Sudip Ahmed says:

    Inline 33 where you put the blogger ID no. ?, I don’t understand.

    1. hover your mouse on the code and scroll left, you’ll notice where you have to enter Blog ID.

  13. Muzammil Shah says:

    If we use a third party website to create Contact Us page for our website, is this method harmful for our website or not.

      1. Maria Bukhari says:

        Thanks for the reply. I have 3 contact us page which is downloaded from google. I want to add it to my blogger website and its not working because the developer of those Contact Us page will not add any javascript which performs this action. If you have any idea about how we connect Contact Us page to gmail address.

  14. Please can you give image guide for me Where to put blog id.

    1. Hi Tambe, there is one already. The id should be placed inside the code at line 33.

      Anyways, here an image to help you:

      blogid location

  15. Vishnu Chandrakumar says:

    Thank You So Much!

  16. Hi Aayush
    How can i change text color inside the form ?
    My background color is white and text is also in white, so hard to see it.
    Thank you,

    1. Sure, You can use the container to change the font color. Use the code: span style=”color:#ff0000″ before the text and close the span tag.

      I didn’t use <> before or after that span code cause WordPress would convert it.

  17. nazeer ahmed says:

    I don’t understand ” Make sure you change the BlogID located in line 33 of the code””
    There is no command in line 33,
    wht do you mean in line 33 , i check all thing there is no BlogID
    can you describe it.

    1. Scroll to the left when you hover the mouse on the form code. At the 33rd line, you’ll notice “blogid=” inside the (a) command. Hope it helps.

  18. Kumaraswamy Mothe says:

    Thanks for your helpful Article. I have read many other articles about contact us page , but nothing worked. But after applying your method and it actually started working on my blog

  19. AnonyWrite says:

    Hi! I tried your form and based on the comments it worked for them. And it’s not working for me. Can you please check if I did something wrong with the code? I just copied the code you posted and added the icons next to the name, email and message and changed the blogger id and used mine.
    https://anonywrite.blogspot.com/p/contact.html
    Thanks and hope to hear from you!

    1. Hi Anony,

      Use the inspect tool and check if the code matches with the code above in the tutorial. The most common problem is always the customization of some discrepancy in the code due to template conflict.

  20. Adeyemi Tayo says:

    Hi
    Thank you so much for this. But I am lost. I don’t know where line 33 is

  21. Mansoor Ali Jarwar says:

    AmazinG!! Very easy and Quick Support. I just Created my Page within 2 minutes easily by following your helping post. Thank you : )

  22. Prof. Bhagwan Deen says:

    Nice tutorial. I followed Method 2 and added contact page successfully to my blog. I use third party template. Thanks.

  23. Navnish Anand says:

    Your writing is so so much different Aayush. You used to write such detailed and thorough tutorials, like this one. I loved your marketing archive when you talked about affiliate and all. Can you resume writing more affiliate stuff yourself?
    Why so many product articles from different authors all of a sudden?

  24. The post is absolutely amazing! It helped a lot but I have an issue with the Blog ID, I can’t find my own Blog ID. Please help.

  25. Hi,
    I followed the instructions very carefully and the form looks great but I’m having the same problem as several others: when I test the form and hit “Send,” nothing happens. I am using a Blogger domain rather than a custom domain for now. Is that the issue?

    Thanks very much.

    1. Hi Sandra, Multiple cases show the same – the Blogspot domain is the issue. Try switching to a custom domain or use method 1, see if it works.

  26. Hi brother,
    I want to add a required* option for “Name” column on the contact us form. So how can I add it? Thank you for giving the HTML script!

    Thank You.

    1. Adding the required attribute at the end of line 9 before closing tag > should do the job, Tuty.

      E.g. –

      [input type=”text” value=”” size=”30″ name=”name” id=”ContactForm1_contact-form-name” class=”contact-form-name” required=””]

      Then add this after Your Email at line 7:

      [span style=”font-weight: bolder;”]*[/span]

      Replace [ with < I didn't do it or the code would take effect.

  27. Thank you for this! Super helpful and easy to follow!

  28. Dear Aayush Bhaskar, do you have a secret to add a field to the form for attachments?

  29. Hi! Thanks so much. This is the tutorial that has come the closest to working for me. My issue is that the form stops working if i hide the gadget in the side bar but it works fine if the gadget is visible. If I hide the gadget I’m no longer able to klick the send button. I have tried this on both my blogspot domain and my custom domain and it is the same on both. Do you have any idea why it is like this?

Leave a Reply

Your email address will not be published.