How To Add Slide Up And Slide Down Contact Us Widget

Heya ! How all are you doing ? Today in this tutorial we are going to explain How to add a Fixed Contact From gadget In Blogger Template.Lot's of using blogger default contact us widget that is just like a ok ok type.if you want to increase a niche of your blogger website or blog you must add this custom CSS contact form tool which will add in right side of bottom in your website and whenever you will click on contact us button it will slide up and you can fill the form and directly send the email to the author or admin of website or blog.

We have also seen some are installing contact form in blogger pages even i have also installed :P but that is different thing you can add there too.but this contact us floating widget is very useful for every blogspot website.We have customized the some functions of contact us widget to look more beautiful.We have used CSS and jquery to make it work perfect.To grab the floating contact us widget follow the steps mentioned below.

Demo

How to add fixed contact us button in blogger footer

installation steps:

Before customizing Contact us widget to slide up and slide down in blogger template,First add blogger default contact widget..just go to your layout->Add a gadget->More Gadget->Contact Form. After Adding above step then follow to the below steps.

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.

Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for the </b:skin> or </style> and copy the below CSS code and paste it just above </b:skin> or </style>

/* Slide Out Contact Form Widget By Www.Bloggersstand.com */
.ContactForm,.ContactForm .title{display:none}
.bsd-floating{position:fixed;width:280px;right:30px;bottom:0;z-index:99}
.bsd-floating-head a{padding:8px 10px;background:#2997e0;color:#fff;font-weight:400;display:inline-block;transition:all .3s linear}
.bsd-floating-head a:hover{background:#2588ca;color:#fff}
.bsd-floating-body{height:285px;background:#fff;padding:10px;display:none;box-shadow:0 2px 5px 0 rgba(0,0,0,.26)}
.bsd-floating-head{text-align:right}
.bsd-floating-body .ContactForm{margin:0;display:block!important}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{background:#fff;border:0;padding:10px 0;color:#999;font-weight:normal;width:100%;max-width:initial;border-bottom:1px solid #ccc;transition:.2s ease all}
#ContactForm1_contact-form-email-message{background:#fff;border:none;color:#8f8f8f;padding:10px 0;width:100%;max-width:initial;border-bottom:1px solid #ccc}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-name:hover,#ContactForm1_contact-form-email:hover,#ContactForm1_contact-form-email-message:hover{background:#fff;box-shadow:none;border-bottom-color:#ff3c3c;transition:all .3s linear}
#ContactForm1_contact-form-submit{position:relative;color:#fff;font-weight:400;font-size:12px;cursor:pointer;background:#57ad68;border:none;float:left;box-shadow:0 0 0 0 rgba(0,0,0,0.19);transition:all .3s linear}
#ContactForm1_contact-form-submit:hover{background:#468a53;}
#ContactForm1_contact-form-submit:active{box-shadow:0 4px 15px 0 rgba(0,0,0,0.19);}
.contact-form-widget form{display:table;margin:0 auto;}
.contact-form-widget {max-width:initial;}
.bsd-floating-body{-moz-box-sizing:initial;-webkit-box-sizing:initial;box-sizing:initial}

Step 4. Now Search for the closing </body> tag and now copy the below script and paste it just above </body> it.

<script type='text/javascript'>
//<![CDATA[
// Contact Form Widget By www.Bloggersstand.com
$("body").append('<div class="bsd-floating"><div class="bsd-floating-head"><a href="#no-move">Contact Form</a></div><div class="bsd-floating-body"></div></div>'),$(".ContactForm").appendTo(".bsd-floating-body");var bsd-slide_up=!1;$(".bsd-floating-head a").click(function(){bsd-slide_up?(bsd-slide_up=!1,$(".bsd-floating-body").slideUp()):(bsd-slide_up=!0,$(".bsd-floating-body").slideDown())});
//]]>
</script>

Step 5. Now Save your Template..Done !!