My Blogger Lab: How to Add a Floating Contact Us Widget in Blogger

Previously, we have already showed you away on how to add a contact us widget in blogger. However, you might have noticed that sometimes users find it difficult to locate your contact us page link because it is located somewhere deep down into your footer. What if you are running an eCommerce site on blogger and your customer needs to send a quick query email to the support to find some desire information. Since, your contact us page is located deep down the footer he may not send any email and would move to another better site taking away all the possibilities of making a new sale. A simple solution to this problem is to have a floating contact us widget. Today in this article, we will show you how to add a floating contact us widget in blogger.

The live preview of this widget can be seen on this page.

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 >> Template >> Edit HTML >> Click anywhere in the HTML template editor and press (CTRL+F), this will enable a search box. Now search for skin tag and just above it paste the following CSS style sheet coding.

#mbl-contact .ContactForm {
margin: 0px!important;
}
#mbl-contact .contact-form-button-submit {
max-width: none;
width: 100%;
height: 35px;
border: 0;
background-image: none;
background-color: #FA411E;
cursor: pointer;
font: normal normal 13px Open Sans;
font-style: normal;
font-weight: 400;
}
.#mbl-contact .contact-form-button-submit:hover {
background-color: #222;
background-image: none;
border: 0;
}
#mbl-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#mbl-contact #contact .contact-form-widget {
padding: 30px;
display: none;
}
#mbl-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#mbl-contact #contact h2.title {
margin: 0px;
font-weight: 400;
background-color: #FA411E;
color: #FFF;
padding: 8px 15px;
font-size: 16px;
cursor: pointer;
letter-spacing: 3px;
text-align: center;
}
#mbl-contact #contact h2.title .fa {
position: absolute;
left: 10px;
top: 12px;
}
#mbl-contact #contact .contact-form-widget {
width: 240px;
padding: 30px;
display: none;
}
#mbl-contact #contact * {
transition: all 0 ease;
-webkit-transition: all 0 ease;
-moz-transition: all 0 ease;
-o-transition: all 0 ease;
}
#mbl-contact #contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message {
background-color: #DDD;
color: #111;
border: 0;
padding: 10px 5px;
font: normal normal 13px Open Sans;
}
#mbl-contact .contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-widget {
max-width: none;
margin-bottom: 15px;
}

Now with the help of search box, look for the starting <body> tag and just below it paste the following coding which consists of a contact us widget and JavaScript that will make the contact us widget floating across your site.

<div id="mbl-contact">
<b:section class='contact' id='contact' maxwidgets='1' showaddelement='yes'>
<b:widget id='ContactForm2' locked='true' title='Contact us' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><i class='fa fa-paper-plane'/> <data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' expr:placeholder='data:contactFormNameMsg' name='name' size='30' type='text' value=''/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' expr:placeholder='data:contactFormEmailMsg' name='email' size='30' type='text' value=''/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' expr:placeholder='data:contactFormMessageMsg' name='email-message' rows='5'/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<script type='text/javascript'>
//<![CDATA[
$( "#contact h2.title" ).click(function() {$( "#contact .contact-form-widget" ).toggle("fast");});
//]]>
</script>

Once everything is done, press the “Save Template” button located at the very top of the HTML template editor. Congratulations, you have successfully added a floating contact us widget in blogger. Now go to your site and you will notice a floating contact us widget on the bottom right of your screen.

We hope this tutorial we have helped you to learn how to add floating contact us widget in blogger. If you like this widget then, do share it with your blogger friends on Facebook, Google+ or tweet about us on Twitter.

11 comments:

AnonymousOctober 21, 2014 at 11:56 AM
Lovely post!!!!
AnonymousJanuary 11, 2015 at 7:35 AM
it works for me
wc2020January 22, 2015 at 9:39 AM
i have little problem regarding this i cant explain it
please visit http://www.surajjadhavofficial.blogspot.in/ you will know what i mean
wc2020January 27, 2015 at 5:47 AM
thanks for great widget but please tell me how to edit its size (height)
NotisApril 6, 2015 at 11:24 PM
The messages from the contact form go only to blog admin, how can i make authors receive them also?
UnknownMay 27, 2015 at 7:14 AM
thanks for this its just awesome
masumFebruary 6, 2016 at 9:16 AM
Wonderful article keep continue
Aamir RanaAugust 16, 2016 at 9:57 PM
I have added this widget to my blog but it hide behind other widget and the size is also not properly adjusted. Please check it at http://latestshorturdupoetry.blogspot.com
UnknownAugust 30, 2016 at 1:12 PM
so beautiful Thanks a lot for sharing this with us admin :)

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

October 14, 2014

How to Add a Floating Contact Us Widget in Blogger

11 comments: