8 June 2013

Add Customized Contact Us Form On Blogger

// // 50 comments


Add Contact Us Form On Blogger Blogger just recently launched their contact form by which you can easily contact and send your questions and queries to the admin OR author of the blog / site and this very helpful for admins be'coz many professional bloggers had to purchase the hosting and then they created their own contact form by using PHP languages OR many of us use free third  party contact form  where we have create account and also had to spend long time to create them but after all you couldn't get any professional look but in today's tutorial you will easily design your contact form in just 5 min with free cost and it will for life long. 




Live Demo




Add Contact Form On Blogger

  • Login to Blogger > Dashborad
  • Click on Drop Down Menu and select Layout
  • Add Gadget
  • Click on More Gadget
  • Select Contact Form


  • Now Give a Name to your Contact Form as we recommend you should give Contact Form



  • Now save it.

Customize Contact Form

  • login to Blogger > Dashborad
  • Click on Drop Down Menu and select Template
  • Backup your Template before making any changes to your blog
  • Now Search for </head>
  • Paste below code just before </head>



<style>/*---- Compatible contact Form by TTH -----*/.contact-form-name, .contact-form-email, .contact-form-email-message { max-width: 220px; width: 100%; font-weight:bold; } .contact-form-name { background:#FFF url(http://2.bp.blogspot.com/bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 8px; background-color: #FFF; border: 1px solid #ddd; box-sizing: border-box; color: #A0A0A0; display: inline-block; font-family:Arial,sans-serif; font-size: 12px; font-weight:bold; height: 24px; margin: 0; margin-top:5px; padding: 5px 15px 5px 28px; vertical-align: top;} .contact-form-email { background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/s320/email.png) no-repeat 7px 10px; background-color: #FFF; border: 1px solid #ddd; box-sizing: border-box; color: #A0A0A0; display: inline-block; font-family: Arial,sans-serif; font-size: 12px; font-weight:bold; height: 24px; margin: 0; margin-top: 5px; padding: 5px 15px 5px 28px; vertical-align: top;}.contact-form-email:hover, .contact-form-name:hover{ border: 1px solid #bebebe; box-shadow: 0 1px 2px rgba(5, 95, 255, .1);padding: 5px 15px 5px 28px;}.contact-form-email-message:hover { border: 1px solid #bebebe; box-shadow: 0 1px 2px rgba(5, 95, 255, .1); padding: 10px; }.contact-form-email-message { background: #FFF; background-color: #FFF; border: 1px solid #ddd; box-sizing: border-box; color: #A0A0A0; display: inline-block; font-family: arial; font-size: 12px; margin: 0; margin-top: 5px; padding: 10px; vertical-align: top; max-width: 350px!important; height: 150px; border-radius:4px; }.contact-form-button { cursor:pointer; height: 32px; line-height: 28px; font-weight:bold; border:none; }.contact-form-button { display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); } .contact-form-button:hover { text-decoration: none; } .contact-form-button:active { position: relative; top: 1px; }.TTH-btnLogin{-moz-border-radius:2px; -webkit-border-radius:2px;border-radius:15px;background:#a1d8f0;background:-moz-linear-gradient(top, #badff3, #7acbed);background:-webkit-gradient(linear, center top, center bottom, from(#badff3), to(#7acbed));-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')";border:1px solid #7db0cc !important;cursor:pointer; padding:11px 16px;font:bold 11px/14px Verdana, Tahomma, Geneva;text-shadow:rgba(0,0,0,0.2) 0 1px 0px; color:#fff;-moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px; -webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px; margin-center:12px; float:center; padding:7px 21px;}.TTH-btnLogin:hover,.btnLogin:focus,.btnLogin:active{background:#a1d8f0;background:-moz-linear-gradient(top, #7acbed, #badff3);background:-webkit-gradient(linear, center top, center bottom, from(#7acbed), to(#badff3));-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')";}.TTH-btnLogin:active{ text-shadow:rgba(0,0,0,0.3) 0 -1px 0px; }</style><!--[if IE 9]> <style> .contact-form-name { background: #FFF url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 0px; }.contact-form-email { background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/s320/email.png) no-repeat 7px 6px; }</style> <![endif]--> <style> @media screen and (-webkit-min-device-pixel-ratio:0) {.contact-form-name { background: #FFF url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 6px; padding: 15px 15px 15px 28px;}.contact-form-email { background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/s320/email.png) no-repeat 7px 8px; padding: 15px 15px 15px 28px;}.contact-form-email:hover, .contact-form-name:hover{ padding: 15px 15px 15px 28px; }.contact-form-button { height: 28px;}}</style>



  • Now Save it



Add Contact Form On static Page

  • Login to Blogger > Dashborad
  • Click on Drop Down Menu and select Pages
  • Click on New Page 
  • Select Blank Page



  • Now Click on HTML an Paste below code in it.




<div class='form'> <!-- Custom Contact Form By TTH Starts --> <form name='contact-form'> <!-- Name Field --> <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' /> <p></p> <!-- Email ID Field --> <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/> <p></p> <!-- Message Field --> <textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' value='Leave Your Message..' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}' onfocus='if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}'></textarea> <p></p> <!-- Clear Button --> <input class='TTH-btnLogin' type='reset' value='Clear'/> <!-- Send Button --> <input class='TTH-btnLogin' id='ContactForm1_contact-form-submit' type='button' value='Send'/> <p></p> <!-- Validation --> <div style='text-align: center; max-width: 222px; width: 100%'> <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p> <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> </div> </form> <!-- Custom Contact Form By TTH Ends --> </div>



  • Now publish that page.

Hide Contact Form From Sidebar




  • Now here comes the part how to hide that contact form from sidebar or layout widget. Login to Blogger > Dashborad Click on Drop Down Menu and select Template Backup your Template before making any changes to your blog. Now search for the id "ContactForm". expand the widget by clicking on the black arrow on the left (same with the includable) and then delete the part that we have coloured in red (see below):




  • Part to be removed:

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'> <b:includable id='main'> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if> <div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <p/> <data:contactFormNameMsg/> <br/> <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/> <p/> <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span> <br/> <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/> <p/> <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span> <br/> <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/> <p/> <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/> <p/> <div style='text-align: center; max-width: 222px; width: 100%'> <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/> <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/> </div> </form> </div> </div> <b:include name='quickedit'/> </b:includable> </b:widget>
  • Next search for  </head> and above it paste the below code

<style> #ContactForm1{ display:none!important;} </style> 





  • Now save the template.
So here you get your newly made customized contact form widget provided by blogger.Take a look on your widget and share your view about this with us.

Articles You May Like

50 comments: Leave Your Comments

  1. This does make contacting you easier for your readers.

    ReplyDelete
  2. Contact forms are very essential to any blog or website. Thanks for sharing! :)

    ReplyDelete
  3. Honestly, I don't like to use Google Contact Form because it has no ANTI-SPAM PROTECTOR. That is why I have a post about this http://www.palraine.com/2013/05/a-free-contact-form-for-blogger-with.html

    ReplyDelete
    Replies
    1. Yes that is one of the biggest drawback of this contact form.hope blogger will introduce that feature soon.

      Delete
  4. This is very useful :) Contact forms are a great way to reach a blogger :)

    ReplyDelete
  5. Awesome Share Debarpan Brother :)
    Will Must Add This Contact Form in My Blog!
    Thanks (y)

    ReplyDelete
  6. it is an awesome form...
    I have tried it on my blog..
    u can see it here
    http://www.totalmedianews.com

    ReplyDelete
    Replies
    1. just checked your blog,it's working nice there.thanks for giving this a try. :)

      Delete
  7. Thanks Dbarpan Works great! This is the first blog I have ever subscribed by email to :P

    Check out my blogs zetasilon.blogspot.com

    wemakeblogs.blogspot.com

    ReplyDelete
    Replies
    1. Thanks buddy for giving us such priority :) Checked you blog.

      Delete
  8. Thanks! This was a great help!

    ReplyDelete
  9. I've done all the steps and the contact form link shows beautifully. My problem is that the 'submit' button doesn't work. The message is not sent. So, i am not sure what am I missing? Can anyone help me?! I feel there is a missing link between the contact form and where I want the messages to be sent to.

    ReplyDelete
    Replies
    1. Please give us your blog url,so that we can check this out. :)

      Delete
  10. Hello Debarpan, thank you for your quick response. My url is www.gr8tdesigns.com . Any help will be much appreciated. :)

    ReplyDelete
    Replies
    1. The problem is you are using blogger dynamic view template,revert it to simple and then try this out.Hope now it'll work fine with you. :)

      Delete
    2. Hi Debarpan, Thanks for the advice. I didn't realize that Dynamic Views template was the underlying problem of many changes I tried to apply and never worked! What a shame...thanks a lot.

      Delete
  11. We are not receiving any emails, then where the emails are going to ?

    ReplyDelete
    Replies
    1. I guess you have done something wrong while inserting the code just remove it all and reinsert. :)

      Delete
  12. nice trick......how to add custom domain email address in contact form to receive the email

    ReplyDelete
    Replies
    1. We'll discuss about it in our coming tutorials,so stay connected :)

      Delete
  13. hey i cant found the contact for in "more widgets"
    please help me
    thanks

    ReplyDelete
    Replies
    1. It's just at the top,check it out more carefully.

      Delete
  14. Can we Add another Field? like Phone number?

    ReplyDelete
  15. Very well explained! Thanks :)

    ReplyDelete
  16. Thank for help Debarpan. I implemented it successfully.

    ReplyDelete
  17. this is very useful information i will add on this my blog page thankyou very much my blog url www.hdforwall.blogospot.com

    ReplyDelete
  18. Hey. I tried this, its working. But it leaves a blank rectangle behind. In LAYOUT, I placed the CONTACT FORM gadget below POPULAR POSTS. I followed all above steps. Saved the work after deleting the code from HTML Template. When I viewed blog, I could see a small rectangle placed right below POPULAR POSTS. It has no heading or any content. Do you know what must be the problem?

    ReplyDelete
  19. Sorry, was a bit busy. Here's the URL http://ecomaffiliates.blogspot.in/p/contact-us_7.html
    I placed CONTACT FORM widget below POPULAR POSTS in LAYOUT.
    Check the right side of the blog. A small empty box.

    ReplyDelete
    Replies
    1. Checked your blog,it's happening due to your template.You can also see the same error occuring in your blog in case of popular post widget and navbar widget as well.First fix that error then try.

      Delete
  20. Hi installed the contact form on my page but how can i retrieve the messages sent to me

    ReplyDelete
  21. oops sorry dont worry it was going in spam mails should have checked it is there way that my contact from mails dont to my spam folders ...

    ReplyDelete
    Replies
    1. You need to change your mail settings buddy :)

      Delete
  22. very nice thanks a lot for sharing
    how can I change the color of the form and the direction of the text right to left?

    ReplyDelete
    Replies
    1. To change the background colour of contact form,search for '#ffffff' and change it to your desired colour and for text search for 'text-align:centre' code and change centre as per your desire.

      Delete
  23. Hi.. Thanks for this great tutorial.
    I have installed it also on my blog. Here it is, take a look.
    http://vehicleinfomagazine.blogspot.com/p/contact-us.html

    btw, can you do something about the "Send Thing"? I think it would be great if after pressing the "Send Button" there will be a message saying the something like "Message Sent" and the text boxes would be automatically cleared.

    And there is a problem, I don't receive the messages. I tried it a lot of times.

    Thanks again..

    ReplyDelete
    Replies
    1. You just need to check the spam folder of your mail id for those messages.

      Delete
  24. thanks a lot .. its helpful.. :)

    ReplyDelete
  25. thank you bro it is done ! bundle of thanks...
    http://i-rashid.blogspot.com/

    ReplyDelete
  26. Great method! Thanks for posting.

    ReplyDelete
  27. Iss work good but
    after 1day give me error
    Message could not be sent. Please try again later. ?

    ReplyDelete
  28. i installed the contact form on my blog and check it but i can't retrieve any messages


    ReplyDelete
    Replies
    1. You need to check the spam folder of your mail inbox.

      Delete
  29. I am a beginner for the blog spot. And your tutorials helping me lot... You are doing great job.... And Contact Form is perfectly working.......

    ReplyDelete