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-
Demo Here
- 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.
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 .
Any type of information please Contact us.
Post a Comment