How to Add Contact Us Page in Blogger



Contact us page is very vital one for Blog and websites as it one of connecting method to reach us freely and simply for our costumer or readers. But creating a contact us page in blogger much difficulty, as it’s simple plugin in WordPress and others. Some of bloggers getting or drag to third party contact form plugins.

It is a simple way on sidebar as WordPress, but so bore looking on the blog theme and many of bloggers avoiding it. Every one trying to eye catching contact us page not just gadget or widget on sidebar, because the widget appear all time even it on a post.

Why you need a Contact Us page

  1. Yes, here some features and benefits of contact us page
  2. Fastest reaching the visitor’s message directly to email address
  3. professional looking interface and theme
  4. professional looking website or blog
  5. Easily can contact and direct
  6. Getting privacy for you by hiding the email address by manual type and widget with for everyone. 

Now, we are share some steps or tips to create contact us page on blogger and widget adding as well here.

1. Add the Contact Gadget Form Gadget Store of Blogger





  • Log in to your blogger with registered email address. If you have more than one blog, you need to select your blog that to be changed or added a contact us page.
  • On the blogger interface, you can find out Layout tag on left sidebar.
  • On the Layout option, get an option to add gadgets and click on them it may be on the right side.
  • Then select contact us gadget from gadgets and add it.
  • Before saving the gadget, ensure the contact form is enable for visible and check it manually on blog preview.

Now, contact us form is ready for blogger on the sidebar, but its every boring one so, we need to create a contact us page and hide the contact us form of side bar.

Important: Before you continue to contact us page, you are required to add a contact form on Blogger and ensure the visible. If you remove the contact us gadget or disable the show contact form checkbox, then contact page and form will not work. But you can hide it with some codes and tricks.

2. Hide the contact form with codes



  • On the blogger dashboard, go to the theme tag
  • Then you can find three dots and click them and select Edit HTML option
  • Then, front of you, the theme window will open with editable.
  • Search for the following code (ensure you are searching in the Html interface, not on the page.

To search press control + F in the html table.) 

Search: ]]></b:skin>

paste below code just before it

div#ContactForm1{display: none !important;}

Ensure the codes pasted and above it.

Now, click on the save button and wait for process and getting notification with updates successful.

Now, you are completed the second section; now we are going to add a page with name of contact us.

3. Add a contact us page



  • On the Blogger dashboard, go to the Pages tag
  • Open it, you can see some pages if you already created or can not ; if not
  • Create a new page
  • Entitle and name it Contact Us or something you wish
  • On the text wall you can also add something as it same as of other pages like texts, images, maps or more.
  • Then, you need to paste following codes to text wall
  • Switch to html mode from compose.

<!-- Contact Form Code -->

<style>

.page-contact-form input,

.page-contact-form textarea {

width: 100%;

max-width: 100%;

margin-bottom: 10px;

}

 

.page-contact-form input.contact-form-button.contact-form-button-submit {

padding: 10px;

background: #000; /* Button background color */

color: #fff; /* Button text color */

border: none;

}

 

.page-contact-form input.contact-form-button.contact-form-button-submit:hover {

background: #777; /* Button background hover color */

color: #fff; /* Button text hover color */

}

 

</style>

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

<div class="form">

<form name="contact-form">

Name:<br />

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

E-mail: <span id="required">*</span><br />

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

Message: <span id="required">*</span><br />

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

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

<br />

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

</form>

</div>

</div>

 

<!-- End Contact Form Code -->

 

Finally click on publish or update button to save it.

Yes, now you are created a contact us page not a sidebar gadget with simple and just pasting codes to a page. Now it looking as a professional blog and you can edit and design that you wish if you advance in CSS coding.