How to Make Professional Web Blog: How to Setup Contact me Page ?

How to setup Step By Step Contact Form,

Step 1:

Blog Editor Area
Select Layout
Click Add a Gadget

Step 2:

Click on More Gadgets

Then Click on Contact Form

Now You See Added Contact Form like Following Picture

Note : End of process Above Side Tab Contact form will hide automatically

Step 3:

Then Click Page
Add New Page

Step 4:

Copy the Following HTML Code

Then Click On HTML

Then Paste It

Follwoing HTML Code to be Add on New Page (HTML Area) **

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
Name<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<br />
E-mail *<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<br />
Message *<br />
<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" />
<br />
<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>
</form>
</div>
</div>
</div>
</div>
**************************************

Step 5:

After Paste HTML Code

Click On Publish

Step 6:

Go to Blogger Edit Area
Click on Template Again Click on HTML

Step7:

Click on Contact Form 1

Click on Picture Shows Black button <b:includable id='main'>

Then Delete The Following Code In HTML Editor Area

Step8:

Then Following Code to be Delete

Then Save Templates

**Code to be Delete on HTML Editor Area*

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
<p/>
<data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
<p/>
<data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' 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 + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>