How To Create a Custom Contact Form For Blogger Blog

Today, I will explain how to create a Custom Contact Form for Blogger Blogs. Creating A Static Contact Page is of great importance so that your blog readers can easily get in touch with you via the contact page. Figure out how to alter Contact Form information fields, how to add symbols to it, how to include a "Clear Message Button" and play a few traps with your custom structure. This structure is constructed utilizing XHTML Get or Post Methods not at all like PHP Forms which are utilized generally today.

Contact Page

How To Create a Custom Contact Form For Blog

First, you have to create a Static Page where we will include the HTML code for our new contact form.

Login into your blog

Go to the Blog You Wish to add the Contact page > Click on Pages

Create a new Page

Give it any title you like. I suggest "Contact" or “Contact Us’’ (without quotes)

Switch to its HTML mode and copy and paste the following HTML and css code inside it:

<div class='form'> 
<!-- Custom Contact Form By MBT Starts -->
<form name='contact-form'>
<!-- Name Field -->
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' /> 
<p></p>
<!-- Email ID Field -->
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/> 
<p></p>
<!-- Message Field -->
<textarea class='contact-form-email-message'  id='ContactForm1_contact-form-email-message' name='email-message'  value='Leave Your Message..'  onblur='if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}' onfocus='if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}'></textarea> 
<p></p>
<!-- Clear Button --> 
<input class='contact-form-button contact-form-button-submit MBT-button-color' type='reset' value='Clear'/>  
<!-- Send Button -->  
<input class='contact-form-button contact-form-button-submit MBT-button-color' id='ContactForm1_contact-form-submit' type='button' value='Send'/> 
<p></p>
<!-- Validation --> 
<div style='text-align: center; max-width: 222px; width: 100%'> 
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p> 
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> 
</div> 
</form>
<!-- Custom Contact Form By MBT Ends --> 
</div>

Once you have pasted the code on the HTML section, don’t like on Compose again or the HTML code will change, instead Click on save and View the Contact Page.

Once your blog readers’ wants to contact you and use the contact form, the message would be sent to your gmail address or the email related to the blog admin instantly.

Customizing the Codes

If you feel the Contact page doesn’t look cool for you, then there is need customizing to. To Customize the Contact Page, follow the following steps

Go To Blogger > Template

Now Backup your Template, so that incase there is a flaw, you can easily restore your original template

Click "Edit HTML"

Now Click Ctrl+F to Search and type </head> 

Once you have found the </head>, just above it paste the following CSS code:

<style>
/*---- Compatible contact Form by MBT -----*/ 
.contact-form-name, .contact-form-email, .contact-form-email-message { 
max-width: 220px; 
width: 100%; 
font-weight:bold; 
}
      
.contact-form-name { 
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfgx_V6K77OjfHjhDX5kSqzswkQByzQuKIfjVr0Aa4D1lQB8jT4Suk8O2sbrUj5Ozkwe-ItfK1l919pY7BmIakPiwo8A7SCaAFqc6sNWI4DVlL-eLmd7DFeT4ytVC2tJxkDNSYjDM625s/s320/name.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; 
vertical-align: top;
} 
      
.contact-form-email { 
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNedWaGE4xvGAXVgq-22yTRcT9U-IJFmdbFqbSAzWgJguAnztV8-cGf84Aa6nQkPU4lTIFGLw3i9k16jcSqzR8g50hCQY5ARIie6NtWImQATBKOEatUCWaFlDht0u0PZ8NUAKJE4b_W80/s320/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; 
vertical-align: top;
}

.contact-form-email:hover, .contact-form-name:hover{ 
border: 1px solid #bebebe; 
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);

padding: 5px 15px 5px 28px;
}
.contact-form-email-message:hover { 
border: 1px solid #bebebe; 
box-shadow: 0 1px 2px rgba(5, 95, 255, .1); 
padding: 10px; 
}
.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: 350px!important; 
height: 150px; 
border-radius:4px; 
}

.contact-form-button { 
cursor:pointer; 
height: 32px; 
line-height: 28px; 
font-weight:bold; 
border:none; 
}

.contact-form-button { 
display: inline-block; 
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ 
*display: inline; 
vertical-align: baseline; 
margin: 0 2px; 
outline: none; 
cursor: pointer; 
text-align: center; 
text-decoration: none; 
font: 14px/100% Arial, Helvetica, sans-serif; 
padding: .5em 2em .55em; 
text-shadow: 0 1px 1px rgba(0,0,0,.3); 
-webkit-border-radius: .5em; 
-moz-border-radius: .5em; 
border-radius: .5em; 
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
box-shadow: 0 1px 2px rgba(0,0,0,.2); 
} 
.contact-form-button:hover { 
text-decoration: none; 
} 
.contact-form-button:active { 
position: relative; 
top: 1px; 
}

.MBT-button-color { 
color: #fef4e9; 
border: solid 1px #da7c0c; 
background: #f78d1d; 
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); 
background: -moz-linear-gradient(top, #faa51a, #f47a20); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); 
} 
.MBT-button-color:hover { 
background: #f47c20; 
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); 
background: -moz-linear-gradient(top, #f88e11, #f06015); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); 
border-color: #F47C20!important; 
} 
.MBT-button-color:active { 
color: #fcd3a5; 
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); 
background: -moz-linear-gradient(top, #f47a20, #faa51a); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a'); 
}
</style>

      <!--[if IE 9]> 
    <style> 
    
.contact-form-name { 
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfgx_V6K77OjfHjhDX5kSqzswkQByzQuKIfjVr0Aa4D1lQB8jT4Suk8O2sbrUj5Ozkwe-ItfK1l919pY7BmIakPiwo8A7SCaAFqc6sNWI4DVlL-eLmd7DFeT4ytVC2tJxkDNSYjDM625s/s320/name.png) no-repeat 7px 0px; 
}
.contact-form-email { 
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNedWaGE4xvGAXVgq-22yTRcT9U-IJFmdbFqbSAzWgJguAnztV8-cGf84Aa6nQkPU4lTIFGLw3i9k16jcSqzR8g50hCQY5ARIie6NtWImQATBKOEatUCWaFlDht0u0PZ8NUAKJE4b_W80/s320/email.png) no-repeat 7px 6px; 
}
    </style> 
    <![endif]--> 
    
    <style> 
@media screen and (-webkit-min-device-pixel-ratio:0) {

.contact-form-name { 
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfgx_V6K77OjfHjhDX5kSqzswkQByzQuKIfjVr0Aa4D1lQB8jT4Suk8O2sbrUj5Ozkwe-ItfK1l919pY7BmIakPiwo8A7SCaAFqc6sNWI4DVlL-eLmd7DFeT4ytVC2tJxkDNSYjDM625s/s320/name.png) no-repeat 7px 6px; 
padding: 15px 15px 15px 28px;

}
.contact-form-email { 
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNedWaGE4xvGAXVgq-22yTRcT9U-IJFmdbFqbSAzWgJguAnztV8-cGf84Aa6nQkPU4lTIFGLw3i9k16jcSqzR8g50hCQY5ARIie6NtWImQATBKOEatUCWaFlDht0u0PZ8NUAKJE4b_W80/s320/email.png) no-repeat 7px 8px; 
padding: 15px 15px 15px 28px;
}

.contact-form-email:hover, .contact-form-name:hover{ 
padding: 15px 15px 15px 28px; 
}

.contact-form-button { 
height: 28px;
}
}
</style>

The above style will work just fine with all browsers including Internet Explorer and make it responsive to be viewed by all browsers. The HTML and CSS code has been made compatible to work fine with all major browsers like IE, Mozilla and Webkit browsers.

To edit or change button colors edit the class .MBT-button-color

To edit or change the button color on mouse hover edit the class .MBT-button-color:hover  and for active mode edit.MBT-button-color:active

Next, Click Save.

You can now view the contact page and ensure to make the contact page link viewable in all pages of your blog for easy access by your blog readers.