How to Add a Contact Form In a page in Blogger

Blogger only allows you to add a contact form in the gadget area, that can be either the sidebars of the blog or the footer area.

So for most of you who are under blogger, on your contact page, you cannot add a form to that page to enable your audience to seek a direct solution to a problem by contacting you privately. So what most of the people do is to drop off their email and a bunch of their social accounts handle to be reached.
But I will show you how you can successfully add the contact form to your contact page in blogger.

Adding a Contact Form to a Contact Page
1. First Login your Blogger Account

2. Navigate to Layout, you will then have to add a gadget anywhere in your blogger. I suggest you add it in the sidebars or footer.

3. When you click on Add Gadget, in the new windows that will open Navigate to more gadget.

4. Then select contact form from the menu.

5. Then go back to Theme > Edit HTML. You will now have to make that contact form not to be visible because we want it to show only on your contact page.
Use CTRL+F to locate this code on your blogger HTML ]]></b:skin> Then paste the code below directly above it.

#ContactForm1{
display: none !important;
}

6. Now save your Theme. If you visit you blog now you would no longer see the contact form in your homepage, because it has been hidden. It's time to add that form to our page.

7. You can either create a new page and name it "Contact" or edit you Contact page.
In the page change the compose to HTML post format in your top left area and add the following code

<form name="contact-form">
Name<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> Name <span style="font-weight: bolder;">*</span><br />
<span style="font-weight: bolder;"><br /></span>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> E-mail<span style="font-weight: bolder;">*</span><br />
<span style="font-weight: bolder;"><br /></span>
<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>

8. Now save your page and publish it. Your page will now be like this.

If this was helpful, don't forget to share on social media and drop your testimonies and issues below.