In my Previous Post , I show - How to add Contact Form Widget for Blogger. Today , I'm gonna to tutorial on - " How to add Custom Style Contact Form widget for Blogger ". In this post section show to - how to customize Official contact form widget to use of css style and change style convert into facebook login form style.
How to add Custom Style Contact Form widget for Blogger
- First go to Blogger Dashboard>>Template>>Edit Html
- After CTRL+F to find <Body> or <Body tag and Paste below code after <body> tag.
<style type='text/css'>/*<![CDATA[*/#ContactForm1{ margin: 20px auto; padding: 18px 20px; width:310px; background: #3f65b7; background-clip: padding-box; border: 1px solid #172b4e; border-bottom-color: #142647; border-radius: 5px; background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6); background-image: -moz-radial-gradient(cover, #437dd6, #3960a6); background-image: -o-radial-gradient(cover, #437dd6, #3960a6); background-image: radial-gradient(cover, #437dd6, #3960a6); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5); box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);}#ContactForm1 h2 { margin-bottom: 20px; font-size: 16px; font-weight: bold; color: white; text-align: center; text-shadow: 0 -1px rgba(0, 0, 0, 0.4);}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email { display: block; width: 300px; height: 37px; margin-bottom: 20px; padding: 0 9px; color: white; text-shadow: 0 1px black; background: #2b3e5d; border: 1px solid #15243b; border-top-color: #0d1827; border-radius: 4px; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);}
#ContactForm1_contact-form-email-message {width: 300px; height: 170px; padding: 12px 20px 0px 20px; margin: 0 0 20px 0; background: #5E768D; background: -moz-linear-gradient(top, #546A7F 0%, #5E768D 20%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#546A7F), color-stop(20%,#5E768D)); /* webkit */ border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0px 1px 0px #f2f2f2;-webkit-box-shadow: 0px 1px 0px #f2f2f2; font-family: sans-serif; font-size: 16px; color: #f2f2f2; text-transform: uppercase; text-shadow: 0px -1px 0px #334f71; }#ContactForm1_contact-form-email-message:focus, #ContactForm1_contact-form-name,#ContactForm1_contact-form-email:focus { outline: 0; background-color: #32486d; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);}#ContactForm1_contact-form-submit {display: block; width: 300px; height: 37px; margin-bottom: 15px; font-size: 14px; font-weight: bold; color: #294779; text-align: center; text-shadow: 0 1px rgba(255, 255, 255, 0.3); background: #adcbfa; background-clip: padding-box; border: 1px solid #284473; border-bottom-color: #223b66; border-radius: 4px; cursor: pointer; background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed); background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed); background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed); background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);}#ContactForm1_contact-form-submit:active { background: #a4c2f3; -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);}/*]]>*/</style>
- At last Save all code.
How to Customize This Widget :
Customize contact form width:310px; in #ContactForm1 id and adjust input field width:300px;. At the end Customize your text area and Submit button css code.
If you like this tutorial drop your valuable comment and see my next tutorial on Create Separate Contact Page in Blogger.
See More Tutorials On :
0 comments:
Post a Comment