How To Add A Contact Form & Create A Separate Contact Us Page On Blogger

Contact Form allows visitors of your blog to send message to your email. On Blogger it is pretty simple to add Contact US Form on your sidebar, you just have to add the “Contact Form” gadget from Layout.

Though it is so simple to add and display Contact Form on sidebar, but it is not considered as a professional practice. It is better to have a Contact Form on a separate page which we call Contact Us page.

In this tutorial we will guide you step-by-step to How to add a Contact Form and create a separate Contact Us page on Blogger.

Step 1:

• Go to your Blogger Dashboard.
• Click “Pages”.
• Click “+ NEW PAGE”.

• To change the view click the Pencil icon located at your left.

• Click HTML View.
• Now Copy & Paste the below code from “<!– Contact Form Code –>” from “<!– End Contact Form Code –>”
• Once you Paste the code switch the view to “Compose View”.
• Click Update.

——————————————————————-
<!– Contact Form Code –>
<style>
.page-contact-form input,
.page-contact-form textarea {
width: auto !important;
max-width: 612px !important;
margin-bottom: 10px;
padding:12px !important;
border:2px solid;
}
#post-body-9121950614495324366
{
height:440px;
}
.page-contact-form input.contact-form-button.contact-form-button-submit {
padding: 8px !important;
background: #000; /* Button background color */
color: #fff; /* Button text color */
border: none;
height: 39px;
font-size: 16px;
}

.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>
<br />
<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=”50″ 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 –>
—————————————————————-

Step 2:

The Contact Us Page is created. Now you have to add a “Contact Form” gadget from Layout. This Contact Form will not be visible on your blog. It will work in background and will provide the functionality to the contact form in Contact Us Page.

• Click Layout.
• Add this gadget in your sidebar section.
• Click “Add a Gadget”.

• Click the “Contact Form” gadget.

• Tick “Show Contact Form”.
• Click Save.

Step 3:

Since you have added the “Contact Form” in the above step now its time to hide that “Contact Form”. We will hide by adding CSS code.

• Click “Theme”.
• Click the “CUSTOMIZE” button.

• Click “Advanced”.
• Click “Add CSS”.

• Copy & Paste below lines in white space.
• Click Save.