How to Add Contact Us Page in Blogger

Having a contact page for us on blogger, which is very important to you. Because it enhances your interaction with blog readers. After reading your blog, if anyone needs your help or has a private contact or suggest something, you will need this page. But if you do not have this page on your blogspot site, you will miss them.

In this article, I will share how you can add a contact form to a blogger and how you can add this to our contact page.

Add a contact page to Blogger

If you want to create a custom blogger contact form, you will need to follow these steps:

#1 Step: Go to your blogger dashboard > Layout > Add a Gadget

#2 Step: Now click on Contact form & finally save.

#3 Step: In this step, you need to hide the blogspot contact form from sidebar. So, go to Theme > Edit HTML > Paste following CSS code before </head> tag. (you can use Ctrl+F to find the tag).

div#ContactForm1 {display: none !important;}

Now you have successfully hide contact form blogger widgets from the blog sidebar.

#4 Step: Now go to Pages > New Page > HTML & paste following code:

If you need help, have suggestion or complain, then use this contact form to contact with us!<br />
<div class=”widget ContactForm” id=”custom_ContactForm1″>
<div class=”contact-form-widget”>
<div class=”form”>
<form name=”contact-form”>
<br />
<input class=”contact-form-name” id=”ContactForm1_contact-form-name” name=”name” size=”28″ type=”text” value=”” />

<span style=”font-weight: bolder;”>*</span>
<br />
<input class=”contact-form-email” id=”ContactForm1_contact-form-email” name=”email” size=”28″ type=”text” value=”” />

<span style=”font-weight: bolder;”>*</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=”Send” />
<br />
<div style=”max-width: 222px; text-align: center; width: 100%;”>
<div class=”contact-form-error-message” id=”ContactForm1_contact-form-error-message”>
<div class=”contact-form-success-message” id=”ContactForm1_contact-form-success-message”>
<div class=”clear”>

Note: You must provide your page name as Contact Us and finally Publish the page.

Step # 5: You are now successfully wrapping the amazing contact form of the blogspot website. Just publish the page and make readers visible.

If you follow these tutorials step by step, you will be able to add a contact page to our blogger. But if you encounter any issues during the creation of the page, then enter your important comment. Because commenting is a good solution for everyone.


Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button Protection Status