Blogging tips and tricks: How to Add a Floating Contact Us Widget in Blogger

One of my posts officially demonstrated to you a way on industry standards to include a contact us gadget in blogger. Nonetheless, you may have recognized that occasionally clients think that it hard to place your contact us page join on the grounds that it is placed some place where it counts into your footer. Suppose it is possible that you are running an ecommerce website on blogger and your client needs to send a brisk inquiry email to the backing to discover some longing data. Since, your contact us page is placed where it counts the footer he may not send any email and would move to an alternate better site taking ceaselessly all the conceivable outcomes of making another deal. A straightforward answer for this issue is to have a gliding contact us gadget. Today in this article, we will demonstrate to you proper methodologies to include a floating contact us gadget in blogger.Thanks for my friend in bloggerlab for sharing this very nice post. Have a look here for a demo

Adding a Floating Contact Us Widget in Blogger

Step 1. Go to Blogger Dashboard >> Template
Step 2. Click Edit HTML button
Step 3. Click anywhere in the HTML template editor and press (CTRL+F), this will enable a search box. Now search for the tag below

]]></b:skin>

Step 4. And just above it paste the following CSS style sheet coding.

#btat-contact .ContactForm {
margin: 0px!important;
}
#btat-contact .contact-form-button-submit {
max-width: none;
width: 100%;
height: 35px;
border: 0;
background-image: none;
background-color: #168eca;
cursor: pointer;
font: normal normal 13px Oswald;
font-style: normal;
font-weight: 400;
}
.#btat-contact .contact-form-button-submit:hover {
background-color: #158aee;
background-image: none;
border: 0;
}
#btat-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#btat-contact #contact .contact-form-widget {
padding: 30px;
display: none;
}
#btat-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#btat-contact #contact h2.title {
margin: 0px;
font-weight: 400;
background-color: #168eca;
color: #FFF;
padding: 8px 15px;
font-size: 16px;
cursor: pointer;
letter-spacing: 3px;
text-align: center;
}
#btat-contact #contact h2.title .fa {
position: absolute;
left: 10px;
top: 12px;
}
#btat-contact #contact .contact-form-widget {
width: 240px;
padding: 30px;
display: none;
}
#btat-contact #contact * {
transition: all 0 ease;
-webkit-transition: all 0 ease;
-moz-transition: all 0 ease;
-o-transition: all 0 ease;
}
#btat-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;
}
#l-contact .contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-widget {
max-width: none;
margin-bottom: 15px;
}

Step 5. Look for the </body> tag and just above it, paste the code below

<div id="btat-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(1000);});
//]]>
</script>

Short Customization:

Simply change the hexadecimal color 168eca to change the background color of your "send button"

Step 6. Save your template and your done.
Enjoy Blogging Buddies!

How to Add a Floating Contact Us Widget in Blogger

Adding a Floating Contact Us Widget in Blogger

2 comments: