331A96E0-3037-43FC-8D93-543B900B11C9

😍 Loving this theme? Download

Please enter at least 3 characters.

Add Blogger Contact Form to Any Static Page

Blogger allows to add a simple contact form to sidebar or footer via layout settings. We can use that code to create a professional contact form page.
Add Blogger Contact Form to Any Static Page
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

Update 2:

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 twistblogg.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 social medias. :) Stay Blessed!

Share this post

Explore more articles by Satbir

80 comments

Please leave comments related to the content. All comments are highly moderated and visible upon approval.

Comment Shortcodes

  • To insert an image, add [img]image_link[/img]
  • To insert a block of code, add [pre]parsed_code[/pre]
  • To insert a link, add [link=your_link]link_text[/link]
  • To insert a quote, add [quote]quote_text[/quote]
  • To insert a code, add [code]parsed_code[/code]
  1. Thank you in millions time, i just created my own contact form is very superb
  2. Wow!! Great Article... I am a Tech lover and I really appreciate your work...

    btw also check my blog :
    Mobile Deals
  3. Thanks for the help!
  4. Dear Sir,
    followed your tutorial through out but don't able to get messages from the contact form even though it shows submitted successfully.
    please review my blog at www.manakavitalu.com
  5. Nohhh,,,, Not working tried many times. advanced-excel-solved.blogspot.in
  6. Wow, this works very well for me, thanks for this bro...And please can you write a post on how to create a guest post page using contact form, i think that would also be great...


    thank you once again.
  7. You are my go to guy whenever I think about doing something to my blog. Upgraded from the old contact form to this truly professional one.
  8. I tried to do it but I can't find the code, I even searched just "skin" and nothing comes up, any idea what can be happening? Thank you!
  9. THANKS!!! IT WORKED ON MY BLOG
    https://mmtwhiz.blogspot.com
    NOW TELL ME PLEASE HOW TO ADD A BUTTON THAT MOVES THE PAGE TO THE TOP LIKE IN YOUR BLOG??
  10. thanks,it was too easy and simple..
  11. Thanks for this, I have done it on my blog, www.dollarground.com
  12. 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
  13. Thank you!!!!!!!!!!!!!
  14. 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/
  15. This is the only code that has worked for me. Thank you so much.
  16. i can't change in my blog contact form background colour how can i change it.
    http://zed-tech.blogspot.in/

  17. 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
    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.
  18. 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.
  19. please how can I make the side transparent. Mine is white.
  20. Nice one. I'll give it a try.
  21. Thanks! This was awesome & you made it incredibly easy for us :)
  22. Thanks so much
  23. 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...?
  24. men why ths code aper on my blog pages after add contact form pls help me to find out
  25. 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
  26. Thank you so much this article is so much helpfull to me thanls alot bro
  27. I love it thank you!! :)
  28. 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"'/>*"
  29. Awsooome information in post thanks very much for the sharing these information
  30. 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!
  31. Thank's work for me
  32. 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
    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".
  33. thank you very much i added it.
  34. 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
  35. Very Good i used this on my blog Thank You So Much Bro
  36. hey.. it's not working in my blog.. http://aliraihan.blogspot.com/
  37. 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
  38. Thanks man. Please if their is anyway to make that thing transparent pleaes let me know.
    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 :)
  39. 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.
  40. Thanksss
  41. Thanks
  42. tenx xo much pls check my blog here
  43. 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....
  44. 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
  45. Thank you!
  46. 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
  47. 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!
  48. 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?
  49. Thank you! very helpful.
  50. AMAZING POST DEAR, THANKS FOR SUCK A LOVELY CONTACT FORM

    REGARDS: WWW.MASTFUN4U.COM
  51. very helpful. thank you
  52. Thank You^^
  53. how do i justify the form to the right?
  54. Thx, it works
  55. wow....
    i am just looking for this...
    awesome this...
    thanks to share
  56. thanxxx bro love this post.........



    www.techmash.in
  57. i have to say, the best article out there with variation on this topic. I did try to find one. Thanks a lot!!!
  58. 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!
  59. Thanks it really save time
  60. Thanks bro
  61. thanks so much! this is very helpful! i subscribe on your mail list :)

    The Girl with the Muji Hat
  62. Hi ,

    SATBIR PATIAL

    Thanks for providing great information, it hepls me alot.

    I am using this code for my site.

    http://www.flockblogger.in

  63. I will use these code for my site : www.positivecoloumn.co.in Thanks Buddy :)
    1. Hi,

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

      Thanks in advance

      Ash
    2. Ash :: Sorry buddy but I did not get you? Can you please provide more information?
  64. Thanks bro
  65. Hi,
    SATBIR PATIAL

    not working for me...
    check out my link http://vidztovidz.blogspot.com/p/blog-page.html
    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
  66. All the links are working fine bro.
  67. 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
    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 :)
    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"
    3. Naman :: Yes bro, I rechecked had it after few minutes and left a comment too (On SEO Cheat Seat Post) :)
    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.
    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


Post a Comment