Awesome Contact Form Widget for Blogger

Today I am going to show you how you can add a really awesome and cool looking Contact form in a page of your blogger blog. This contact form looks really elegant and is very eye-catching.

This contact form inspired from Bloggertut works on CSS and has a very rich feel in it.  You can make your Contact page more awesome by adding this widget to one of your blog's pages. A live working demo of this widget can be seen by clicking the below button.



Live Demo

After seeing the demo if you wish to add this contact form in your blog then follow the steps below.

Step 1 : Adding the Contact Form


First of all add a Contact form widget to your blog. To do so go to my post Official Contact Form Widget released for Blogger.
Do not worry about that the widget will be visible everywhere on the blog and our motive is to show contact us form only on a particular page. We will fix it in the second step.

Step 2 : Adding the CSS


Once you have added the Contact form widget go to Blog Title → Template → Edit HTML. Now add the below given CSS code just above ]]></b:skin> .

#ContactForm1{
display:none;
}
#contact_wrap {
margin: auto;
width: 321px;
height: 380px;
padding: 25px;
border-radius: 1em;
border-top:1px solid #dbdbdb;
border-right:1px solid #b2b2b2;
border-left:1px solid #dbdbdb;
border-bottom:1px solid #9d9d9d;
background-color:#cccccc;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
box-shadow: 1px 1px 5px #ccc;
}
#contact_wrap h3{
color: #e8f3f9;
font-family:Georgia;
font-size: 20px;
font-style:italic;
font-weight:bold;
margin: 0 -36px 20px -36px;
padding: 12px;
text-align: center;
text-shadow: 2px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
position: relative;
}
#contact_wrap h3:before {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: #333 transparent transparent transparent;
}
#contact_wrap h3:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #333;
}
#ContactForm1_contact-form-name{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNzVJy5BI0bg8Tw8peaHHI-ReNRSga05jg4a7qoHuajiV0O4shEpx7xUZ-KgTMp7BKa77OD9N7i6DictA3cZsszsbsBzZQezI2bxfDJ7UVnMrb76UWwapHmKE4d1cXwaCx30stEkqNt4M/s1600/user.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA7VYtAl6_UWXxrwKrGR0wiQxhgxb1O78NUhvj0Ms-QlhGq2mBwBePiAAYpIafMeRH4XrzpRuRgYUwGc4Ov6mG2XCtnJSztlXHwrKfZcRYvuXsHQMGeC98nQL90JXTqKgAoKr7wehwkrw/s1600/pen.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email-message{
width: 270px;
height: 150px;
margin: 5px auto;
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCn0GeEzuwW5tD-kyyuJMKZLZYV5-KRRhyphenhyphenJ1KgeYnz3K5n0UCJfZ2V7_BJ_YDlhZix7QaLiUWgO0WSdqsMQyhATYX0oBwvO6bzjW7Ao_51CP9sFDfLfxqwSzk4JlPNonUPvX9nZFYTUvs/s1600/msg2.png)no-repeat 10px 10px;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-submit {
width: 95px;
height: 30px;
float: right;
color: #FFF;
padding: 0;
cursor:pointer;
margin: 25px 0 3px 0 0;
background-color:#005a8a;
border-radius:4px;
text-shadow: 1px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
border:1px solid #194f6d;
}
#ContactForm1_contact-form-submit:hover {
background:#4c9bc9;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin-top:35px;
}

After adding the code save the template.

Step 3 : Adding the HTML in Page


First of all we need to create a new page and to do this firstly go to Blog Title → Pages → New Page → Blank Page. Page editor will open, now click on HTML tab and paste the below given code in it.

<div id="contact_wrap">
<h3>Contact Us</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

<style type="text/css">
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

After adding the above code, publish the page.

You are done now. Now you and your visitors can see this awesome and cool contact form widget in your blog.

21 comments:

  1. Good one. using it on my blog http://www.techandtalks.tk/p/contact-us.html

    ReplyDelete
  2. So nice widget. Thanks for sharing.

    ReplyDelete
  3. nice one, looks like professional :p

    ReplyDelete
  4. This is simply awesome.
    so good , neat and clean man.
    the coolest contact form i have seen on other sites.

    my small blog
    www.parallelblogging.blogspot.com

    ReplyDelete
  5. Simple and minimal. Looks awesome. Thanks for the blogr template custom widget tutorial.

    ReplyDelete
  6. This is really fabulous and nice widget. Even every blogger should add this.

    ReplyDelete
  7. Great contact form widget for blogger. I really like it. i will definately add it in my blog. Thanks for sharing with us and keep sharing

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. Hi there,

    I love the idea of this contact form, but I'm wondering, if someone leaves a message in this form, how will I receive that message exactly?

    Hope I get a reply soon, thanks!

    ReplyDelete
  10. Sorry, just read your other post on "Official Contact Form Widget released for Blogger" so you can ignore the question in my previous comment. I will be trying this trick, thanks again!

    ReplyDelete
  11. Very Very nice. Its working is awesome really.Thank you so much sir.
    I'm using it here "http://www.basics2eng.com/p/projects.html"

    ReplyDelete
  12. really nice widgets, mine is there but does not redirect to my mail, need help with that............

    ReplyDelete
  13. But how to add my email on submit button where send this message.

    ReplyDelete
  14. Plz help my submit button not work and message not send.......

    ReplyDelete
  15. Hai sir . I searched in my template which is responsive for " ]]> " buti didnt find it.Now what should be my step sir

    ReplyDelete
  16. Hey, just added it and everything looks fine, just the "send" button doesn't work - when I click it, nothing happens. Any way to fix that?
    Thanks!

    ReplyDelete
  17. Hey, I have a small question. It may seem silly but i really need to know coz I'm nube in this.
    When anyone will fill this form and submit, where will this information go? Will we get the email on our blogger registered email?
    Please let me know, I really need help ASAP.
    Thank you very much.

    ReplyDelete
  18. I used it on my blog, thanks!

    ReplyDelete
  19. Wow....its very awesome ...thanks to share this...
    i was just looking for it

    ReplyDelete