8 Stylish Blogger Contact Form

For Static Page

Blogger contact form is very important to give your readers
the opportunity to communicate with you. Adding a contact
form to your Blogger blog is not so tough. There is a Blogger
Contact Form widget available in the list of Bloggers default
widgets. But a few days ago, It was pretty tough because
there was no such kind of widget available out there. Today
we will learn how to add a stylish Blogger contact form in a
static page?

In this way, we will make a contact page for our blogger

blog. Bloggers default contact form widget is very fresh and
lightweight. To make it more attractive, I will provide
some beautifully designed Blogger Contact Form widget.
You will be able to use those in a contact page of your
blogger blog. So lets start.

How To Add/Enable Blogger Contact

Form In Blogger?
First of all, we will have to add the blogger contact form
widget anywhere in our blogger blog. This will enable the
functionality of the contact form. Otherwise, we will not
receive emails from our contact forms. To do that, first of
all:

1. Sign into your blogger account.

2. Go to the Blogger Dashboard/Overview.
3. Select Layout section from the left menu.
4. Click on the Add a Gadget (Sidebar/ Footer will be better)
> More Gadgets.
5. Click on the Blue Plus Button of the Contact Form Gadget
and then Save it.

You have successfully added the Blogger Contact Form

Widget in your blog. Now it is time to hide this default
blogger contact widget because we are going to make our
stylish contact form in a static Contact Us page.

How To Hide Default Blogger Contact

Form?
To hide this default Blogger Contact Form, Go to the
Template section and click on the Edit HTMLbutton. Now
find the style ending code : ]]></b:skin>. Paste this
small CSS code just above this. Save your template and you
are done. Reload your blog and you will see the default
contact widget disappears.

Code :

div#ContactForm1 {

display: none !important;

Insert Font Awesome Icons In Blogger:

I have used some Font Awesome icons in these custom
blogger contact form. So you will have to insert this style
sheet into your blog. To do this:

Go to the Template section > Click on Edit HTML > Find

the ending head : </head>
Copy the code and paste it right above the </head>.

Code :
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
rel="stylesheet"/>

Click on the Save Template button. You are done.

Note: If your template has already contained this code then

you dont have to implement this twice.

How To Add Blogger Contact Form In A

Static Page?
Now we can create our static Contact Us page for blogger
for applying a stylish and eye catching contact us form. For
doing this, we must create a contact us page on our blog. If
you already have a contact us page, you can use it, but if
you dont have, you can create it in this way.

Go to the Pages section and click on the New

page button as shown below:
 Fill up the Page Title with Contact Us/Contact. (The
name of your contact page). Bring this page into HTML
mode by clicking on the HTML tab.
Now go to the Page Settings Options. Click on it. Select
Readers Comments Dont allow, hid existing. Click
on done button. See the screenshot to become clearer:

Now choose the Blogger Contact Form design you like

most from the list below. Copy the code and Paste it in
 your contact page as shown above. Publish the page and
see the magic.

1. Blogger Contact Form Design 1:

This is a beautiful and responsive blogger contact form. It
has a simple and attractive design. Also, this form has some
additional features. It has a clear button to make the text
area empty with one click. It has some social buttons to
notify users about social pages.

Code :

<style>
.tb-contact-form-widget{background-color:#A4A4A4;background-image:
url("https://2.bp.blogspot.com/-
JgcTvhPBO1o/WU1E2reu27I/AAAAAAAAAE4/op_A1zV78IMyRhQYKGV1zbcXtX3eybwN
ACPcBGAYYCw/s1600/to-contact-img-2.jpg");background-repeat: repeat;background-
position: 100% 100%;color:white;padding:25px;}

.srbtn{display:inline-block;}

.cform-button, .btn-reset{background-color:#f1f1f1;padding:5px 30px;}

.cform-button:hover {background-color: #2980b9;color: #fff;}

.btn-reset:hover {background-color: red;color: #fff;}

.tb-contact-form-widget h3{text-align:center;margin:20px 0;padding:10px 0;border-

top: 1px dotted #f5f5f5;}

.c-form-name, .c-form-email { width: 50%; max-width: 50%; margin-bottom:

10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;

-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;

box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;}

.c-form-email-message { width: 95%; max-width: 95%; margin-bottom: 10px;padding:

10px;border: 1px solid #CCC;border-radius: 5px;box-shadow: 0 1px 1px #CCC inset, 0
1px 0 #FFF;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;

-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;}

.c-form-name, .c-form-email, .c-form-email-message input:focus{background-color:

#FFF;box-shadow: 0 0 0 1px #E8C291 inset;border-color: #E8C291;outline: none;
-moz-box-shadow: 0 0 0 1px #e8c291 inset;

-webkit-box-shadow: 0 0 0 1px #E8C291 inset;}

.b-social-buttons{list-style-type:none;text-align:center;}

.b-social-buttons li{display:inline-block;padding:15px;background-
color:#f5f5f5;border-radius:5px;}

.b-social-buttons li a{color:#333;text-decoration:none;}

#ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-
message{width:100%;margin-top:35px;}

</style>

<div class="tb-contact-form-widget"> <form name="contact-form"> <div class="form-

name"><span><i class="fa fa-pencil-square-o"></i> Your Name: </span><br /><input
class="c-form-name" id="ContactForm1_contact-form-name" name="name" size="30"
type="text" value="" /></div> <div class="form-email"><span><i class="fa fa-
envelope-o"></i> E-mail Address *: </span><br /><input class="c-form-email"
id="ContactForm1_contact-form-email" name="email" size="30" type="text" value=""
/></div><div style="clear: both;"></div><div class="form-message"> <span><i
class="fa fa-keyboard-o"></i> Message *:</span><br />

<textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-

email-message" name="email-message" rows="5"></textarea><div
class="srbtn"><input class="cform-button" id="ContactForm1_contact-form-submit"
type="button" value="Submit" /><input type="reset" class="btn-reset" value="Clear"
/></div><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>

<h3>Our Social Sites</h3>

<ul class="b-social-buttons">

<li><a href="#" class="btn-lg"><i class="fa fa-twitter"> <span class="network-

name">Twitter</span></i></a></li>

<li><a href="#" class="btn-lg"><i class="fa fa-facebook"> <span class="network-

name">Facebook</span></i></a></li>

<li><a href="#" class="btn-lg"><i class="fa fa-youtube-play"> <span class="network-

name">Youtube</span></i></a></li>
</ul></div></form></div>

Configuration:

This form uses some font awesome icons. So, you must
install the font awesome library as I have shown above.
If you get the https error message while installing this
widget then simply Dismiss this and click on the
update button again because if we use https ever then
all of the resources of this form will redirect
automatically.
For using social buttons, simply replace the highlighted
# with your twitter, facebook and youtube channel
URLs.

2. Blogger Contact Form Design 2:

Code :

<style> .contact-form-widget {color: #000;margin-left:auto;max-width: 100%;margin-

right:auto;padding: 0px;width: 600px;} .form_name, .form_email
{float:left;width:48%;padding:5px;} .form_message {padding:5px;} .contact-form-
name, .contact-form-email {font-size:16px;width: 100%;height:40px;max-width:
100%;margin-bottom: 10px;padding:10px;} .contact-form-email-message
{height:100px;width:100%;font-size:16px;max-width: 100%;padding:10px;margin-
bottom:10px;} .contact-form-button-submit {font-size:16px;height:30px;border-color:
#C1C1C1;width: 20%;background: #E3E3E3;max-width: 20%;color: #585858;margin-
bottom: 10px;} .contact-form-button-submit:hover{color: #000000;border: 1px solid
#FAFAFA;background: #ffffff;} </style> <div class="contact-form-widget"> <div
class="form"> <form name="contact-form"> <div class="form_name"> Your Name:
<input class="contact-form-name" id="ContactForm1_contact-form-name"
name="name" size="30" type="text" value="" /></div> <div class="form_email"> E-
mail Address *: <input class="contact-form-email" id="ContactForm1_contact-form-
email" name="email" size="30" type="text" value="" /></div> <div style="clear:
both;"> </div> <div class="form_message"> Message *: <textarea class="contact-
form-email-message" cols="25" id="ContactForm1_contact-form-email-message"
name="email-message" rows="5"></textarea> <input class="contact-form-button
contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button"
value="Submit" /> <br /> <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> </div> </div>

3. Blogger Contact Form Design 3:

Code :

<style> .contact-form-widget { -moz-border-radius: 5px; -webkit-border-radius:

5px; background-color: #eaeaea; background: -moz-linear-gradient(top, #ffffff,
#eaeaea); background: -webkit-gradient(linear, left top, left bottom, color-
stop(0.0, #ffffff), color-stop(1.0, #eaeaea)); color: #444; border: 1px solid
#cacaca; margin: 0 0 25px; max-width: 96%; font-size: 1.4em; padding:
8px 10px; } .contact-form-name, .contact-form-email { width: 50%; max-width: 50%;
margin-bottom: 10px; } .contact-form-email-message { width: 100%; max-width:
100%; margin-bottom: 10px; } </style> <div class='widget ContactForm'
id='ContactForm2'> <div class='contact-form-widget'> <div
class='form'> <form name='contact-form'> <p>Name</p> <input
class='contact-form-name' id='ContactForm1_contact-form-name' name='name'
size='30' type='text' value=''/> <p>E-mail *</p> <input class='contact-form-
email' id='ContactForm1_contact-form-email' name='email' size='30' type='text'
value=''/> <p>Message *</p> <textarea class='contact-form-email-message'
cols='25' id='ContactForm1_contact-form-email-message' name='email-message'
rows='5'></textarea> <input class='contact-form-button contact-form-button-
submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/> <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> </form> </div> </div>
</div>

4. Blogger Contact Form Design 4:

Code :

<style> #ContactForm2{ background:#98AFC7; } .c-form{ border:1px solid #f5f5f5;

padding:0 0 20px 0; overflow:hidden; } .c-form-left{ padding: 20px; } .c-form-right{
padding: 20px; } .contact-form-widget { margin: 0 auto; padding: 10px; width: 400px;
max-width: 100%; }.contact-form-email-message {width: 100%;max-width:
100%;margin-bottom: 10px;} </style> <div class='c-form'> <div class='c-form-left'>
<div class='form' style='float:left;'> <div class='widget ContactForm'
id='ContactForm2'> <div class='contact-form-widget'> <div
class='form'> <form name='contact-form'> <p>Name</p> <input
class='contact-form-name' id='ContactForm1_contact-form-name' name='name'
size='30' type='text' value=''/> <p>E-mail *</p> <input class='contact-form-
email' id='ContactForm1_contact-form-email' name='email' size='30' type='text'
value=''/> <p>Message *</p> <textarea class='contact-form-email-message'
cols='25' id='ContactForm1_contact-form-email-message' name='email-message'
rows='5'></textarea><br/> <br/> <input class='contact-form-button contact-form-
button-submit' id='ContactForm1_contact-form-submit' type='button'
value='Submit'/> <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> </form> </div> </div> </div></div></div> <div class='c-form-
right'> <div style='float: right;'> <div dir="ltr" style="text-align: left;" trbidi="on"> <div
class="separator" style="clear: both; text-align: left;"> <a
href="https://3.bp.blogspot.com/-
yRd1HyVntQc/WBnoEKlsRFI/AAAAAAAAD8I/12a9gt1XgNga_lTUQFMPhOsa5qAoCnwpg
CLcB/s1600/bo-contact-avatar.jpg" imageanchor="1"><img border="0"
src="https://3.bp.blogspot.com/-
yRd1HyVntQc/WBnoEKlsRFI/AAAAAAAAD8I/12a9gt1XgNga_lTUQFMPhOsa5qAoCnwpg
CLcB/s1600/bo-contact-avatar.jpg" /></a></div> <br />Address Line 1<br />Address
Line 2<br />Address Line 3<br />State<br />Telephone: +49 30 47373795<br />E-mail:
mail@blogornate.com </div> </div> </div></div> <div style='clear: both;'></div>

Yellow highlighted section should be your Profile

URL. Lime highlighted section should be your
Image URL. Orange highlighted section would contain your
Address. Change these sections as the way you want.

5. Blogger Contact Form Design 5:

Code :

<form name="contact-form"><span><i class="fa fa-pencil-square-o"></i> Name

</span><br /> <input id="ContactForm1_contact-form-name" name="name" size="30"
type="text" value="" /> <br /> <br /> <span><i class="fa fa-envelope-o"></i> Email
Address <span style="color: #f56954; font-size: x-small; font-weight:
bold;">important</span></span> <br /> <input id="ContactForm1_contact-form-email"
name="email" size="30" type="text" value="" /> <br /> <br /> <span><i class="fa fa-
keyboard-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight:
bold;">important</span></span><br /> <textarea cols="25"
id="ContactForm1_contact-form-email-message" name="email-message"
rows="5"></textarea> <br /> <input id="ContactForm1_contact-form-submit"
type="button" value="Send" /> <br /> <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><br /><style scoped="" type="text/css">
#comments,.post_meta,#blog-pager {display:none;} #ContactForm1_contact-form-
name, #ContactForm1_contact-form-email{ height:auto;margin:5px
auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-
radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-
sizing:border-box;transition:all 0.5s ease-out;} #ContactForm1_contact-form-email-
message{width:95%;height:175px;margin:5px
0;padding:10px;background:#fafafa;color:#444;font-family:'Open Sans',sans-
serif;border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus,
#ContactForm1_contact-form-email-
message:focus{outline:none;background:#fff;color:#444;border-
color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit{font-family:'Open
Sans';float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-
align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-
size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-
radius:4px;border:0;transition:all .8s ease} #ContactForm1_contact-form-
submit:hover {background:#e45a40;color:#fff;} #ContactForm1_contact-form-error-
message, #ContactForm1_contact-form-success-message{width:100%;margin-
top:35px;} .contact-form-error-message-with-border
{background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-
shadow:none;color:#fff;} img.contact-form-cross {line-height:40px;margin-left:5px;}
@media only screen and (max-width:640px){ #ContactForm1_contact-form-name,
#ContactForm1_contact-form-email,#ContactForm1_contact-form-
submit{width:100%;}} </style>

6. Blogger Contact Form Design 6:

Code :

<div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <p

class='text'>Name</p> <input class='name' id='ContactForm1_contact-form-name'
name='name' size='30' type='text' value=''/> <p class='text'>E-Mail *</p> <input
class='email' id='ContactForm1_contact-form-email' name='email' size='30'
type='text' value=''/> <p class='text'>Message *</p> <textarea class='message'
cols='25' id='ContactForm1_contact-form-email-message' name='email-message'
rows='5'></textarea> <input class='btn' id='ContactForm1_contact-form-submit'
type='button' value='Submit'/> <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> </form> </div>
</div> <style> .contact-form-widget p.text{color:#fff;font-size:16px;font-weight:bold;
font-family: sans-serif;line-height: 0.5em;text-transform:uppercase;} .contact-form-
widget {margin-right:auto;margin-left:auto;height: 100%;max-width:
90%;padding:30px;border-radius: 5px;border: 1px solid rgba(0,0,0,.2);background:
rgba(0, 0, 0, 0.5);background-clip: padding-box;overflow: hidden;-moz-border-radius:
5px;-webkit-border-radius: 5px;-webkit-background-clip: padding-box;-moz-
background-clip: padding;} .form textarea{background: #afafaf;width: 93%;height:
120px;border: 1px solid #BDBDBD;border-radius: 4px;-webkit-border-radius: 4px;-moz-
border-radius: 4px;background-clip: padding-box;-moz-background-clip: padding;-
webkit-background-clip: padding-box;display:block;color:#000;font-
size:18px;padding:12px 20px 0 15px;margin-bottom:20px;overflow:hidden;} .form
input {width: 60%;height: 46px;border: 1px solid #BDBDBD;border-radius: 4px;font-
size:18px;color:#333;padding:0 20px 0 20px;display:block;margin-
bottom:20px;background-clip: padding-box;-webkit-border-radius: 4px;-moz-border-
radius: 4px;-webkit-background-clip: padding-box;-moz-background-clip: padding;}
.form input.name {background-image: url(https://1.bp.blogspot.com/-
sXJ8lTpHlvo/WU1GvLlBCnI/AAAAAAAAAFM/tjsiXo-
qFaoJ2O6ISttYjyIof_rf8jcZwCLcBGAs/s1600/pro-pic.png);background-position: 11px
8px;background-size: 28px 28px;background-repeat: no-repeat;padding-left:45px;}
.form input.email {background-image: url(https://2.bp.blogspot.com/-
fOwUjdBhQ5I/WU1Gt1XmmOI/AAAAAAAAAFA/99GSQqmjDmIMdtsmzV9mWhCz6sMk1-
ZNQCLcBGAs/s1600/msg-box.png);background-repeat: no-repeat; padding-
left:45px;background-position: 11px 8px;background-size: 28px 28px;} .form
input.message {background-image: url(https://2.bp.blogspot.com/-
KaDr1HCm_JA/WU1Gt3F5ufI/AAAAAAAAAFE/YST5aPPM-MgKh09SWXoOn-
fhfbK_iJmtACLcBGAs/s1600/pencil.png);background-repeat: no-repeat;background-
size: 30px 30px;background-position: 11px 8px;padding-left:45px;} .form input:focus,
.form textarea:focus { -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);-webkit-
box-shadow: 0 0 5px 1px rgba(255,255,255,.5);box-shadow: 0 0 5px 1px
rgba(255,255,255,.5);overflow: hidden;} .btn {background: #416b68;width: 138px
!important;height: 45px;border-radius: 4px;border: 1px solid #253737;-webkit-border-
radius: 4px;-moz-border-radius: 4px; float:right;background: -webkit-gradient(linear,
left top, left bottom, from(#6da5a3), to(#416b68));background: -moz-linear-
gradient(top, #6da5a3, #416b68);background: -webkit-linear-gradient(top, #6da5a3,
#416b68);background: -o-linear-gradient(top, #6da5a3, #416b68);background-image: -
ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);background: -ms-linear-
gradient(top, #6da5a3, #416b68);padding: 10.5px 21px;box-shadow:
rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;-webkit-box-
shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;-moz-box-
shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;text-
shadow: #333333 0 1px 0;color: #e1e1e1;} .btn:hover {background: #416b68;border:
1px solid #253737;color: #fff;text-shadow: #333333 0 1px 0;background-image: -ms-
linear-gradient(top, #77b2b0 0%, #416b68 100%);background: -webkit-gradient(linear,
left top, left bottom, from(#77b2b0), to(#416b68));background: -moz-linear-
gradient(top, #77b2b0, #416b68);background: -webkit-linear-gradient(top, #77b2b0,
#416b68);background: -o-linear-gradient(top, #77b2b0, #416b68);background: -ms-
linear-gradient(top, #77b2b0, #416b68);} @media only screen and (max-width: 580px)
{ .contact-form-widget{width: 88%;left: 3%;margin-left: 0;margin-right: 3%;padding-
left: 3%;padding-right: 3%;} </style>
7. Blogger Contact Form Design 7:

Code :

<style>.c-form-name, .c-form-email, .c-form-email-message{padding:10px;margin:8px

0 8px 0;border:1px solid #E5E5E5;width:50%;color:#999999;box-
shadow:rgba(0,0,0,0.1) 0px 0px 8px;-moz-box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;-
webkit-box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;}

.c-form-email-message{width:95%;height:150px;line-height:18px;}

.tb-contact-form-widget
input:hover,textarea:hover,input:focus,textarea:focus{border-color:1px solid
#C9C9C9;box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;-moz-box-shadow:rgba(0,0,0,0.2)
0px 0px 8px;-webkit-box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;}

.tb-contact-form-widget label{margin-left:10px;color:#999999;}

.cform-button {width:100px;height:40px;background-
color:#474E70;color:#FFF;border-radius:3px;-moz-border-radius:3px;-webkit-border-
radius:3px;}
#ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-
message{width:50%;margin-top:25px;}

</style><div class="tb-contact-form-widget">

<form name="contact-form">

<div class="name">

<input class="c-form-name" id="ContactForm1_contact-form-name" name="name"

size="30" type="text" value="" placeholder="Your Name"/>

<label for="name">Name</label>

</div>

<div class="email">

<input class="c-form-email" id="ContactForm1_contact-form-email" name="email"

size="30" type="text" value="" placeholder="mail@example.com"/>

<label for="email">E-mail *</label>

</div>

<div style="clear: both;"></div>

<div class="message">

<textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-

email-message" name="email-message" rows="5" placeholder="Write something to
us...">

</textarea>

<div class="srbtn">

<input class="cform-button" id="ContactForm1_contact-form-submit" type="button"

value="Submit" />

</div>

<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></div>

All of these five blogger contact form designs are tested.

You can use one of these contact forms in your blog. In my
case, these forms are working fine. If your one is not
functioning properly, then please let me know through the
comment. If this is helpful for you, then please dont forget
to share this with your friend.