Connect with us

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

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

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”.
How To Add A Contact Form & Create A Separate Contact Us Page On Blogger 1
  • To change the view click the Pencil icon located at your left.
How To Add A Contact Form & Create A Separate Contact Us Page On Blogger 2
  • 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.
How To Add A Contact Form & Create A Separate Contact Us Page On Blogger 3

——————————————————————-
<!– 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 –>
—————————————————————-

 

Blogger Templates

 

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”.
How To Add A Contact Form & Create A Separate Contact Us Page On Blogger 4
  • Click the “Contact Form” gadget.
How To Add A Contact Form & Create A Separate Contact Us Page On Blogger 5
  • Tick “Show Contact Form”.
  • Click Save.
How To Add A Contact Form & Create A Separate Contact Us Page On Blogger 6

 

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.
How To Add A Contact Form & Create A Separate Contact Us Page On Blogger 7
  • Click “Advanced”.
  • Click “Add CSS”.
How To Add A Contact Form & Create A Separate Contact Us Page On Blogger 8
  • Copy & Paste below lines in white space.
  • Click Save.
How To Add A Contact Form & Create A Separate Contact Us Page On Blogger 9
—————————————————————

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.
How To Add A Contact Form & Create A Separate Contact Us Page On Blogger 10
  • This is how the Contact Us Form looks like:

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

 

  • If you like this post then don’t forget to share with people. Share your feedback in the comments section below.

 

Recommended Posts

 

Click to comment

Leave a Reply

Your email address will not be published.

More in Blogger

Advertisement
Advertisement
Best Online Trendy Money Making Skills
Get Namecheap Shared Hosting With Free Domain
Download Cheap Website Themes
To Top