Add Blogger Contact Form to Any Static Page

SHARE
Add Blogger Contact Form To Separate Page
Adding a contact form to blogger blogs was a tedious task earlier before until Blogger has released its official Contact Form Gadget. Blogger blogs were missing one major feature therefore either we had to use third party services like as JotForm or else no choice thus no contact form. But now it takes only a few clicks to add blogger contact form Gadget from Blogger's large Gadgets library into sidebar or footer of one's template layout. But still most of the people want to add blogger contact form to a specific dedicated contact us page rather than as a sidebar or a footer widget. We are going to deal with it thoroughly in this tutorial.

Why Blogger's official contact form is better than any other third party services?

This is simply because of its incredible features like as:
✔ Fewer options and its hassle free neat and clean design.
✔ Instant message delivery. We receive our message as soon as someone sends it.
✔ No page reload. When we click on send message button, we don't get any page reload because contact form Gadget works on page and user receives the success message notification just below the button.
✔ Easy Customization using CSS like as text, color, width or height.
✔ We can install it on any specific/static page instead of sidebar or footer.
✔ Trust factor. This is straight from the blogger itself and we need not to worry about anything.

Important Update:- New Version of Blogger Contact form is available which is more Professional, Responsive and Better so visit new article - Add Blogger Contact Form to Pages - Pro and Responsive Version

Demo Screenshot

Blogger Contact For On Page Demo

I have customized it thoroughly as much as I could and gave it more elegant look. One more thing I have added is that it will appear it the center of the page (not in left side or right side) and it is fully responsive so you need not to worry about that.

If you liked my design then we shall move on to adding our blogger contact form to a separate page of our blog. :)

Adding Blogger Contact Form to Separate Page of Your Blog

Important Note:- So now we are going to add contact form to blogger page step by step but before doing it, I want you to uninstall/delete this widget if you have it already installed into sidebar or footer and it does not work for you. If it is working good, but you just want to move it to a separate page then continue as it is.

Add Contact Form Gadget From Blogger Gadgets Library

If it is the first time you are going to install it then just follow the steps given below but if you have already installed it into sidebar or footer then just skip this step:

✔ Go to Template > Layout > and in the Sidebar, click on Add a Gadget link. Wait for the popup box to load.
✔ Now by default, you'll see Basics Gadgets list and to see Contact Form, just click on More Gadgets link in right side below the Basics. To understand things better, just check out the image below and follow the steps one by one.

Adding Contact Form Gadget From Gadgets Library


Hiding Blogger Contact Form Widget From Sidebar

Now we have successfully added the contact form but we need to hide it from appearing in the sidebar. This step is must otherwise you will see it appearing in the sidebar too.

✔ Go to Template > Edit HTML
✔ Click inside template code box and press Ctrl+f on Windows or Cmd+f on MAC to open a search box
✔ Find out this little piece of code ]]></b:skin>
✔ Now paste the CSS code given below just before the above code line
div#ContactForm1 {
  display: none !important;
}
Now save your template code as we are done with hiding our contact form on the sidebar. Now it will not be appearing there so move on to next step below

Adding Contact Form to a Separate Page

Now we need to create a new blog page and name it Contact us or Contact me in the title field to get the same permalink of it. To create a new page just follow the steps below:

✔  Go to Pages > and click on New Page link (see the image below)

Adding A New Page To Blogger Blogger


✔  First of all without doing anything else, type in the title what exactly you want your contact page URL permalink. For me, I added contact us so I got my permalink as twistblogger.com/p/contact-us.html be careful because you can not change it later.

✔  Now turn on the HTML mode on page editor by clicking on HTML button right side to the Compose button and remove the HTML code lines appearing there. Press Ctrl+A and hit the backspace button on your keyboard to clear everything.

✔  Change the page settings from right side of the page exactly as shown in the image below:

Change Blogger Blog Page Settings


✔  Now Paste the whole Code given below into the HTML editor (after removing every existing code line inside the HTML editor).

<div dir="ltr" style="text-align: left;" trbidi="on">
Here Goes Your Contact Page Message To Visitors or Else Delete it.
<br />
<style>
.twist_blogger_cntct_form_wrap {
  margin: 0 auto;
  max-width: 840px;
  padding: 0 10px;
  position: relative;
  background-color: #FDFDFD;
}
.twist_blogger_cntct_form_wrap:after, .twist_blogger_cntct_form_wrap:before {
  content: '';
  display: table;
  clear: both;
}
/*----Change Contact Form Background Color Here----*/
div#twist_blogger_cntct_form {
  padding: 20px 20px 10px 20px;
  background: #FA540B;
  border-radius: 2px;
  margin: 20px auto 20px;
  color: #FFF;
  font-size: 16px;
  max-width: 260px;
}
input#ContactForm1_contact-form-name, .contact-form-email, .contact-form-email:hover, .contact-form-email:active, .contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover {
  padding: 5px;
  box-shadow: none!Important;
  min-width: 186px;
  max-width: 260px;
  width: 100%;
  border: 0 !important;
  line-height: 1em;
  min-height: 31px;
  background: #FCFCFC;
  margin-bottom: 15px;
}
/**** Submit button style ****/
.contact-form-button-submit {
  background: #FA540B;
  font-size: 20px;
  letter-spacing: 2px;
  cursor: pointer;
  outline: none!important;
  color: #FFFFFF;
  border: 2px solid rgba(255,255,255,1);
  border-radius: 50px;
  min-width: 186px;
  max-width: 260px;
  width: 100%;
  text-transform: uppercase;
  height: 46px;
  margin-top: 10px!important;
  transition: all 300ms ease-;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
}
/**** Submit button on mouse hover ****/
.contact-form-button-submit:hover {
  border: 2px solid;
  color: #FFFFFF;
  background: #EF4800 !important;
}
/**** Submit button on Focus ****/
.contact-form-button-submit:focus, .contact-form-button-submit.focus {
  border-color: #FFFFFF;
  box-shadow: none !important;
}
/**** Error message and Success Message ****/
.contact-form-error-message-with-border .contact-form-success-message {
  background: #f9edbe;
  border: 1px solid #f0c36d;
  bottom: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  color: #666;
  font-size: 12px;
  font-weight: bold;
  padding-bottom: 10px;
  line-height: 19px;
  margin-left: 0;
  opacity: 1;
  position: static;
  text-align: center;
}
</style>
<br />
<br />
<div class="twist_blogger_cntct_form_wrap">
<div id="twist_blogger_cntct_form">
<form name="contact-form">
Your Name<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Enter your name here..." size="30" type="text" value="" /><br />
<br />
Your Email*<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Enter your email here..." size="30" type="text" value="" /><br />
<br />
Your Message*<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Write your message here..." rows="5"></textarea><br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /><br />
<div style="max-width: 260px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<br />
</div>
</div>
</div>

✔  Publish your page now and check it out. Send yourself a message to confirm that blogger contact form is working or not. You should receive your message as soon as you hit the send button. It must be working for everyone, I hope so.

Some frequently asked questions you might be curious to know are answered below but if you have more questions then add them in comments, I'll reply you there.

Some FAQs About Blogger Contact Form Gadget


Question No. 1 - Where will these messages go?

Answer: Whenever someone sends you a message from your blog's contact form, it will be delivered to the email address of the blog admin instantly. If your blog has more than one blog administrators then the messages will be sent out to all of them. In case you want to add a new blog administrator to your blog, then just go to Settings > Basic > Add Authors and invite anyone using his/her email address. He/she will receive an email from blogger and as soon as he accepts your invitation, he will appear in the authors list from where you can mark him as an administrator.

Question No. 2 - Can I add/alter customs fields of blogger contact form?

Answer: Somewhat yes, you can do it if you're good into JavaScript but that is beyond the level of my expertise area. :) So in my case I can not do this. I hope someone will come up with this twist and Google will help you in finding that tutorial.

Question No. 3 - Will adding blogger contact form to a separate page affect the SEO of my blog?

Answers: No, it will certainly not. Although its always good to be on the safe side so you can add few lines on the contact page. You can check our Contact Us page for reference.

Question No. 4 - Why should I use Blogger contact form on a specific page rather than on sidebar?

Answer: It depends on you, the blog administrative but its always good to have a special dedicated page and visitors always expect that there will be a contact page on your blog where they can contact you and for that, they look at the Navigation bar of your blog for a link. It gives your blog a professional touch. Believe me, these things do work when it comes to credibility. On a separate page, you can also add some guideline to your visitors before they fill up the form and send you a message.

Question No. 5 - Why blogger contact form is not working? Even after the success message notification?

Answers: There may be a lot of reasons for it that like as you did not check the email account which is associated with your blogger blog or else you did not install it properly. In this case, just remove the contact form widget from your blog and re-install it again or else add your blog URL in comment box and I'll surely check it out if you want it.

You may have some more personal questions and you can ask me in comments below the post. I'll catch you there.

Finally I did my best and if still you are facing some problems then let me know so that I can guide you thoroughly. Leave your blog address in comments and I will check it for sure. And please if you have little time, do me a favor by giving me the feedback on it as it will be helpful for me to ensure that blogger contact form working perfectly.

You can support this blog by socializing on Facebook, Google Plus and Twitter. :) Stay Blessed!
Author

Article By: Satbir Patial

I manage this blog and post tutorials related to Blogger, SEO, Plugins, Widgets, Software Tools, CSS/HTML and Social Media. Did you find this blog helpful? Would You Please Socialize? Thanks for Your Support Buddy :)


Stay connected, You'll not be disappointed!

73 Replies so far - Join Conversation

  1. Hello, thanks for providing this amazing widget. I have also published one Contact Us widget, but it is a dynamic one not static. It is a floating contact us widget for blogger blogs please view it, you will find it pretty and attractive. I have published this widget on my blog- Blogger easier . You can contact me at naman@outlook.in

    ReplyDelete
    Replies
    1. Naman Kumar :: Thanks for leaving your comment. And hey, Right now your blog is displaying the whole CSS code, nothing else. I guess you must be playing with its template code :)

      Delete
    2. Hey please recheck it. Its working fine. Or you can directly visit the post- How to Add a Floating Contact Us Widget in Blogger" Also get the latest news about the revolutionary development by MBT for blogger- "Blogger Shortcode Plugin Finally Released By MBT"

      Delete
    3. Naman :: Yes bro, I rechecked had it after few minutes and left a comment too (On SEO Cheat Seat Post) :)

      Delete
    4. Oops! I made a typo mistake in above comment "I rechecked had" lol

      It was "I had rechecked it :)

      And bro, you did a mistake too, Just check out the URL of the post you shared in above comment, link is back to your comment. Second one is working perfect.

      MBT is an ultimate blog and I don't have words to say about Muhammad sir, Awesome.

      Delete
    5. Best Article on How to add contact form in blogger blog

      http://www.baatkar.com/2015/10/how-to-add-contact-form-in-blogger-blog.html

      thanks


      Delete
  2. All the links are working fine bro.

    ReplyDelete
  3. Hi,
    SATBIR PATIAL

    not working for me...
    check out my link http://vidztovidz.blogspot.com/p/blog-page.html

    ReplyDelete
    Replies
    1. Haseeb Sheikh :: hello buddy, A new tutorial is landed already which is more professional looking version of Blogger Contact form <----- Please follow this link

      Delete
  4. I will use these code for my site : www.positivecoloumn.co.in Thanks Buddy :)

    ReplyDelete
    Replies
    1. Hi,

      Could you please advise me how to implement this at 10% width?

      Thanks in advance

      Ash

      Delete
    2. Ash :: Sorry buddy but I did not get you? Can you please provide more information?

      Delete
  5. Hi ,

    SATBIR PATIAL

    Thanks for providing great information, it hepls me alot.

    I am using this code for my site.

    http://www.flockblogger.in

    ReplyDelete
  6. thanks so much! this is very helpful! i subscribe on your mail list :)

    The Girl with the Muji Hat

    ReplyDelete
  7. Thanks it really save time

    ReplyDelete
  8. Thank you so much for this. I was attempting to do another one which consisted of editing the blogger coding ... pain in the butt! :) I couldn't find one of the areas of coding that the other tutorial listed. Yours is so much easier.
    Thanks!

    ReplyDelete
  9. Anonymous04:44

    i have to say, the best article out there with variation on this topic. I did try to find one. Thanks a lot!!!

    ReplyDelete
  10. thanxxx bro love this post.........



    www.techmash.in

    ReplyDelete
  11. wow....
    i am just looking for this...
    awesome this...
    thanks to share

    ReplyDelete
  12. how do i justify the form to the right?

    ReplyDelete
  13. HELLO, I used your step by step, and it works fine on my contact page! YAY! :) but...LOL.....I can see the
    div#ContactForm1 {
    display: none !important;
    }


    At the top of every page-ALSO-- I can still see a contact form on the bottom of every page, which i wanted to avoid, Thanks for your help blog http://distinctiveidentity.blogspot.com/p/contact.html

    ReplyDelete
    Replies
    1. Chanel Boston :: Hi,
      Make sure you copied that CSS code in right place inside your template as per instructions. Check Below/Above that is where we do mistake most of the time :p

      Delete
    2. Chanel Boston :: Just checked your blog and reason is you have copied that code below the opening body tag in your template. Check the instructions and see what I have said to find and where to paste that code.

      Regards!

      Delete
  14. very helpful. thank you

    ReplyDelete
  15. AMAZING POST DEAR, THANKS FOR SUCK A LOVELY CONTACT FORM

    REGARDS: WWW.MASTFUN4U.COM

    ReplyDelete
  16. Thank you! very helpful.

    ReplyDelete
  17. Question… I want to change the color of my contact for. I was able to change the background, but how do I change the color of the "submit" button?

    ReplyDelete
  18. hi.. I hv successfully installed to my separate page. but the form still appear at my right sidebar. I have copy the code below ]]> Please help. thanks!

    ReplyDelete
  19. Works great on my Arabic site (i did some personal staff of course to make it in arabic :)
    http://www.gilgeek.com/

    Thanks a lot

    ReplyDelete
  20. Anonymous11:06

    Hi, it's not working for me - I tried uninstalling and reinstalling, verifying the admin email, etc. and the emails never make it to my inbox even when i get a success message - please check it out? www.valentinacitadina.com/p/contact.html

    ReplyDelete
  21. How to add Phone Number field in this form. i tried to add phone number field but when i send then phone number is not display on my mail recipient. please help me....

    ReplyDelete
  22. Anonymous12:54

    Thanks

    ReplyDelete
  23. It worked!

    But I wish I could make the side of the form transparent (it is white and doesn't match the backgound of my website). Please take a look at it here.

    ReplyDelete
  24. Thanks man. Please if their is anyway to make that thing transparent pleaes let me know.

    ReplyDelete
    Replies
    1. Near the bottom of the part of the code under the text message "Here Goes Your Contact Page Message To Visitors or Else Delete it", there's this:

      "background-color: #FDFDFD;"

      Change "#FDFDFD;" to "rgba(0, 0, 0, 0);". That'll make the white background transparent and thus invisible.

      You can also use rgba for the background colors of the contact box itself and the send button. The first three numbers in the rgba sequence are just standard rgb (red green blue), and these values can vary from 0 to 255 (i.e. rgb(255, 0, 0) would be bright red). The fourth number is opacity, which can vary from 0 to 1, 0 being entirely transparent and 1 being entirely opaque.

      Have fun :)

      Delete
  25. I see so many other comments with same issue, but I cannot seem to resolve issue either. Send button isn't working. www.daniaborrero.comp/contact-me.html

    ReplyDelete
  26. hey.. it's not working in my blog.. http://aliraihan.blogspot.com/

    ReplyDelete
  27. Very Good i used this on my blog Thank You So Much Bro

    ReplyDelete
  28. Great and easy instructions its working fine and dandy on my full version website but not on the mobile site - can't figure out why when it's the exact same page - any ideas greatly appreciated

    ReplyDelete
  29. thank you very much i added it.

    ReplyDelete
  30. Hey Satbir!

    Great articles! Really helpful.

    I'm wondering - if I want to change the colour of the contact form above to black - how would I go about doing that?

    Thanks,

    Conor

    ReplyDelete
    Replies
    1. In this section:

      "/*----Change Contact Form Background Color Here----*/
      div#twist_blogger_cntct_form {
      padding: 20px 20px 10px 20px;
      background: #FA540B;
      border-radius: 2px;
      margin: 20px auto 20px;
      color: #FFF;
      font-size: 16px;
      max-width: 260px;"

      change the background-color from "#FA540B;", to "rgba(0, 0, 0, 1) to make the background solid, opaque black. You can make it translucent black by changing the "1" at the end to anything from "0.1" to "0.9".

      Delete
  31. Thank's work for me

    ReplyDelete
  32. Thanks very much for this. Looks beautiful. Made a few adjustments to background, border-radius, etc, and I used translucent colors in rgba for the backgrounds. Turned out great. Thanks again!

    ReplyDelete
  33. Awsooome information in post thanks very much for the sharing these information

    ReplyDelete
  34. The contact form works and looks great, thanks! Also for anyone having problems with the form still showing on the sidebar, try adding the CSS code between the contact form widget div tags.

    *After this line--> "p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>*"

    ReplyDelete
  35. I love it thank you!! :)

    ReplyDelete
  36. Thank you so much this article is so much helpfull to me thanls alot bro

    ReplyDelete
  37. Pls let me know what should i will add when the user will submit the form it will go to the thank you message page so what should i add

    ReplyDelete
  38. men why ths code aper on my blog pages after add contact form pls help me to find out

    ReplyDelete
  39. Hi there, what if I want the contact form to reload (I want to measure it as an event in Google Analytics) there is way to do that...?

    ReplyDelete
  40. Thanks! This was awesome & you made it incredibly easy for us :)

    ReplyDelete
  41. Nice one. I'll give it a try.

    ReplyDelete
  42. please how can I make the side transparent. Mine is white.

    ReplyDelete
  43. Hi! Thanks for sharing this awesome piece of work. I'm facing a problem with your static form widget. When I put it in a static page of my blog, It's looking great! But when I trying to send a message for test purpose it doesn't work and no success message come out, Just hang up on 'sending...'. How to resolve this problem?
    Thank You.

    ReplyDelete
  44. Hey, I have read your complete article and followed your exact instructions to add Contact u s page on my blogspot page but once i click on publish nothing happens. Contact us page is not shown on my blog at all. I'm very confused and agitated.
    www.nadiyanajib.blogspot.com

    ReplyDelete
    Replies
    1. Hi Nadiya, I found a "Contact Me" page in your blog, its looking cool. But if you want to add another stylish contact form by twistblogger, which is also a pro version. And I am using this widget in my own blog. This version of contact form is elegant looking and working one. Here it is Add Contact Form To Blogger Pages.

      Delete
  45. i can't change in my blog contact form background colour how can i change it.
    http://zed-tech.blogspot.in/

    ReplyDelete
  46. This is the only code that has worked for me. Thank you so much.

    ReplyDelete
  47. Hi. Lovely post.. But I have added the contact me form on to the blogger but it is not working. Can you please have a look on my blog and advise what went wrong..
    http://homeremedies4everyone.blogspot.in/

    ReplyDelete
  48. Thank you!!!!!!!!!!!!!

    ReplyDelete
  49. Is it possible to have the email sent to a different email then the one connected to the blog sight? If so how would I change that?
    Thank you

    ReplyDelete
  50. Thanks for this, I have done it on my blog, www.dollarground.com

    ReplyDelete