Add a New Customized Floating Contact Us Form In Blogger

Nowadays, Many bloggers write ‘if you have any problem then Contact Me’ but do you know where’s the contact form? or what is the email of the author by which you can contact him? No. May be, your visitors can find trouble in locating your contact us page. So, I am here to tell you, How to add a floating contact us widget on blogger. This floating contact us widget was firstly published by MBL. After that post (by MBL), many other bloggers republished that contact us form on their blog. But today, we are publishing a new, customized contact form with a new skin.
Published By MBL:

We are Publishing The Customized Version of It:
Simply, we played with CSS & given a new look to the floating contact form published by MBL. We have added several effects like hover effects, shadow effect, border effects and more. And now, we are giving it to you for free!

Features of this Contact Form

1. Extremely Light Weighted
2. Take Less Space of your blog
3. User-Friendly
4. Stylish Look

How to Add this Contact Form on Blogger?

Are you asking the same question from your mind? Now need. Here’s the full tutorial that can help you to add this awesome floating contact us form. Below are the steps by which you can add this contact form widget in your blog
We have divided the steps info three parts. Carefully follow the steps:

#1- Add Fonts

In this floating contact us widget, we have used some fonts that you have to add on your blog by using the following steps:

• Go to Blogger >> Template >> Edit HTML
• Now, find </head> and paste the following code it:

<link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300’ rel='stylesheet' type='text/css'/>

#2- Add jQuery & Font Awesome Script

We have also used Font Awesome Icons & jQuery in this floating contact us box. So, you have to add them in your template by using following steps:

• Search </head> in you template’s html and paste bellow code above </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'></script>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

[info headline=Info:]You can know more about Font Awesome Icons (their use, how to customize them) here.[/info]

#3- Add Contact Widget CSS & HTML

Here’s the main work. Follow the following steps:

• In the template html, find ]]></b:skin> by using the search bar (Ctrl+F).
• Above it, paste the following code:

#bloggerguider-contact .ContactForm {
margin: 0px!important;
}
#bloggerguider-contact .contact-form-button-submit:hover {
background:#000;
}
#bloggerguider-contact .contact-form-button-submit {
max-width: none;
width: 100%;
height: 35px;
border: 0;
transition: 0.2s ease!important;
background-image: none;
background-color: #919191;
cursor: pointer;
font: normal normal 13px Open Sans;
font-style: normal;
font-weight: 400;
}
.#bloggerguider-contact .contact-form-button-submit:hover {
background-color:#000
}
#bloggerguider-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#bloggerguider-contact #contact .contact-form-widget {
padding: 30px;
display: none;
}
#bloggerguider-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#bloggerguider-contact #contact h5.title {
margin: -2px;
font-weight: 400;
background-color: #000;
color: #FFF;
padding: 8px 15px;
font-size: 16px;
cursor: pointer;
font-family:oswald;
text-align: center;
}
#bloggerguider-contact #contact h5.title .fa {
position: absolute;
left: 10px;
top: 12px;
}
#bloggerguider-contact #contact .contact-form-widget {
padding: 30px;
display: none;
}
#bloggerguider-contact #contact * {
transition: all 0 ease;
-webkit-transition: all 0 ease;
-moz-transition: all 0 ease;
-o-transition: all 0 ease;
}
#bloggerguider-contact #contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message {
background-color: rgba(255, 255, 255, 0.82);
border: 1px solid #D2D2D2!important;
color: #111;
padding: 20px 12px;
font-family: oswald;
}
#bloggerguider-contact .contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-widget {
max-width: none;
margin-bottom: 15px;
}

• Now, again search for </body> and paste the following code above it.

<div id='bloggerguider-contact'>
<div class='contact section' id='contact'><div class='widget ContactForm' id='ContactForm2'>
<h5 class='title'>
<i class='fa fa-paper-plane'></i>
Contact us
</h5>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<input class='contact-form-name' id='ContactForm2_contact-form-name' name='name' placeholder='Name' size='30' type='text' value=''/>
<input class='contact-form-email' id='ContactForm2_contact-form-email' name='email' placeholder='Email' size='30' type='text' value=''/>
<textarea class='contact-form-email-message' cols='25' id='ContactForm2_contact-form-email-message' name='email-message' placeholder='Message' rows='5'></textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm2_contact-form-submit' type='button' value='Send'/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm2_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm2_contact-form-success-message'></p>
</div>
</form>
</div>
</div>
</div></div>
</div>
<script type='text/javascript'>
      //<![CDATA[
      $( "#contact h5.title" ).click(function() {$( "#contact .contact-form-widget" ).toggle("fast");});
      //]]>
</script>

• Now, Save Your Template and get a look at your blog.

Note:- We have used h5 heading tag in title bar because h2 or h3 tags might effect the title bar.

Final Words from Author

I hope you liked this contact box. By using this, now, your visitors can easily contact you. We also have installed this contact form in Blogger Guiders. Moreover, if you find any mistakes or need any customization help, kindly leave your comment below. Thanks!

Share this post