How to Add Floating Google Official Contact form to blog/website?

To make your template more attractive webmasters should always try something to showup professionalism. We all know that Google is giant online network for its products like search engine, email, blogging, chatting, social media, apps, games, movies, online file storage etc. Google has released another product from their lab know as Google Contact form. But, one drawback is webmasters don’t have option to insert directly into blog static page.

When there is will there you find a way, yes taking with help of CSS Trick webmasters can add Google contact from on blog with sliding technique. Authors adding lots of widgets can jam website/blog loading time and confuse visitor to bounce. Hence, instead of adding directly at sidebar make contact form into floating style with a CSS code trick.

Browse More Related Posts

This contact form definitely makes your visitor electrify to add their views to interact you very closely. In this tutorial we bring you CSS trick code to add Google Contact form directly to blog in floating transfer mode. Webmasters don’t need work hard for adding this menu to their blog/website, its simple and easy customizable. Let’s begin tutorial to add.

How to Add floating Google Official Contact form to blog/website?

Sign into blogger account
From blogger dashboard select ‘Template’ link tab
Click on ‘Edit HTML’ link tab and proceed
Now search for tag

]]></b:skin>

After finding tag copy the below code and paste above to it

/* Slide Up and Down Style Form by www.BlogTariff.com*/
.ContactForm, .ContactForm .title {
 display: none;
}
.BlogTariffFC{
 position: fixed;
 width: 250px;
 right: 0;
 bottom: 0;
 z-index: 999;
}
.BlogTariffFC-head a {
 padding: 5px 10px;
 background: #04BDFA;
 color: white;
 font-weight: bold;
 display: inline-block;
 *display: block;
 zoom: 1;
}
.BlogTariffFC-body {
 height: 285px;
 background: white;
 border: 5px solid #04BDFA;
 padding: 10px;
 display: none;
}
.BlogTariffFC-head {
 text-align: right;
}
.BlogTariffFC-body .ContactForm {
 margin: 0;
 display: block!important;
}

After successful adding above code Search for tag

</body>

After finding tag copy the below code and past above to it

<script type='text/javascript'>
//<![CDATA[
/* Slide Up and Down Style Form by www.BlogTariff.com*/
$('body').append('<div class="BlogTariffFC"><div class="BlogTariffFC-head"><a href="#no-move">Contact</a></div><div class="BlogTariffFC-body"></div></div>');
$('.ContactForm').appendTo('.BlogTariffFC-body');
var slide_up_ct = false;
$('.BlogTariffFC-head a').click(function(){
 if (!slide_up_ct) {
 slide_up_ct = true;
 $('.BlogTariffFC-body').slideDown();
 } else {
 slide_up_ct = false;
 $('.BlogTariffFC-body').slideUp();
 }
});
//]]>
</script>

Now Save Template to view your experiment
That’s done