How To Add Blogger Contact Form (HTML Code) Into A Page

Updated (Dec 21, 2021): The code has been updated and the form is working and submitting as expected.

In the previous tutorial, I showed you how to add Blogger’s official contact form to your Blogger blog. You can also add Blogger contact form into a page of your Blogger website. It will work absolutely fine and it will not break anything. Let me show you how:

Note: In order to add contact form to a page, you first need to add the contact form widget to the sidebar of your Blogger.

Hiding Contact Form From Your Sidebar

First, we need to hide the default contact form from your Blogger’s sidebar widget. Navigate to your Dashboard > Template > Edit HTML. Search and paste this code just above ]]></b:skin>:

#ContactForm1{
display: none !important;
}Code language: CSS (css)

Save your template.

Adding Contact Form To A Page

Now, we will add the contact form to a static page of your Blogger blog. Navigate to your Dashboard > Posts, and click on New Page and select Blank Page.

Now, in your blank page, click on HTML option to switch to HTML editor mode. Add following code and publish your page:

<form name='contact-form'>
<p></p>
Name<br />
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' value='' type='text' />
<p></p>
Email
<span style='font-weight: bolder;'>*</span><br />
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' value='' type='text' />
<p></p>
Message<span style='font-weight: bolder;'>*</span><br />
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' value='Send' type='submit' />
<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>Code language: HTML, XML (xml)

That’s it! You can also customize the contact form with custom CSS styling or jQuery.