Customize Blogger contact form to better level

What really makes a blog great, content? No doubt content is primary but design is also a factor to make it successful. Blogger released contact form widgets more than 2 years back but never found a great design till now. Therefore I did an effort to create a better design for dark backgrounds with flat dark colors. Lets see how to do it.

Steps

If you haven't added any contact form widget then add it with following step, else skip the below step.

• Go to Blogger > Layout > Add Widget > More Widgets then select Contact Form and save it.
• Now got Blogger > Template > Edit HTML
• Click Jump to widget
• Select ContactForm1
• Now you would be scrolled to the Contact Form widget, if the code block is open then close it by clicking on the number aside of it like the one below:

• Now select the whole line, but make sure that block of code remain closed and replace the code with the below one:

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
        <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <i class='fa-user'/> <data:contactFormNameMsg/>
        <p>Write your full name</p>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <i class='fa-envelope'/> <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <p>We will write you back on it</p>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <i class='fa-comment'/> <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <p>Be descriptive</p>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
      </b:widget>

 Now we need to move on next part. Find ]]></b:skin> and add the following code above it.

.contact-form-widget .contact-form-name,.contact-form-widget .contact-form-email,.contact-form-widget .contact-form-email-message{
padding:10px 0;
text-indent:10px;
background:#eee;
color:#222;
max-width:100%;
border:none;
box-shadow:1px 1px 1px rgba(0,0,0,0.2);
margin-bottom:10px;
outline:none;
}
.contact-form-widget{
max-width:100%;
font:400 17px 'oswald','fontawesome',sans-serif;
}
.contact-form-widget i{
font-style:normal;
color:#dc3522;
}
.contact-form-widget p{
font: italic 400 13px 'open sans',sans-serif;
color: #bbb;
margin:5px 0;
}
.contact-form-button{
padding:5px 0;
width:100%;
background:#dc3522;
text-align:Center;
border:none;
height:40px;
outline:none;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}
.contact-form-button:hover{
background:#222;
}

Finally, if you have Font Awesome in your code then skip the step or if you have no idea about it then find </head> and put the following line above it. It will add icons in contact widget.

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Save Template and see the effect. If find something wrong, throw a comment.