How To Install Floating Contact Form Widget In Blogger Blog

As we know , the contact form widget / contact form is an email facility from Blogger that functions to connect between visitors and blog owners to communicate with each other personally and it is quite easy to send a quick query email to the support to find some desire information.

Today in this article, we will show you how to add a floating contact us widget in blogger blog. First of all, you must have contact form widget already available on our blog. Make sure you have installed the contact form widget on your blog . If you haven’t added the widget in Layout > Add a Gadget. Then, get on with the way it is implemented.

The very first thing you need to do is to take a backup of your template, so in case you did not followed the bellow instructions properly you can use the backup to restore the template.

Go to Blogger Dashboard > Theme > Edit HTML > Click anywhere in the HTML template editor and press (CTRL+F), this will enable a search box. Now search for skin tag ]]></b:skin> and just above it paste the following CSS style sheet coding.

/* Floating Contact Form */
.ContactForm,.ContactForm .title{display:none}
.floating-wid{position:fixed;width:280px;right:10px;bottom:0;z-index:99}
.floating-wid-head a{width:100%;padding:8px 10px;background:#2997e0;color:#fff;font-weight:400;display:inline-block;transition:all .3s linear}
.floating-wid-head a:hover{background:#2588ca;color:#fff}
.floating-wid-body{height:285px;background:#fff;padding:10px;display:none;box-shadow:0 2px 5px 0 rgba(0,0,0,.26)}
.floating-wid-head{text-align:right}
.floating-wid-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;}
.floating-wid-body{-moz-box-sizing:initial;-webkit-box-sizing:initial;box-sizing:initial}

Now with the help of search box, look for the starting </body>tag and just Above it paste the following JavaScript code.

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

Once everything is done, Save Template. Now go to your site and you will notice a floating contact us widget on the bottom right of your screen.