How To Install Floating Contact Form Widget on Blogger Blog - 101Helper.Com

Top Menu [Pages]

    Social Links

Articles Update
Loading...
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{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.

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{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.
Disqus Codes
  • To write a bold letter please use or
  • To write a italic letter please use or
  • To write a underline letter please use
  • To write a strikethrought letter please use
  • To write HTML code, please use or
    or

    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Get the latest in your inbox.

Signup to be the first to know when we publish updates, best-practices, tips and tricks.

Notifications

Disqus Logo