Animated Contact Form Widget for blogger

Add a animated Contact Form widget to your blog! Yes, you have seen and read the title right. In fact, today I will share with you a very interesting contact form widget. This contact form is very easy if you use your blog for your visitors to your blog, they can send mail to the message. So let's take a look at how you can use the contact form on your Blogspot Blog.

 How to Add Animated Contact Form widget on Blog?

 
Step #1: At first Go to your blogger Dashboard > Layout > Add a Gadget > More Gadget > Contact Form

Step #2: Now again Go to your Dashboard > Template and click on the > Edit HTML and past below code before ]]></ b: skin>  then click Save.

#ContactForm1 {display:none}

Step #3: Now Go to > Page > New Page > then click HTML tab at last Past the following two box code and press Publish button.

 <style>
#wrap-contact {width:530px; margin:20px auto 0; height:auto;} #form_wrap-contact { overflow:hidden; height:446px; position:relative; top:0px; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s;} #form_wrap-contact:before {content:""; position:absolute; bottom:128px;left:0px; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhYLxkKNzpcqCMhxXu1v_R4RQ-MB1vNlCrLs8bNWV-AhMljhLkC5P9o4OHkx8WDPYtm0bE4obzpjgpwdMHGphilE91jFtmkSjkE_dASaCd62B6pCp0Vav3a5Iq1VV6A9j5pRdnCMCjfMc/s1600/before.png'); width:530px;height: 316px;} #form_wrap-contact:after {content:"";position:absolute; bottom:0px;left:0; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfziaelEX_2-H0pW-Wv7CKDs9GbjOBnzVAxxGJKbl4uRo-B8_E_L_RVxz8saFzmWuLzbkT6QJqZQW8mQ-FVU-fY0DLClCDUq-2I0DhqWgutLsmrgp0NICs-_-0-7W08BSwTTEjD_0Tco8/s1600/after.png'); width:530px;height: 260px; } #form_wrap-contact.hide:after, #form_wrap-contact.hide:before {display:none; } #form_wrap-contact:hover {height:776px;top:-200px;} #contact-form {background:#0277bd; position:relative;top:200px;overflow:hidden; height:200px;width:450px;margin:0px auto;padding:20px; border: 1px solid #00b0ff; box-shadow: 0px 0px 5px #00b0ff; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s;} #contact-form:hover {height:530px;} #ContactForm1_contact-form-name{ width: 399px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSBEwa8RSD7TGUftNblPjHP260nrJ9cqIleXENE2rDMGcxEHxUKIgAK8g2rfGkJ7Jb1wnp_XzQw9PfHdZQaiKWoe5tnKDXRwR3i9hdxiYtqYQuRAXmNgtorcDU4cn0imtSgvbEWhoJzFo/s1600/user.png)no-repeat 10px center; color:#00b0ff; border:1px solid #00b0ff; box-shadow: 1px 1px 10px #00b0ff inset; } #ContactForm1_contact-form-email{ width: 399px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7WIQ2G8vhf_QEj-u3DFPc50VsdhyWJD7-yQvEF83waw-SL639lk7il4oeGVXhcOaElZ6uVLaHvGIxQWxO1ljKjG6l1BQY70UhuLln-uIz-N0LIxEPTD7EYOvtM0TKComFOeDU0MOiN48/s1600/pen.png)no-repeat 10px center; color:#00b0ff; border:1px solid #00b0ff; box-shadow: 1px 1px 10px #00b0ff inset; } #ContactForm1_contact-form-email-message{ width: 399px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-c5Ckq-c4qoU6417idMfEoforYMZjZVv-VeqjJK37RQCW-DPiSpOwu6R9y2JZh8ej2IkNzT077RSNhQsYjebyjuhxp6FUoZKD2VZu4vNLLQv3PAolFjspnwNO-FtHW5ZKnmEJzwUC_2E/s1600/msg.png)no-repeat 10px 10px; color:#FFFFFF; border:1px solid #00b0ff; box-shadow: 1px 1px 10px #00b0ff inset; } #ContactForm1_contact-form-submit { width: 450px; height: 30px; color: #000; font-weight: bold; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#00b0ff; text-shadow: 1px 0 0 #ede7f6; border:1px solid DodgerBlue ; } #ContactForm1_contact-form-submit:hover { background:#000000; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 400px; margin-top:30px; }
</style> 

<div id="wrap-contact">
<div id="form_wrap-contact">
<form id="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email Address" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Content" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>

• DEMO

Author: Blogger King

Related Posts