Hi friends Today I Will going to show you how you can add a really awesome Contact form in a page of your blogger blog. This contact form looks really elegant and is very eye-catching. This is very Cool and simple form. Many people likes this from. Convert your simple and default form into my form..
Step :1 Adding the Official form
First -------- layout and add widget and click ------ to the more gadget first gadget is contact form so add this widget
Make a makeup in Css3
Go ==== Templates ===== and edit =====HTML===== Now add the below given CSS code just above ]]></b:skin> .
#ContactForm1{display:none;}#contact_wrap {margin: auto;width: 321px;height: 380px;padding: 25px;border-radius: 1em;border-top:1px solid #dbdbdb;border-right:1px solid #b2b2b2;border-left:1px solid #dbdbdb;border-bottom:1px solid #9d9d9d;background-color:#cccccc;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);box-shadow: 1px 1px 5px #ccc;}#contact_wrap h3{color: #e8f3f9;font-family:Georgia;font-size: 20px;font-style:italic;font-weight:bold;margin: 0 -36px 20px -36px;padding: 12px;text-align: center;text-shadow: 2px 0 0 #1f4962;-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;background-color: #3689b9;position: relative;}#contact_wrap h3:before {content: ' ';position: absolute;bottom: -10px;left: 0;width: 0;height: 0;border-style: solid;border-width: 10px 0 0 10px;border-color: #333 transparent transparent transparent;}#contact_wrap h3:after {content: ' ';position: absolute;bottom: -10px;right: 0;width: 0;height: 0;border-style: solid;border-width: 0 0 10px 10px;border-color: transparent transparent transparent #333;}#ContactForm1_contact-form-name{width: 270px;height:auto;margin: 5px auto;padding: 10px 10px 10px 40px;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrQgJMov6wvQudpyR07fMCydbANbsza9QM_odqtJ2bBTHcRRwEm6NQJLR7ru1KpStyZRJ7GloKjyA11d4ec2sRZBZ8vE2NoFY5d9-pmNuvWbLjOzrM4ILe1KpgsFbmW9niVI_T31P4H68/s1600/user.png)no-repeat 10px center;color:#777;border:1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;}#ContactForm1_contact-form-email{width: 270px;height:auto;margin: 5px auto;padding: 10px 10px 10px 40px;background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEv96gR1fcWha2ig5FeHAA2puPfOIgbLs2MGzNuRkHotrA3GHBK4fF9X6Qi3HSBDm1dKpX6xzfvyCvMZNjfkfIys_yz1-kMff9LR6wGhSGCY_Ac0SM5GBlF1jrGUCOshO8XkiJsqESc70/s1600/pen.png)no-repeat 10px center;color:#777;border:1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;}#ContactForm1_contact-form-email-message{width: 270px;height: 150px;margin: 5px auto;padding: 10px 10px 10px 40px;font-family:Arial, sans-serif;background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEyN1TMIUs8-LfsRMFW3f2OgalmmrOZyODk50fRwOsNAzsrtzZeQbdUMA6etcw2vEGIqOLMMB3K4TN3TQ6IxyfrU-dswkOIvU5VbEW-KgMqcJPTketK9nIyTWyrKQZhxYuYpJzNWwsq3E/s1600/msg2.png)no-repeat 10px 10px;color:#777;border:1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;}#ContactForm1_contact-form-submit {width: 95px;height: 30px;float: right;color: #FFF;padding: 0;cursor:pointer;margin: 25px 0 3px 0 0;background-color:#005a8a;border-radius:4px;text-shadow: 1px 0 0 #1f4962;-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;background-color: #3689b9;border:1px solid #194f6d;}#ContactForm1_contact-form-submit:hover {background:#4c9bc9;}#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 320px;margin-top:35px;}
Add Coding in HTML Page
First your on pages and create a new page paste this code....
Are you done now And Seen it Please Share this post in soical media. Thank you for watching the post. Please Share the website more and more peoples..... God bless you ......<div id="contact_wrap"><h3>Contact Us</h3><form name="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" size="30" type="text" value="" /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><input id="ContactForm1_contact-form-submit" type="button" value="Submit" /><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><style type="text/css">#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}</style>
Post a Comment