Add Slide Hover Effect Beautiful & Stylish Contact Us Form On Your Blogger BlogSpot Blog

Add Slide Hover Effect Beautiful Contact Form : Hello Everyone, Today I am going to share a Great Blogging tip. Everyone must Use it for better User Experience & Blogging Standard. Some blogger Simply Use there email to contact Blog administrator. We suggest every blogger to must Use it. So, Let's go for it & See result :

Add Stylish Black Beauty Contact form On Your Blogger Blogspot Blog :

Go to Your Blogger Dashboard & Select Your Blog

Then Select "Layout" from the menu on the left.

Click On "Add a Gadget"

Go to "More Gadget" & Add "Contact form"

Now again Click On "Add a Gadget"

From the gadget list, under "basics", select the HTML/JavaScript gadget.

Now Paste below HTML Code & Click On "Save"

<style>
.form-parent {width:323px;height:auto;background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiZZKOkVzjP4xo6innRoQLoMr_buwdySQOsUcBgDje80idG18y6QnxIO5f7m7eu5OcycpVmQcKdlWcqIc8wCKDdF11QKPLHIq2rHGPo1s0Y0qwpkWN2bobp3lJe_7yEdxikfYWVRzPmd6z/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;}
</style>
<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://www.Guideinstall.blogspot.com" target="_blank">GetThis</a>
</div>
</form>