How to add a contact form in Blogger | Add contact us form in blogspot without 3rd party gadget

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

How to add a contact form in Blogger | Add contact us form in blogspot without 3rd party gadget

Adding contact form in blogger static page.
Add contact us form in blogspot without 3rd party gadget

Blogger Contact Form Kaise Add kare Blog me Full Video Tutorial

Three steps process:

1. Add contact form
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 form
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;
}

some case it may be contactform 2 so place this code

#ContactForm2
{
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.

If you like this code is looks more good font size 

<div dir="ltr" style="text-align: left;" trbidi="on">

<form name="contact-form">

<div>

<div class="MsoNormal">

<span style="font-family: inherit;"><span style="font-size: 13.5pt; line-height: 107%;">Your Name</span></span><span style="font-family: inherit;"><span style="font-size: 13.5pt; line-height: 107%;">: </span></span><i><span style="font-family: inherit;">(</span>required)</i><span style="font-family: &quot;open sans&quot; , sans-serif;"><o:p></o:p></span></div>

</div>

<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="85" type="text" value="" />  

<br />

<div>

<br />

<div class="MsoNormal">

<span style="font-family: inherit;"><span style="font-size: 13.5pt; line-height: 107%;">Your Email</span></span>: <i><span style="font-family: inherit;">(re</span>quired)</i><span style="font-family: &quot;open sans&quot; , sans-serif;"><o:p></o:p></span></div>

</div>

<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="85" type="text" value="" />  

<br />

<br />

<div class="MsoNormal">

<span style="font-family: inherit;"><span style="font-size: 13.5pt; line-height: 107%;">Subject:</span></span><span style="font-family: &quot;open sans&quot; , sans-serif;"><o:p></o:p></span></div>

<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="85" type="text" value="" />  

<br />

<div>

<div class="MsoNormal">

<br />

<span style="font-family: &quot;open sans&quot; , sans-serif; font-size: 13.5pt; line-height: 107%;"><span style="font-family: inherit;">Your Message:</span><o:p></o:p></span></div>

<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" style="height: 190px; margin: 0px; width: 632px;"></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: 720px; 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>

</div>

</form>

</div>