Few months ago blogger added the contact form gadget in its gadget list and it got popularized very quick. But the Problem with the official contact form gadget designed by the blogger team is that it has a very simple and plain look. And if you too are bored with the plain look of the gadget and want to add some CSS magic to it this post is for you. Today in this post I am going to share the code developed by TWBLab that will add some CSS magic to the contact form gadget.
 |
| Blogger Official Contact Form Gadget - The old look . |
Here are the simple steps to customize the Blogger Official Contact Form Gadget by using CSS :
1.) First of all, add the official contact form to your blog by following these simple steps :
- Go To blogger dashboard>>layout.
- Click on add a gadget link, wherever you want to add the gadget.
- Now in the gadget lists click on the || More Gadgets tab in the left sidebar. (see the fig. below)
- Click on the + button next to the contact form to add it.
- You are done.
Note : Skip This Box if you don't want to add the Contact gadget in a static page.
But if you want to add the contact widget in a static page follow the above steps and after that follow the steps given below : Now you have added the contact widget in your blog and want to add it in a static page, firstly you have to hide it from wherever you have added it. For that :
#ContactForm1 { display: none !important; }
<form name="contact-form"> <br /> <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /> <br /> <br /> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email ID" size="30" type="text" value="" /> <br /> <br /> <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br /> <input class="reset-button" type="reset" value="Clear" /> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /> <br /> <div style="max-width: 222px; text-align: center; width: 100%;"> <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div> <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> </div> </div> </form>
|
2.) Now you have added the Contact form gadget in your blog, its time to customize it. To do so,
- Go to the Blogger dashboard>> template
- Click on Customise Button.
- Click on advanced tab in the Template Customize.
- Click Add CSS and add the following code.
.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: 170px;
width: 100%;
font-weight:bold;
}
.contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover {
border: 1px solid rgb(221, 221, 221);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset;
}
.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsxsnXINT5hYM3AjSy95Po4hRlXDyriphrM6WVLpMn7tyx4ij-ynlayQ9hIjSO1GabRm9O-Lkpc_PYoW_3baJolWPXaA7jUukicSXZb0fJVctZk0PqkNEs3ZesS7VfCC2ByCC-4N2oEII/s1600/privacy-icon.png) no-repeat 7px 8px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
border-radius: 3px;
vertical-align: top;
transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out; /* Firefox 4 */
-webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.2s ease-in-outs;
}
input.contact-form-name:focus {
border: 1px solid rgba(82, 168, 236, 0.8);
outline: 0px none;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
border-radius: 3px;
}
input.contact-form-email:focus {
border: 1px solid rgba(82, 168, 236, 0.8);
outline: 0px none;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
border-radius: 3px;
}
.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7jhsor5rFfRkHK9VcsFjENRvjbHbKAYKEb0HDjC9ej81q9bWvbEv1zwVhoaXh3u7H9VxNsT2yEYIJ3sgQPX-DcQGrAZYgK_KhrEwxf5f0lsLKXaMcR8mqwMOu7Ux0FCsYJbRWjKACCXo/s1600/email.png) no-repeat 7px 10px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
border-radius: 3px;
vertical-align: top;
transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out; /* Firefox 4 */
-webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.2s ease-in-outs;
}
.contact-form-email-message {
background: #FFF;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: arial;
font-size: 12px;
margin: 0;
margin-top: 5px;
padding: 10px;
vertical-align: top;
max-width: 210px!important;
height: 110px;
border-radius:4px;
transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out; /* Firefox 4 */
-webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.2s ease-in-outs;
}
.contact-form-email-message:focus {
border: 1px solid rgba(82, 168, 236, 0.8);
outline: 0px none;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
}
.contact-form-button {
display: inline-block;
vertical-align: baseline;
margin: 8px 2px 0px;
height: 28px;
outline: medium none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial,Helvetica,sans-serif;
padding: 0.3em 2em 0.55em;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
border-radius: 0.5em;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
background: none repeat scroll 0% 0% rgb(255, 126, 67);
border: 1px solid rgb(255, 126, 67);
width: 80px;
}
input.reset-button {
display: inline-block;
vertical-align: baseline;
margin: 8px 2px 0px;
height: 28px;
outline: medium none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial,Helvetica,sans-serif;
padding: 0.3em 2em 0.55em;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
border-radius: 0.5em;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
background: none repeat scroll 0% 0% rgb(255, 126, 67);
border: 1px solid rgb(255, 126, 67);
width: 80px;
color: #FFF;
}
input.reset-button:hover {
text-decoration: none;
border: 1px solid #ff8942;
background: #ff8942;
}
input.reset-button:active {
position: relative;
top: 1px;
}
.contact-form-button:hover {
text-decoration: none;
border: 1px solid #ff8942;
background: #ff8942;
}
.contact-form-button:active {
position: relative;
top: 1px;
border: 1px solid #ff8942;
}
.contact-form-button-submit:focus, .contact-form-button-submit.focus {
border: 1px solid rgb(255, 137, 66);
background: none repeat scroll 0% 0% rgb(255, 137, 66);
}
.contact-form-button-submit:focus:hover, .contact-form-button-submit.focus:hover {
border: 1px solid rgb(255, 137, 66);
background: none repeat scroll 0% 0% rgb(255, 137, 66);
box-shadow: 0px 0px 0px 1px #ff8942 inset, 0px 1px 1px rgba(0, 0, 0, 0.1);
}
/*for FireFox*/
input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
{
border : 0px;
}
/*for IE8 */
input[type="reset"]:focus, input[type="button"]:focus
{
outline : none;
}
3.) Finally Save the changes and View you blog to see the Customization. (See the figure below)
 |
| The New Look. Much better than the old one. |
Features of this Dynamic CSS :
- Original Contact form gadget contains no clear/reset button. But these will have.
- The :focus styling adds more beauty to it.
- placeholder is included making it easy for the visitors to understand whether they are inputting right or not.
- No ugly dotted lines at the border are formed on the buttons after clicking them but in the official gadget there were ugly dotted lines created at the border after clicking the button.
- The width and height of the text-area is fully controllable.
Having any Problems? Let me know via comments section.
Post a Comment Blogger Disqus