Create Awesome Floating Contact Form For Blogger

Don't like the old fashioned style of inserting contact form at static page or right sidebar ?
Then my guide to Create Awesome Floating Contact Form For Blogger would be your perfect choice

Here's a demo screenshot for how its look alike

Step by step procedure:

• 1st of all add a Contact Form gadget to your blog by simply goto - Layout - Add a Gadget - More Gadgets - Contact Form - Click Add .
• Now you can check your blog page , You'll find a contact from .

Customizing The Form:

1. Go To Blogger > Template
2. Click "Edit HTML"
3. Search for  ]]></b:skin>  and just above it paster the following CSS code:

/*Floating Contact Form by BloggerItems.com*/
.ContactForm, .ContactForm .title {
 display: none;
}
.contact-form-button-submit{
background-color:#5A2A64;background-image: -moz-linear-gradient(top,#733889 0,#3F1B3D 100%); background-image: -ms-linear-gradient(top,#733889 0,#3F1B3D 100%); background-image: -o-linear-gradient(top,#733889 0,#3F1B3D 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#733889),color-stop(100%,#3F1B3D)); background-image: -webkit-linear-gradient(top,#733889 0,#3F1B3D 100%); background-image: linear-gradient(to bottom,#733889 0,#3F1B3D 100%);
border-radius: 8px;
border: 2px solid #DDDDDD;
height: 35px;
margin: 8px 0 0;
width: 70px;
}
.contact-form-button-submit:hover{background:#5B2A65;
padding:0;border: 2px solid #DDDDDD;
}
.tibber {
 position: fixed;
 width: 250px;
 right: 27px;
 bottom: 0;
 z-index: 999;
}
.Rask-ic a {
background-color:#5A2A64;background-image: -moz-linear-gradient(top,#733889 0,#3F1B3D 100%); background-image: -ms-linear-gradient(top,#733889 0,#3F1B3D 100%); background-image: -o-linear-gradient(top,#733889 0,#3F1B3D 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#733889),color-stop(100%,#3F1B3D)); background-image: -webkit-linear-gradient(top,#733889 0,#3F1B3D 100%); background-image: linear-gradient(to bottom,#733889 0,#3F1B3D 100%);
padding: 8px 22px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-left: 2px solid #DDDDDD;
border-right: 2px solid #DDDDDD;
border-top: 2px solid #DDDDDD;
color: white;
display: inline-block;
font-size: 20px;
letter-spacing: 1px;
}
.Rask-ic a:hover{text-decoration:none}
.Rask {
 height: 280px;
 background: white;
box-shadow:rgba(0, 0, 0, 0.8) 4px -4px 6px -4px;
 border: 2px solid #481B59;
 padding: 10px;
 display: none;
}
.Rask-ic {
 text-align: right;
}
.Rask .ContactForm {
 margin: 0;
 display: block!important;
}

1. Then search for  </body>  and just above it paste the following JS code:

<script type='text/javascript'>
//<![CDATA[
/*Floating Contact Form by BloggerItems.com*/
$('body').append('<div class="tibber"><div class="Rask-ic"><a href="#no-move">Contact</a></div><div class="Rask"></div></div>');
$('.ContactForm').appendTo('.Rask');
var slide_up_ct = false;
$('.Rask-ic a').click(function(){
 if (!slide_up_ct) {
 slide_up_ct = true;
 $('.Rask').slideDown();
 } else {
 slide_up_ct = false;
 $('.Rask').slideUp();
 }
});
//]]>
</script>

You are done, You can now see a beautiful Floating Contact Form on the right footer side of your blog, If you wish you can customize the CSS code to do any changes like button color etc.

Feel free to share your views below & stay tuned :)