Blogger
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.
- Copy & Paste below lines in white space.
- Click Save.
div#ContactForm1
{
display: none !important;
}
—————————————————————
Step 4:
- Go to Pages.
- Click the View icon of your Contact Us page to see how your Contact Us page looks like.
- Send an email to check whether it is working or not.
- In order to copy the link of your Contact Us page right-click over View icon and click “Copy Link Location”. It would be like: https://www.”Your Blog URL”/p/contact-us.html.
- Connect your Contact Us page with one of your menu item. Paste the copied link in that menu item.
- This is how the Contact Us Form looks like:
- If you like this post then don’t forget to share with people. Share your feedback in the comments section below.
Recommended Posts
- How To Display Google Ads On Blogger – Step By Step | Monetize A Blogger Blog | Earn Money Online
- How To Configure Google Search Console On Blogger | Add Sitemap | Inspect URL
- How To Add & Test Custom Robots Txt On Blogger/Blogspot | Blogger SEO
- How To Configure/Set The Custom Robots Header Tags On Blogger | Blogger SEO
