Customise Blogger Official Contact Form Gadget by using Dynamic CSS

<div dir="ltr" style="text-align: left;" trbidi="on"> <div> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXZxJVeTq2gWbsWIacSQRXdIImoOijgc-ctyhBN0RZWQcnzO1I_obnWpMEhy7-EwiQSjq2M0Dw41iW8FBYBW0xHoLeXuAqPzTVFSYSO2LpekijLX1_50kCkCjpP3e9PI_K5D1T5a_AYoi6/s1600/blogger+contact+form1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Customise Blogger Official Contact Form Gadget by using Dynamic CSS" border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXZxJVeTq2gWbsWIacSQRXdIImoOijgc-ctyhBN0RZWQcnzO1I_obnWpMEhy7-EwiQSjq2M0Dw41iW8FBYBW0xHoLeXuAqPzTVFSYSO2LpekijLX1_50kCkCjpP3e9PI_K5D1T5a_AYoi6/s1600/blogger+contact+form1.png" title="Customise Blogger Official Contact Form Gadget by using Dynamic CSS" width="320" /></a></div> <br /> <i>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.</i><br /> <div> <br /></div> <table cellpadding="0" cellspacing="0" class="tr-caption-container" style="clear: right; float: right; margin-bottom: 1em; text-align: right;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1rp2xd2YK3M8K8Qj5ZJrmRTI6frFLzXSMDpEXrVgM5lH-dc0vQdsWHzpFa1g_a3LVzbzLJY-zHXxnO6ibt2d66wMrGclmpvkoCGgxGFynnbU3dwFQvcgueTAOJIATUqBf959VDK9YtD-i/s1600/blogger+contact+form.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Blogger Official Contact Form Gadget - The old look" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1rp2xd2YK3M8K8Qj5ZJrmRTI6frFLzXSMDpEXrVgM5lH-dc0vQdsWHzpFa1g_a3LVzbzLJY-zHXxnO6ibt2d66wMrGclmpvkoCGgxGFynnbU3dwFQvcgueTAOJIATUqBf959VDK9YtD-i/s1600/blogger+contact+form.png" title="Blogger Official Contact Form Gadget - The old look." width="185" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Blogger Official Contact Form Gadget - The old look .</td></tr> </tbody></table> <div> Here are the simple steps to customize the Blogger Official Contact Form Gadget by using CSS :</div> <div> <br /></div> <div> 1.) First of all, add the official contact form to your blog by following these simple steps :</div> <div> <br /></div> <div> <br /> <ul style="text-align: left;"> <li>Go To blogger dashboard>>layout.</li> </ul> </div> <div> <ul style="text-align: left;"> <li>Click on add a gadget link, wherever you want to add the gadget.</li> </ul> </div> <div> <ul style="text-align: left;"> <li>Now in the gadget lists click on the  <span style="background-color: orange; font-weight: bold;"><span style="color: orange;">||</span></span> <span style="color: orange; font-weight: bold;">More Gadgets </span>tab in the left sidebar. (see the fig. below)</li> </ul> </div> <div> <ul style="text-align: left;"> <li>Click on the  <span style="background-color: #0b5394; color: white;">+</span><span style="background-color: white; color: white;"> </span><span style="background-color: white;">button next to the contact form to add it.</span></li> </ul> </div> <div> <ul style="text-align: left;"> <li><span style="background-color: white;">You are done.</span></li> </ul> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpVHzVxlU1nl6mxs1ZmbJm6BMJrchDc8LLdPWbUjqclVwaoy3UmeUOsXfEg7XKKZ-hz27RtIFdCskNnaRus7vg8HfovmM1N7kEphBzFmjYsNjtNMqgf91Xp74ZtGWAjhBTgjtUB0zPsQfY/s1600/adding+contact+form.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Customise Blogger Official Contact Form Gadget by using Dynamic CSS" border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpVHzVxlU1nl6mxs1ZmbJm6BMJrchDc8LLdPWbUjqclVwaoy3UmeUOsXfEg7XKKZ-hz27RtIFdCskNnaRus7vg8HfovmM1N7kEphBzFmjYsNjtNMqgf91Xp74ZtGWAjhBTgjtUB0zPsQfY/s1600/adding+contact+form.png" title="Customise Blogger Official Contact Form Gadget by using Dynamic CSS" width="320" /></a></div> <div> <br /></div> <br /> <span style="background-color: white;"><br /></span> <br /> <table> <tbody style="background-color: #9fc5ee;"> <tr><td><div style="text-align: center;"> <span style="font-family: inherit; padding: 20px;"><b style="background-color: #ea9999;">Note :</b><b style="background-color: #ffe599;"> Skip This Box if you don't want to add the Contact gadget in a static page.</b></span></div> <span style="background-color: #9fc5e8; font-family: inherit;"><b><br /></b></span> <span style="background-color: #9fc5e8; font-family: inherit;"><b>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 :</b></span><br /> <span style="background-color: #9fc5e8; font-family: inherit;"><br />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 : </span><br /> <span style="background-color: #9fc5e8; font-family: inherit;"><br /></span> <br /> <ul> <li><span style="font-family: inherit;">Go to Blogger dashboard>>template.</span></li> </ul> <ul> <li>Click edit html and find the following code <b></b:skin</b> . You can do so by pressing ctrl+f and typing the code and hitting enter.</li> </ul> <ul> <li>After you find the code add this above the <b></b:skin :</b></li> </ul> <br /> <b><br /></b> <span style="background-color: #9fc5e8; color: white; font-family: Courier New, Courier, monospace;"><span style="line-height: 16.890625px;">#ContactForm1 {</span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;">display: none !important;</span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;">}</span></span><br /> <span style="background-color: #9fc5e8; font-family: inherit;"><br /></span> <br /> <ul> <li><span style="font-family: inherit;">Now save the template and go to the page where you want to add the contact form. Edit the page in the HTML mode and not in the compose mode in blogger post editor. And add the following code between the <div> </div> tags :</span></li> </ul> <span style="background-color: #9fc5e8; font-family: inherit;"><br /></span> <span style="background-color: #9fc5e8;"><span style="color: white; font-family: Courier New, Courier, monospace;"><span style="line-height: 16.890625px;"><form name="contact-form"></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><br /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;">    <br /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><br /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email ID" size="30" type="text" value="" /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;">    <br /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><br /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;">    <br /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><input class="reset-button" type="reset" value="Clear" /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;">    <br /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><div style="max-width: 222px; text-align: center; width: 100%;"></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"></div></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"></div></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"></div></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"></form></span></span></span><br /> <span style="background-color: #9fc5e8;"><span style="color: white; font-family: inherit;"><span style="line-height: 16.890625px;"><br /></span></span></span> <br /> <ul> <li><span style="line-height: 16.890625px;">Update or Publish the page.</span></li> </ul> <ul> <li><span style="line-height: 16.890625px;">You are done.</span></li> </ul> <br /> <span style="line-height: 16.890625px;"><br /></span></td> </tr> </tbody></table> <br /> 2.) Now you have added the Contact form gadget in your blog, its time to customize it. To do so,<br /> <br /> <br /> <ul style="text-align: left;"> <li>Go to the Blogger dashboard>> template</li> </ul> <ul style="text-align: left;"> <li>Click on Customise Button.</li> </ul> <ul style="text-align: left;"> <li>Click on advanced tab in the Template Customize.</li> </ul> </div> <div> <ul style="text-align: left;"> <li>Click Add CSS and add the following code.</li> </ul> <br /> <br /> <span style="font-family: Courier New, Courier, monospace;"><br />.contact-form-name, .contact-form-email, .contact-form-email-message {<br />max-width: 170px;<br />width: 100%;<br />font-weight:bold;<br />}<br /><br />.contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover {<br /> border: 1px solid rgb(221, 221, 221);<br /> box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset;<br />}<br /> <br />.contact-form-name {<br />background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsxsnXINT5hYM3AjSy95Po4hRlXDyriphrM6WVLpMn7tyx4ij-ynlayQ9hIjSO1GabRm9O-Lkpc_PYoW_3baJolWPXaA7jUukicSXZb0fJVctZk0PqkNEs3ZesS7VfCC2ByCC-4N2oEII/s1600/privacy-icon.png) no-repeat 7px 8px;<br />background-color: #FFF;<br />border: 1px solid #ddd;<br />box-sizing: border-box;<br />color: #A0A0A0;<br />display: inline-block;<br />font-family: Arial,sans-serif;<br />font-size: 12px;<br />font-weight:bold;<br />height: 24px;<br />margin: 0;<br />margin-top: 5px;<br />padding: 5px 15px 5px 28px;<br /> border-radius: 3px;<br />vertical-align: top;<br /> transition: all 0.2s ease-in-out;<br /> -moz-transition: all 0.2s ease-in-out; /* Firefox 4 */<br /> -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */<br /> -o-transition: all 0.2s ease-in-outs;<br />}<br /> <br />input.contact-form-name:focus {<br /> border: 1px solid rgba(82, 168, 236, 0.8);<br /> outline: 0px none;<br /> box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);<br /> border-radius: 3px;<br />}<br /><br />input.contact-form-email:focus {<br /> border: 1px solid rgba(82, 168, 236, 0.8);<br /> outline: 0px none;<br /> box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);<br /> border-radius: 3px;<br />}<br /><br />.contact-form-email {<br />background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7jhsor5rFfRkHK9VcsFjENRvjbHbKAYKEb0HDjC9ej81q9bWvbEv1zwVhoaXh3u7H9VxNsT2yEYIJ3sgQPX-DcQGrAZYgK_KhrEwxf5f0lsLKXaMcR8mqwMOu7Ux0FCsYJbRWjKACCXo/s1600/email.png) no-repeat 7px 10px;<br />background-color: #FFF;<br />border: 1px solid #ddd;<br />box-sizing: border-box;<br />color: #A0A0A0;<br />display: inline-block;<br />font-family: Arial,sans-serif;<br />font-size: 12px;<br />font-weight:bold;<br />height: 24px;<br />margin: 0;<br />margin-top: 5px;<br />padding: 5px 15px 5px 28px;<br /> border-radius: 3px;<br />vertical-align: top;<br /> transition: all 0.2s ease-in-out;<br /> -moz-transition: all 0.2s ease-in-out; /* Firefox 4 */<br /> -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */<br /> -o-transition: all 0.2s ease-in-outs;<br />}<br /><br />.contact-form-email-message {<br />background: #FFF;<br />background-color: #FFF;<br />border: 1px solid #ddd;<br />box-sizing: border-box;<br />color: #A0A0A0;<br />display: inline-block;<br />font-family: arial;<br />font-size: 12px;<br />margin: 0;<br />margin-top: 5px;<br />padding: 10px;<br />vertical-align: top;<br />max-width: 210px!important;<br />height: 110px;<br />border-radius:4px;<br /> transition: all 0.2s ease-in-out;<br /> -moz-transition: all 0.2s ease-in-out; /* Firefox 4 */<br /> -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */<br /> -o-transition: all 0.2s ease-in-outs;<br />}<br /><br /> .contact-form-email-message:focus {<br /> border: 1px solid rgba(82, 168, 236, 0.8);<br /> outline: 0px none;<br /> box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);<br /> }<br /><br />.contact-form-button {<br /> display: inline-block;<br /> vertical-align: baseline;<br /> margin: 8px 2px 0px;<br /> height: 28px;<br /> outline: medium none;<br /> cursor: pointer;<br /> text-align: center;<br /> text-decoration: none;<br /> font: 14px/100% Arial,Helvetica,sans-serif;<br /> padding: 0.3em 2em 0.55em;<br /> text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);<br /> border-radius: 0.5em;<br /> box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);<br /> background: none repeat scroll 0% 0% rgb(255, 126, 67);<br /> border: 1px solid rgb(255, 126, 67);<br /> width: 80px;<br />}<br /><br /> input.reset-button {<br /> display: inline-block;<br /> vertical-align: baseline;<br /> margin: 8px 2px 0px;<br /> height: 28px;<br /> outline: medium none;<br /> cursor: pointer;<br /> text-align: center;<br /> text-decoration: none;<br /> font: 14px/100% Arial,Helvetica,sans-serif;<br /> padding: 0.3em 2em 0.55em;<br /> text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);<br /> border-radius: 0.5em;<br /> box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);<br /> background: none repeat scroll 0% 0% rgb(255, 126, 67);<br /> border: 1px solid rgb(255, 126, 67);<br /> width: 80px;<br /> color: #FFF;<br />}<br /> input.reset-button:hover {<br />text-decoration: none;<br /> border: 1px solid #ff8942;<br /> background: #ff8942;<br />}<br /> input.reset-button:active {<br />position: relative;<br />top: 1px;<br />}<br /><br />.contact-form-button:hover {<br />text-decoration: none;<br /> border: 1px solid #ff8942;<br /> background: #ff8942;<br />}<br />.contact-form-button:active {<br />position: relative;<br />top: 1px;<br /> border: 1px solid #ff8942;<br />}<br /><br />.contact-form-button-submit:focus, .contact-form-button-submit.focus {<br /> border: 1px solid rgb(255, 137, 66);<br /> background: none repeat scroll 0% 0% rgb(255, 137, 66);<br /> }<br /><br />.contact-form-button-submit:focus:hover, .contact-form-button-submit.focus:hover {<br /> border: 1px solid rgb(255, 137, 66);<br /> background: none repeat scroll 0% 0% rgb(255, 137, 66);<br /> box-shadow: 0px 0px 0px 1px #ff8942 inset, 0px 1px 1px rgba(0, 0, 0, 0.1);<br />}<br /><br />/*for FireFox*/<br /> input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner<br /> { <br /> border : 0px;<br /> } <br />/*for IE8 */<br /> input[type="reset"]:focus, input[type="button"]:focus<br /> { <br /> outline : none; <br /> }</span><br /> <span style="font-family: Courier New, Courier, monospace;"><br /></span> <span style="font-family: Courier New, Courier, monospace;"><br /></span></div> <div> 3.) Finally Save the changes and View you blog to see the Customization. (See the figure below)</div> <div> <br /></div> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihiS5HkKOvN_zkZA0TKloiuwHQ2CozQo_boZZ3YRpCazfiAV2IY1wlQja-iyuBU-UUmfc-S9hp1iuNYfFZTJd0MT3f0MFe5ZEQfwEwOG75CJMXAZBU_4_4IjTxNBq1xVZASb6vdooDeLLC/s1600/blogger+contact+form2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="The New Look. Much better than the old one." border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihiS5HkKOvN_zkZA0TKloiuwHQ2CozQo_boZZ3YRpCazfiAV2IY1wlQja-iyuBU-UUmfc-S9hp1iuNYfFZTJd0MT3f0MFe5ZEQfwEwOG75CJMXAZBU_4_4IjTxNBq1xVZASb6vdooDeLLC/s1600/blogger+contact+form2.png" title="The New Look. Much better than the old one." width="320" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">The New Look. Much better than the old one.</td></tr> </tbody></table> <div> <br /></div> <div> <br /></div> <h3 style="text-align: left;"> <span style="color: #b45f06;">Features of this Dynamic CSS :</span></h3> <div> <ol style="text-align: left;"> <li>Original Contact form gadget contains no clear/reset button. But these will have.</li> <li>The <b>:focus</b> styling adds more beauty to it.</li> <li><b>placeholder</b> is included making it easy for the visitors to understand whether they are inputting right or not.</li> <li>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.</li> <li>The width and height of the text-area is fully controllable.</li> </ol> </div> <div> <i><br /></i></div> <div> <i>Having any Problems? Let me know via comments section.</i></div> <div> <br /></div> <div> <br /></div> <div class="separator" style="clear: both; text-align: center;"> </div> </div>

Customise Blogger Official Contact Form Gadget by using Dynamic CSS

Few months ago blogger added the contact form gadget in its gadget list and it got popularized very quick. But the Problem with the of...

Read more »