In previous post we learnt how to add contact us form in blogger, Now we understand how can we convert contact us form or widget into floating style. Yes, its possible and looks so nice. Why to use floating contact form because sometimes its difficult for visitors to found contact form. So, floating widgets always remains visible.
Related Articles:
Now with the help of pressing CTRL+F open search box, look for the starting <body> tag and just below it paste the following code which consists of a contact us widget and JavaScript that will make the contact us widget floating across your site.
Now press the “Save Template” button.
Congratulations, you have successfully added a floating contact us widget in blogger.
Now reopen your blog in new tab 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 please share it with your friends.
Related Articles:
 |
HOW TO ADD FLOATING CONTACT US WIDGET IN BLOGGER
- 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.
]]></b:skin>
Now just above it paste the following CSS code.
#isb-contact .ContactForm {
margin: 0px!important;
}
#isb-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;
}
.#isb-contact .contact-form-button-submit:hover {
background-color: #222;
background-image: none;
border: 0;
}
#isb-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#isb-contact #contact .contact-form-widget {
padding: 30px;
display: none;
}
#isb-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#isb-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;
}
#isb-contact #contact h2.title .fa {
position: absolute;
left: 10px;
top: 12px;
}
#isb-contact #contact .contact-form-widget {
width: 240px;
padding: 30px;
display: none;
}
#isb-contact #contact * {
transition: all 0 ease;
-webkit-transition: all 0 ease;
-moz-transition: all 0 ease;
-o-transition: all 0 ease;
}
#isb-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;
}
#isb-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 pressing CTRL+F open search box, look for the starting <body> tag and just below it paste the following code which consists of a contact us widget and JavaScript that will make the contact us widget floating across your site.
<div id="ibl-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>
Now press the “Save Template” button.
Congratulations, you have successfully added a floating contact us widget in blogger.
Now reopen your blog in new tab 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 please share it with your friends.
Post a Comment