Awesome Contact Form Widget for Blogger

Posted On // 22 comments
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(http://2.bp.blogspot.com/-GoNmkIDybR0/UZuZDpVOXaI/AAAAAAAAEO8/pNPaQU1aiwQ/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(http://3.bp.blogspot.com/-zGxMJ_C5R60/UZuZGnKgcuI/AAAAAAAAEPE/KwPOHFuBffc/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(http://1.bp.blogspot.com/-QduNKpNbFyQ/UZuZPuE_OfI/AAAAAAAAEPU/Rv4C4Kic2I0/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.

22 comments

Shameer Pm Author
4 August 2013 at 02:37

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

Reply
Gagan Masoun Author
5 August 2013 at 03:59

So nice widget. Thanks for sharing.

Reply
Dhiral Patel Author
5 August 2013 at 06:10

nice one, looks like professional :p

Reply
Parallel Blog Author
5 August 2013 at 19:57

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

Reply
6 August 2013 at 18:29

nice tutorr

Reply
irsah imihar Author
15 September 2013 at 15:30

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

Reply
Umair Butt Author
15 September 2013 at 22:02

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

Reply
EXCLUSIVE Author
25 September 2013 at 12:45

This is Very Amazing . Thanks

Reply
Ghost Rider Author
1 October 2013 at 10:31

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

Reply
6 October 2013 at 01:14

please tell me where the message will come

Reply
Jack Rocky Author
17 February 2014 at 22:13

thanks

Reply
Liyana Aris Author
24 April 2014 at 23:52

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!

Reply
Liyana Aris Author
24 April 2014 at 23:56

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!

Reply
12 May 2014 at 11:23

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"

Reply
15 May 2014 at 03:00

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

Reply
19 July 2014 at 04:08

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

Reply
20 July 2014 at 18:25

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

Reply
9 August 2014 at 12:04

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

Reply
9 December 2014 at 11:57

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!

Reply
23 May 2015 at 00:25

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.

Reply
13 August 2015 at 15:36

I used it on my blog, thanks!

Reply
17 December 2015 at 20:26

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

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Awesome Contact Form Widget for Blogger |