Add contact form to your your blog page

For you (like me) managing business blogs or websites must have been familiar with online form.
It is a form placed at one separated page to get the visitors to your blog or website to contact you.
Whether they want to ask question about your product, enquiry or reservation, etc.

Blog platform like wordpress has long included contact form to one of its' features.
Blogger / Blogspot has been recognized to provide contact form widget feature since 2013.

If any of you want to give it a try to place the contact form at the certain page of your blog you can do these steps.

Step 1.

• Go the layout section page.
• Add new gadget ... choose ContactForm.
• Place the contact form at any provided area.

Step 2.

• Make / create a new page.
• Switch to Edit HTML mode and paste these codes.

<form name="contact-form">
<p></p>
Your Name:
<span style="font-weight: bolder;color:red;">*</span><br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<p></p>
Your Email Address:
<span style="font-weight: bolder;color:red;">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
<p></p>
Your Message: <span style="font-weight: bolder;color:red;">*</span><br />
<textarea class="contact-form-email-message"  id="ContactForm1_contact-form-email-message" name="email-message" cols="25" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button" />
<p></p>
<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>

*You can change the words in the yellow highlight to any words you want.

• Next, save the page.

Step 3.

• Open your template HTML editor and find the   ]]></b:skin> 
• copy and paste these code above the   ]]></b:skin>

#ContactForm1
{
display: none ! important;
}

Step 4.

• Find these following codes and delete them.

<form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' 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 + &quot;_contact-form-email&quot;' 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 + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' 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 + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>

• Last, save template and done.