Skip to main content

How To Add Contact Us Form To Blogger Static Page And Hide From Sidebar

It is very easy to add Contact Us Form to blogger page. Just follow the below steps

Step 1 : First add Contact Form in sidebar using Add a Gadget option in Layout section.

Step 2: Click on Layout and click Add a Gadget button and select Contact Form and save.


You can see contact form in sidebar of your website. You can hide the Contact Form in your sidebar after adding to static page.

Adding Contact Form To Static page

Step 3: Click on Pages on left side of your Dashboard and click New Page 

Step 4: Give title as Contact Us and Click on HTML button to switch to HTML editor mode and paste the following 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>
-----------------------------------
Now save and click on Publish button. Your Contact Form will look as shown below in your blog page


Note : Messages will be send to Blogger email. You can check your email inbox for messages.

Hiding Contact Form In Sidebar

Step 1 : To hide the contact form in sidebar just go to Blogger > Template and then Backup your template
Step 2 : Click Edit HTML
Step 3 . Search for </head>
Step 4 : paste the following code just above </head> and save the template that will hide the widget on sidebar.

<style>
#ContactForm1{ display:none!important;}   </style>

Note : The above code will hide the Contact Form on a Sidebar only. Don't remove the Contact Form Widget from the Layout. This widget will not show in the sidebarof your homepage. Instead it will show only in static blog Page.

Comments