Animation Contact form Widget Add For Blogger Site !

Contact oyedageta add animation to your Blogger blog? Yes, you have seen and read the title right. In fact, today I will share with you a very interesting oyedageta contact form. This contact form is very easy if you use your blog for your visitors to your blog, you can send mail to the massage. Hopefully, we all know it, before I posted, and there are several contact to discuss details of the chest oyedageta have so much to say nothing.Because it is nothing new, just the style and CSS effects, the new, the rest of the work all the same. So let's take a look at how you can use the contact form on your blogspot blog, beautiful animation. 

Contact Form Oyedageta Add Animation To Your Blogger Blog?

First login to your Blogger account and click the Layout from the dashboard, click the Add a Gadget. Ekhuna More Gadget From there you can click on the pages to come, see and be seen as an option to the right side, click on the Contact Form.

Tamplate to your dashboard and click on the Edit HTML and click. Now press CTRL + F on your keyboard tothis]]> </ b: skin> tag search. This tag is associated with the following line karedina.

# ContactForm1 {display: none}

If you are already using this system to your blog if you do not do this at the top of the Contact Form at the top of the Keep Already added up and the top of it, so do not see anything below the top of the steps to see if.

Return to the Dashboard and click Pages in the contact form where you want to go there. Click on the New page. Pages from a HTML tab and click the box below to enter codes rose empty house.

<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/AVvXsEhHYLyun9UaNymgrUQlylx2LRcGLBArEwbb9PftRqQJiFPEhZGw2EZ3A9r1CNbG9MAayfO5gbki2tQLdcDiZGEEKjIU59UasWsHC1jMrtKXdAg_RnCknEA93wis9ngBFISSny1N8PN0DWs/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/AVvXsEiqFAeIs3CWcIbI1Pkoqm-8QE4CE13zozPOVM6_f1iUbw5FHwH87TIVGwadFbxHJigWqZ1IRJ4QTCujAAOY_HgNY1ABgF1tXXAbss3tcgyZFCcYrij_FN1bHFEw3inlSZsAJhSKbGmd93w/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/AVvXsEjyDfGf1ko_F2RyTCw18gt0IUFiukJDF6t6lGNe8mZ8D7b8uZLuWV6-DxtJwjF0yY83Oc5V5ugSpScRaMFYvYGud0IXClfTvg7SHR89efxx9sNR8ridd8ir0X0JQv4sUi3GWimKmGHTGVA/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/AVvXsEi_oADyZotj_3v1muY2K4dvlDgzvzoRkLeDJRNRIVRjV0IvAFP5Q3RO_1Kbje_o5Akb5qPewjC7BIWFBOitM8-FKd1JrJYET7s_75wJ7djrOm-15_rcAFVD5pcXy6M66hTpbBEy3wDoBaY/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/AVvXsEjSWEp5O2CIi2C4sNj-to4JqWnL_RYsHllx2B45ivpkS4x-tZvHdWKEcgRKDcqFpkeRo7Tb8vdqcnlfHkkyzRLd7CssWsxeRqM3mZOzNS9jFrYmEdSAjJHzpNvzyPU9bnhLxXUdreGvVMw/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> 

Click Publish Post in diameter. Please visit the page to see the hope that it has been successful.

Live Contact Form Demo

I hope you have been in the form and it was no problem! Please comment below if you have any kind of problem. When I got to be good friends to share it with the post. Of course if you really like it, share this post with your friends and do not forget to yanate comment below. Have a good day to be healthy.