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
- Yes, here some features and benefits of contact us page
- Fastest reaching the visitor’s message directly to email address
- professional looking interface and theme
- professional looking website or blog
- Easily can contact and direct
- 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.