How to create a Contact us page for your blog/site.

How to create a Contact us page for a blogger or blogspot site.

It is not as easy to construct a Contact Us page for your site as it looks in blogger or blogspot. Though Blogger offers a Contact Us widget for your sidebar(Read here) but not a for fully dedicated Contact us page. So in this How-To tutorial we will learn that how can we easily create a fully dedicated Contact Us page for your website. Setting up a separate page for contact purpose is very professional and also makes your blog interface look clean. So, Lets start our tutorial for the topic- How to create Contact Us page in Blogger.

Read here-How to add a "Contact Form widget" to your Blogger sidebar.

Adding (Contact Us) Page to your blog-:

Follow the steps given below to include a contact us gadget on your website/blog:

Step 1: Visit blogger.com and log in to your account in which you want to add the contact us page.

Step 2: Click on Pages tab on the lefthand sidebar and Click on Create Page tab.

Step 3: Click on < >HTML view option that is the first option in the function toolbar.

Step 4: Copy the following code there-:

<div id="custom_ContactUsFromForBlogSpotBlogger" class="widget ContactForm">

<div class="contact-form-widget">

<div class="form">

<form name="contact-form">

<p></p>

Your Name

<br>

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

<p></p>

Your Email

<span style="font-weight: bolder;">*</span>

<br>

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

<p></p>

Your Message

<span style="font-weight: bolder;">*</span>

<br>

<textarea rows="5" name="email-message" id="ContactForm1_contact-form-email-message" cols="25" class="contact-form-email-message"></textarea>

<p></p>

<input type="button" value="Send" id="ContactForm1_contact-form-submit" class="contact-form-button contact-form-button-submit">

<p></p>

<div style="text-align: center; max-width: 222px; width: 100%">

<p id="ContactForm1_contact-form-error-message" class="contact-form-error-message"></p>

<p id="ContactForm1_contact-form-success-message" class="contact-form-success-message"></p>

</div>

</form>

</div>

</div>

<div class="clear"></div>

<span class="widget-item-control">

<span class="item-control blog-admin">

<a title="Edit" target="configContactForm1" onclick="return _WidgetManager._PopupConfig(document.getElementById("ContactForm1"));" href="//www.blogger.com/rearrange?blogID=8799058979810298021&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1" class="quickedit">

</a>

</span>

</span>

<div class="clear"></div>

</div>

 

Step 5: Now save and publish the page.

Task Completed🙂👍