Awsome Floating Contact Form For Blogger.

I have created this floating contact form for blogger which is quite similar to the popular floating share buttons of blogger. Many of you have that floating share buttons but this floating contact form is totally new and it’s very impressive and that’s because of it’s design and the transition effects. I could have used some third party contact form for this design which would have looked more impressive but that would have been a bit complicated for some bloggers to add it on their blog.

So, I have decided to go with the default contact form which blogger provides and customize it my way and this is what I have done with it-

• Changed it’s design.
• Made it fixed at the left side of the page.
• Appears when you hover your cursor at the contact icon.
• Smooth transition effect.

Demo Here

Prio-soft

© Powered By Prio-soft

Follow Rules:

• Add Default Contact Form (If You don't Know Check This Post)
• Log in to your Blogger account and Go to your Blogger Dashboard
• Now click on  Template > Edit HTML> Proceed
• Locate the ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)
• Paste the below code Before/above ]]></b:skin> 

 /*prio-soft floating contact form*/

.form-parent {
  width:323px;height:auto;
  background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOkKAGLpkQB8YMPLlqUDP6X03xZ6-DvLu75kw4X4RTLtXk1gxmT0IKIrYqevTTKaNeA9FV-GlB-1lJfCnItpxhRUyT7KhyphenhyphenCjbFqZkC8X_bPdxR1V8VYD-MhyphenhyphenudDGHoCpNW-KUvm4uhwBnv/s1600/contact-button.png') no-repeat right 10px;position:fixed;top:150px;left: -275px;z-index:9999999;transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;}
.form-parent:hover {left:0;}
.cc-float-form {background:-moz-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);background:-webkit-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);background:-o-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);    background:-ms-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);    background:linear-gradient(to bottom, #2b2a2b 5%, #0a0a0a 100%);color:#fafafa;padding:10px;    width:250px;border:2px solid #000;    border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
#ContactForm1 {display:none;}
.contact-form-area {background: #222;width: 245px;padding: 10px 0px;border: 1px solid #111;box-shadow: 2px 2px 2px #111 inset;    -webkit-box-shadow: 2px 2px 2px #111 inset;font-family:Verdana, Geneva, sans-serif;color:#fafafa;font-size: 12px;}
#cc {float:right;font-size:9px;margin-top:-10px;color:#777;}#cc a {    color: #777;text-decoration:none;}

• After adding the code save the template.
• First of all we need to create a new page and to do this firstly go to Blog Title >Pages>New Page>Blank Page. Page editor will open, now click on HTML tab and paste the below given code in it.

 
<!---prio-soft floating contact form-->
<div class='form-parent'>
<form name="contact-form" class="cc-float-form">
<p></p>
Name:<br />
<input class="contact-form-area" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<p></p>
Email:
<span style="color:red;">*</span><br />
<input class="contact-form-area" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
<p></p>
Message: <span style="color:red;">*</span><br />
<textarea class="contact-form-area"  id="ContactForm1_contact-form-email-message" name="email-message" cols="25" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button" />
<p></p>
<div style="text-align: center; max-width: 222px; width: 100%">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
<div id="cc">
By <a href="http://prio-soft.blogspot.com/" target="_blank">Prio-Soft™</a>
</div>
</form>
</div><!--Parent-->
<!--All ends here-->

•  After adding the above code, save this .

You are done now. Now you and your visitors can see this awesome and cool contact form widget in your blog.

Any type of information please Contact us.

Labels: Blogger