Add-Blogger-Contact-Form-in-Side-Bar

How to add Blogger Contact Form in Contact us page

It’s a frustrating job when I try to add contact form in my blogger contact us page. Since, by default blogger only provides a widget to add contact form in your side bar therefore you need some coding techniques to add it inside your contact us page. However you can find those coding by searching on internet but for me the problem arises when my submit button was not working. All of my fields are working fine except submit button. It was the most frustrating time that I had ever faced. I worked for 2 hours to add that contact form in a page but at last the result was noting. At last I thought of adding my own contact form instead of using blogger’s form and then I found a way to add a perfect working blogger contact form in contact us page.

Before learning the trick to add contact form inside of your contact us page lets learn to add it in the sidebar.

Note: In this post I am going to show you 3 different ways to add blogger contact us form in a separate contact us page therefore guys you can use this table of content to directly jump into any of the steps you want to follow. 

Contents

1. How to add Blogger Contact Form in Side Bar

Before starting this guide I hope that you are logged in inside of your dashboard.

Step 1: Click on Layout tab which is available in your dashboard and then click on Add a Gadgets which you can see after clicking on Layout.

Add-Blogger-Contact-Form-in-Side-Bar

 

Step 2: After Clicking on Add a Gadget a new window will pop up showing you different kinds of gadgets that you can add  to extend your blog functionalists. Click on More Gadgets and now you can see contact form, add it and then click on Save arrangement.

add-contact-form-in-blogger

It’s over now you can see a perfectly working blogger contact form in your side bar.

add-blogger-contact-form

Now, let’s get started and learn the trick to add a working blogger contact form inside of your contact us page.

2. How to add blogger contact form inside contact us page

The contact form that I am going to add inside of my blogger contact us page is provided by a third-party website  foxyform. Just go to that link and create a form.

FOXYFORM

So, the question is how to create a contact form?

Just follow these steps and learn to create a perfect contact us form for your blogger blog.

Guide to add Blogger Contact form in separate page using Foxyform

Step 1: Select the required field that you want to include inside your form. For example I want to add Name, Email and subject therefore I will select those fields.

 blogger contact form in contact us page

Step 2: Select the color of your form according to your website color scheme or leave it as default.

foxyform contact us form

Step 3: Insert the email address where you want to receive your message and type the captcha  and then click on Create Formular

foxyform contact us form

 

Now you will receive a code for your contact us page copy that  code and go to your blogger dashboard.

foxyStep 4: Create a new page from Pages>New Page and give the title as Contact Us.

creating page in blogger

Step 5: Edit the page in HTML mode and paste the code that you have copied already.

blogger contact us form

Save it and now you have added a perfect working  blogger contact form in contact us page. Below you can see the screenshot of its demo message.

Contact us form test

 

Video guide to add blogger contact form

Guide to add Blogger Contact form in separate page using kontactr

Kontactr is another similar free tool as foxyform but in kontactr you need to sign up for an account to create a contact form however in foxyform you can add a contact form without creating any account.

Now, let’s get started by creating an account.

Step 1: Create an account at kontactr  just by clicking sign up now button located at the middle of the page and then fill the required details to create an account.

add blogger contact form inside contact us page using kontactr

Step 2: Verify your account by clicking on the link sent to your email.

Step 3: After verifying your account login into your account by typing the username and password that you have created while signing up for kontactr account.

Step 4: Now, after logging in you will see the an Ajax widget box with javascript code. Just copy that code and follow the same procedure that I have mentioned for adding foxyform code.

add blogger contact form inside contact us page

Step 5: Finally after adding the javascript code in your blogger contact us page you will get another working blogger contact us form

add Blogger Contact Form in Contact us page

3. Foxyform Vs Kontactr which one is best

i. You do not need to sign up in foxyform to create a contact us form however in kontactr you need to create a account.

ii. Both of the services offer captcha to prevent spamming bots from sending spam emails in your inbox but foxyform offers more advance captcha service then kontactr.

iii. Both of the services offers to customize your contact us form according to your color scheme however kontactr also offers different kinds of buttons that can be added in the sidebar and whenever someone click on the sidebar the contact form pop us instantly.

iv. In kontactr you will also get a contact form url, like mine is http://kontactr.com/user/tirtha1993 which is impossible in foxyform.

Conclusion

However, you can add the default blogger contact form in the sidebar of your blog but I don’t think its good practice to add a contact form in the sidebar. Since, you need some coding to add that form inside of contact us page and to replace that issue I used foxyform as an alternative of default contact us form.

Guys, this is an updated post and I have added kontactr as another method to add Blogger Contact Form in Contact us page therefore guys if you find this post useful please share this post with other budding bloggers so that they can also learn to add a working contact form in blogger.

 

 

 

 

I make $400 a Month from this Blog.
If you are interested on learning how I am earning $400-$500 a month sign up now to receive updates.
I agree to have my personal information transfered to MailChimp ( more information )

31 Comments

  1. Sushant

    Thanks, Tirtha you showed a perfect way to add a contact form in blogger contact us page. I had never expected that I can add a contact form without any coding.

  2. At last I got the working contact form ! Thanx for sharing the information ! 🙂

  3. Manish Shokeen

    u helped me bro, if u need any help, plz tell me 🙂

  4. Supam

    You rock ! This is the best and the most interesting contact form service without registration and it’s really easygoing. It is most suitable for those whose send or submit button does not work at all in Blogger.

    But, only problem is with its 350px width which is not good looking for responsive websites when viewed from different devices. Any solution to this?

    • Thanks Supam, Since foxyform provides javascript as a code to insert inside your page I don’t think there is any solution for this problem.

      • Thank you very much for this information. It was very easy to set up with. Now i have a contact us form from foxy form.

  5. Cathy

    Thank you for writing this tuturial. I have found other ones but there was always something wrong with the coding. I love that this contact form comes with an anti-spammer element.

  6. Tasha

    Bravo! The default Blogger contact form does not work on my site, but this one does! Thanks!

    • I am currently using foxy forms in my website and It looks great. Moreover it is one of the best blogger contact form I have ever used.
      Thanks Tirtha for this guide to add contact us form in separate page of blogger.

  7. avi

    i follow your steps..its working on normal blog like testblog.blogspot.com..
    but not working with custom domain..i tested on 2 custom domains but no result..i tested on to blogger blogs, it was working fine…y contact form not working with custom domain? please help me

    • @Avi
      Since, foxyform uses javascript therefore it doesn’t depends upon the domain you use but you can try regenerating another form.

  8. Yes! At last. I tried the other method editing my css and adding a code etc and messages weren’t coming through.

    I just followed your instructions and added this Foxy code and… beautiful, baby – messages are coming through now, and practically instantly! 🙂

    Thank you very much for this.

  9. Khizar

    Thanks @Tirtha,
    I Do The Same On My Blog droidpaidapk.blogspot.com
    Thanks For This Awesome Tutorial (y)

  10. i did the above procedure exactly. but when i used to test it by sending a email to me from an another email, i got no messages (checked all the folders in my email). What could be the reason?

    • Hi, Piyush did you watched the video that I have embedded here in this post and did you checked your spam folder? Some time it may also take several minutes to arrive.
      If you are again facing the same problem than please mention it below, I will probably try to solve your problem.

  11. Which font you are using for this website? and Thanks for sharing this awesome trick i had also posted this trick to add blogger contact us form on my site.

  12. Really, You have solved my big problem right now in just 4 minute, while I have added Contact Form to my blog page .

    Thanks

  13. This is really great, the tutorial is very simple to follow. I used the foxyform to enter mine and it was really great and awesome. Thanks admin. Cheers

  14. aks

    How can i find query of contact form where a data of user gone how can i see this

    • You will directly receive your query in the email address you have provided while registering.

  15. Hey TIRTHA OJHA,
    The post was really good, man. Can’t tell you how grateful I am. But then again, do you have any other sites who lets me customize the form a bit more?
    Previously I went to mailchimp.com and one other site but couldn’t figure out what to do.
    So, if you have to offer any other site which will be as easy to use as Foxyform or Kontactr then it would be even greater!
    Waiting for your response.

    • Hi, Joh I can see that you are using Blogspot platform, and I am sorry to inform you that Blogspot cannot be tailored according to our need. I suggest you migrate to self-hosted WordPress site. Just get a new web hosting and domain name and I will help you to migrate your website.
      I don’t think there are other sites like foxyform.

  16. Hi TIRTHA ,

    I’m new to blogging so need this tips for my blogger blog.I have tried this and found very useful as I got my contact form.

Leave a Reply