How To Add Animated Contact Form Widget for blogger - Deetechgh.tk | Download Free Softwares and How to Make Money

Breaking

Translate

Thursday, April 29

How To Add 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('http://3.bp.blogspot.com/-cmD_gxIBhmo/Ugp1CmUG5xI/AAAAAAAAF9Y/5CUD_WnjOvw/s1600/before.png'); width:530px;height: 316px;} #form_wrap-contact:after {content:"";position:absolute; bottom:0px;left:0; background:url('http://4.bp.blogspot.com/-Ufp_JwBgLhE/Ugp1OAYZRPI/AAAAAAAAF9g/nWV0YQrBP8o/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(http://2.bp.blogspot.com/-GoNmkIDybR0/UZuZDpVOXaI/AAAAAAAAEO8/pNPaQU1aiwQ/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(http://3.bp.blogspot.com/-zGxMJ_C5R60/UZuZGnKgcuI/AAAAAAAAEPE/KwPOHFuBffc/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(http://4.bp.blogspot.com/-RzL4e1-qZD4/UZuZMsnxqSI/AAAAAAAAEPM/y-NS0XTs-x8/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>






  

How To Download Softwares | Deetechgh.tk

----------------------------------------------------------
 
Please wait 3 seconds and the click Get Link.




Click on 'SKIP AD' - Please Wait 5 seconds


No comments:

Post a Comment

You are welcome to share your ideas with us in the comment!