Blogger Tips: How to add a contact us page in Blogger?

Contact us page gives a professional look to a website. It makes site visitors readers to contact the owner personally when comment on a post is not suitable. It is also useful for people who use Blogger as a platform for business websites for interacting with its audience. Blogger has a contact form widget and we'll see here how to add it to Blogger like any other widgets, and also how to display contact form on a page instead of showing it in the widget areas.

Add contact form on Blogger

This will add a contact form in any region you choose. If yo want to display the contact form only in a page, you can do so by customizing a few lines of code. But this step is required.

Login to Blogger
In the Blogger Dashboard, click on "Layout"
Click "Add a gadget" in any region where the Contact Form widget is required.
In the windows that appears, click on "More Gadgets" from left sidebar.

After saving, the contact form is displayed in the region where it is added.

How to display the contact form in a Blogger page?

Now that we have added the contact form to one of the regions in the layout, we need to hide it so that is it not visible in the widget areas but in a page.

Hide the contact form widget:

To hide the contact form widget, do the following steps.
From the Blogger Dashboard, click on "Template"
Click "Edit HTML"
Click anywhere inside the template code page and press "CTRL+F" to enable the search bar.
Copy and paste "]]></b:skin>" in the search box and hit enter.
Once you find "]]></b:skin>", copy and paste the code below just before"]]></b:skin>"

#ContactForm1
{
display: none ! important;
}

NOTE: You can also add the above code in "Custom CSS"area by going to -

Template > Customize > Advanced > Add CSS

The above steps hides the contact form from display.

Displaying contact us on a Blogger page:

Once we have the contact form widget added and hidden, let's create a Blogger contact us page.

From the Blogger Dashboard, click on "Pages"
Click to add a new page
Give a ticket to the page such as "Contact" or "Contact Us" etc.
Click on HTML button next to COMPOSE to enter in HTML mode
If there are any default code, select all and remove.
Copy and paste the following code in the HTML text area.

<div dir="ltr" style="text-align: left;" trbidi="on">
<form name="contact-form">
<div align="left"> Your Name: </div>
<br />
<div align="left"><input class=" contact-form-name="" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value=""></div>
<br />
<div align="left">Your Email:
<span style="color: red; font-weight: bolder;">*</span></div>
<br />
<div align="left"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div>
<br />
<div align="left">Your Message:
<span style="color: red; font-weight: bolder;">*</span></div>
<br />
<div align="left"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea></div>
<br /><br />
<div align="left"><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /></div>

<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>
</div>

NOTE:

Since this is a contact us page, we do not want users to be able to comment on this page ideally. So disable comment on this page. To do so, click on "Options" on the right hand sidebar and disable comments.

Publish your page.
The Blogger Contact Us page is ready for use.
Test it by sending a message.

Author Description

Tech Tips Hub