How To Add a Contact Form on a Google Blogger Page

Hi in Article we introduce how to add WordPress like contact form in blogger without adding any widget, just with simple html code.

What is Contact Form

Contact form is an impotanmt page of a website allow to the visitor to send you an email for any improvements, information or complaints, Google Adsense also recommend contact form for approval.

There is HTML and CSS based Code you have to put in your website.

#1 CSS code

First of all, Visit your Customize > Edit HTML page, Click inside of the editor textarea and press CTRL+F (CMD+F on a Mac) and in the search bar type   ]]> and pasting this code directly before it.

.contact-form-widget {
margin-left:auto;
margin-right:auto;
width: 600px;
max-width: 100%;
padding: 0px;
color: #000;
}
.fm_name, .fm_email {
float:left;
padding:5px;
width:48%
}
.fm_message {
padding:5px;
}
.contact-form-name, .contact-form-email {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
height:40px;
padding:10px;
font-size:16px;
}
.contact-form-email-message {
width:100%;
max-width: 100%;
height:100px;
margin-bottom:10px;
padding:10px;
font-size:16px;
}
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
height:30px;
font-size:16px;
}
.contact-form-button-submit:hover{
background: #ffffff;
color: #000000;
border: 1px solid #FAFAFA;
}

Save the Tempalte, after inserting css.

#2 Adding HTML Code

<div class="widget ContactForm" id="ContactForm1"> <div class="contact-form-widget"> <div class="form"> <form name="contact-form"> <div class="fm_name"> Your Name: <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div> <div class="fm_email"> E-mail Address *: <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div> <div style="clear:both"> </div> <div class="fm_message"> Message *: <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" /> <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> </div> </div> </div>

Now Create a Page Names with Contact Us and paste the given code in the text area and save it.

And Finally Your Contact Us Page Completely Setup.

Thanks For Visiting, Team NoobSpot