How To Install Floating Contact Form Widget In Blogger Blog

How To Install Floating Contact Form Widget In Blogger Blog

How to install floating contact form widget on blogger blog?

How To Install Floating Contact Us Widget on 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-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-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: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;}

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'>
// 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())});

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.

Mero Blogging Tips

Mero Blogging Tips Share Blogger Tutorials, HTML, JavaScript, CSS, Widget, SEO, jQuery, Web Tool and General Helpful Stuff for Newbie Bloggers and Readers.

Post a Comment

First of all, thank you for taking the time to read my blog. It's much appreciated! If you would like to leave a comment, please do, I'd love to hear what you think!. Suggestions and/or questions are always welcome, either post them in the comment form.

However, comments are always reviewed and it may take some time to appear. Also, Comments without NAME will not be published. Always keep in mind "URL without nofollow tag" will consider as a spam.

Previous Post Next Post

Contact Form