How to add a contact form in Blogger blog in a satic page without using any third party service

Adding contact form in blogger static page.

Three steps process:

1. Add contact fomr
2. Hide contact form from sidebar
3. Add HTML code in a blogger static page to show the contact form


► Step 1

Adding contact form

1. Go to layout
2. Add a contact fomr
3. Save arrangement

The contact form has been added to the sidebar.

► Step 2

We will be hiding the contact form from sidebar.

1. Go to Template
2.  Do a Ctrl + F and search for ]]></b:skin>
3. Right above that add the below code

#ContactForm1
{
display: none! important;
}

4. Save template

Note: Backup your template before making changes to the template.


► Step 3

1. Add a new static page
2. Click the HTML view and add the below code

<form name="contact-form">
<p></p>
Your Name:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<p></p>
Your Email:
<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>


3. Save and publish the page.

Note: Make sure under options the  line break is set to <br> tag and not Enter.


That's it!


[Codes: source]