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. 

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 )
Comments
  1. Posted by Sushant
    • Posted by Tirtha Ojha
  2. Posted by ganesh yadav
  3. Posted by Techunveils
  4. Posted by Manish Shokeen
  5. Posted by Supam
    • Posted by Tirtha Ojha
      • Posted by Efe Ofiriki
  6. Posted by Cathy
  7. Posted by Tasha
    • Posted by Hassnain Jamil
  8. Posted by avi
    • Posted by Tirtha Ojha
  9. Posted by Danny Gibson
  10. Posted by Paul
  11. Posted by Khizar
  12. Posted by piyush sharma
    • Posted by Tirtha Ojha
  13. Posted by piyush sharma
  14. Posted by hamza
    • Posted by Tirtha Ojha
  15. Posted by karma
  16. Posted by Moses Joseph
    • Posted by Tirtha Ojha
  17. Posted by aks
    • Posted by Tirtha Ojha
  18. Posted by Ashish Yadavarao Kamble
  19. Posted by Joh El
    • Posted by Tirtha Ojha
  20. Posted by Ravinder

Leave a Reply