How to add a beautiful floating contact us Widget to your blogger blog in this post I’m sharing an awesome and beautiful floating contact us Widget for blogger we have already shown you away on How To Add Awesome Contact Form To Blogger Blog  However, you might have noticed that sometimes users find it difficult to locate your contact us page link because it is located somewhere deep down in your footer. What if you are running an eCommerce site on blogger and your customer needs to send a quick query email to the support to find some desired information. Since your contact us page is located deep in the footer he may not send an email and would move to another better site taking away all the possibilities of making a new sale. A simple solution to this problem is to have a floating contact us widget, there are many ways of adding a contact us link to footer, sidebar or in a navigation menu. But adding floating contact us button is the best choice. This will help your visitors to easily find a contact button. Adding Floating Contact Me Button is the best way to interact with your visitors and make them love your blog. Now You can Add Floating Contact us Button To Blogger Today in this article, we will show you how to add a beautiful floating contact us widget in blogger


Add Beautiful Floating Contact us Widget

To add this widget to your blogger dashboard >> Layout >> Gadget >> HTML/JavaScrip
copy the below code and past in



<style type="text/css">
.form-float {width:323px;height:auto;background: transparent url('') no-repeat right 10px;position:fixed;top:150px;left: -275px;z-index:9999999;transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;}
.form-float:hover {left:0;}
.nf-float-form {background:-moz-linear-gradient(top, #2b2 5%, #00248E 100%);background:-webkit-linear-gradient(top, #2b2 5%, #00248E 100%);background:-o-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%); background:-ms-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%); background:linear-gradient(to bottom, #2b2a2b 5%, #0a0a0a 100%);color:#fafafa;padding:10px; width:250px;border:2px solid #000; border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
#ContactForm1 {display:none;}
.contact-form-area {background: #FF0000;width: 245px;padding: 10px 0px;border: 1px solid #111;box-shadow: 2px 2px 2px #111 inset; -webkit-box-shadow: 2px 2px 2px #111 inset;font-family:Verdana, Geneva, sans-serif;color:#fafafa;font-size: 12px;}
#nf {float:right;font-size:9px;margin-top:-10px;color:#777;}#cc a { color: #777;text-decoration:none;}
<div class='form-float'>
<form name="contact-form" class="nf-float-form">
Name:<br />
<input class="contact-form-area" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<span style="color:red;">*</span><br />
<input class="contact-form-area" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
Message: <span style="color:red;">*</span><br />
<textarea class="contact-form-area" id="ContactForm1_contact-form-email-message" name="email-message" cols="25" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button" />
<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 id="nf">
By <a href="" target="_blank">Nafisflahi</a>


Save Your Contact us widget Congratulations, you have successfully added a floating contact us widget in blogger. Now go to your site and you will notice a floating contact us widget on the bottom left of your screen