Simple Contact form for blogger

Turn your default contact form widget into a simple, Pro and elegant contact page, having a contact page is the best and professional way to let your visitors get in touch with you aside from adding a comment form on your blog, because of some purposes maybe our visitors want to ask a private questions so it's better to offer your contact form.

Why Simple, Pro and elegant?

Look the image below and maybe it can help you to find out why it's simple Pro! "Before" is the default contact form widget on blogger, and"After" is the contact form after you apply this tutorial.

Live Preview

For me, it's simple pro because it will be fitted in any design of the template, but after you try the "Live Preview"a and you're not satisfied with this then you're free to try another tutorial, but if you like to have this Pro and simple contact form then scroll down and look for the Implementation Guide.

Implementation Guide

•  First, we have to add Blogger's contact form to the sidebar. Don't worry though, we will hide it later. Go to your blogger dashboard > Layout > Add a Gadget > More Gadgets > Contact Form.


• Once you have this the default contact form will appear on the sidebar.


• Now Go ahead and create a New Blank page, but if you already have this then go ahead and open it.


• Copy the code below and paste it on the page you want to serve as your contact page.

<span style="font-size: large;"><i>Send us a message for your inquiry.&nbsp;</i></span><br /> <span style="font-size: large;"><i><br /></i></span> <span style="font-size: large;"><i>&nbsp;Please fill out the form below and click "Send"&nbsp;</i></span><br /> <span style="font-size: large;"><i>We will get back to you as soon as possible!&nbsp;</i></span><br /> <div> <br /></div> Name <span style="color: red;">*</span><br /> <form name="contact-form"> <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br /> <br /> Email <span style="color: red;">*</span><br /> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br /> <br /> Message <span style="color: red;">*</span><br /> <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br /> <br /> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /><br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<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>
<h3>
</h3>

• After you copy the following code you need to save it.


• Copy the CSS code and add in you template before the ]]></b:skin> below for the final look of your contact form.

 /*Pro Contact Form by bedoiTechsolutions
----------------------------------------- */
.contact-form-name, .contact-form-email {
max-width: 200px;
width: 100%;
}
.contact-form-email-message
{ max-width: 400px
; width: 100%;
height: 150px;}
#ContactForm1{display: none !important;}

• Save your template and finally your done go ahead and check your simple and Pro Blogger Contact form.