Thursday, 27 February 2014

Adding Floating Contact Form To Blogger

Important: All scripts hosted on don't work anymore because Google has blocked that SVN repository.

Just a quick news before I start the stuff. Google Code has suspended my code account & all repositories I hosted there, so all my code that I use in this website & in tutorials in no longer controlled by me. That's it!

If you're not satisfied with adding Blogger's contact form widget to a specific page of your blog, you can also use it as a floating widget.

BloggerItems has created a cool floating contact form widget for Blogger. First, add Blogger's official contact form widget to your blog.

  • Go To Blogger > Template > Edit HTML
  • Search and paste this code just about ]]></b:skin>:
.floating-ct-body {
 height: 285px;
 background: white;
 border: 1px solid #09f;
 padding: 10px;
 display: none;
.floating-ct-head {
 text-align: right;
.floating-ct-body .ContactForm {
 margin: 0;
 display: block!important;
Then paste the below code before </body> tag in your template:

<script type='text/javascript'>
/*Floating Contact Form by*/
$('body').append('<div class="floating-ct"><div class="floating-ct-head"><a href="#no-move">Contact</a></div><div class="floating-ct-body"></div></div>');
var slide_up_ct = false;
$('.floating-ct-head a').click(function(){
 if (!slide_up_ct) {
 slide_up_ct = true;
 } else {
 slide_up_ct = false;

That's IT!
Important: Check our new website for WordPress tutorials, plugins and more.
Powered by Blogger.