How to add Blogger's contact form on Static Page

This is a simple way to add blogger's contact form in blogger pages instead of widget. We have upgraded the code to give it professional look. No long coding or science to apply this form on your blog. Rather than using contact forms from other sources, its best to use blogger's contact form.

Adding Blogger contact form on Pages

blogger contact form
Search for paste below css code above it.
.contact-form-widget {margin-left:0; margin-right:auto; width: 600px; max-width: 100%; padding: 0px; color: #000;} .new-name, .new-email {float:left; padding:5px; width:260px;} .new-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; cursor:pointer; width: 120px; margin-bottom: 10px; height:30px; font-size:16px; } .contact-form-button-submit:hover{background: #eee; color: #000000; border: 1px solid #ccc; } Go to Pages > Create a new page > Paste below code in the html area. Click to publish.
<div class="widget ContactForm" id="ContactForm1"> <div class="contact-form-widget"> <div class="form"> <form name="contact-form"> <div class="new-name"> Your Name: <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div> <div class="new-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="new-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>

Subscribe for our Newsletter

Back to top