How To Create a Contact us Page For Your Blogspot Blog

You might know that every website or blog has a contact us page, as it is the most important to a blog. A contact us page helps users to contact the owner of website or blog, it is the best way to contact bloggers.

And a contact us page is the most important to approve a Google Adsense Account, whether in these days Adsense policies are very strict but if your blog has a contact us page, then you have more chances to approve Adsense account.

Well, here I am going to show you how you can create a contact us page for your Blogspot blog. So the Blogspot is a free platform, therefore, this is a low-quality platform, people also use it for the practice in the beginning. This time Wordpress is the most popular in the world, in the Wordpress, you can easily create a contact us page, you just need to download a plugin and install it.

But in the Blogspot, you will need an HTML code of the contact form. I have left this code below, you can pest it on your contact us page. But here is something important you need to do before pest the HTML code on your contact us page.

How To Create a Contact us Page For Your Blogspot Blog

1. Add a Gadget Of Contact Form

First of all, you need to add the blogger contact form widget on your blog. This will enable the functionality of the contact form. So what to do?

1. Go to your Blogger Dashboard/ Overview.
2. Select the Layout section from the menu.
3. Click on the Add a Gadget on Sidebar.
4. A popup will show & click on More Gadgets.
5. Click on the Blue Plus Button on the Contact Form Gadget and then Save it.

2. Hide The Default Contact Form

1. Click on the Template menu and go to the Edit HTML button.
2. Now tap on the HTML area and press ctrl+F button on the keyboard.
3. A search box appear, here you type the code: ]]></b:skin> and hit Enter.
4. Now just paste the small CSS code just above this ]]></b:skin>.
5. Save your template and you are done.

Code:          
             div#ContactForm1 {
               display: none !important;
               }

Reload your blog and you will see the default contact widget disappears.

3. Awesome Icones To Contact Form

I have used some Font Awesome icons in these custom blogger contact form. So you will have to insert this stylesheet into your blog. For this,

In the HTML area search for </head> tag.
Copy the code below and paste it right above the </head>.
Click on the Save Template button.

Code:
  
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

4. Copy This Code and Pest it on Your Contact us Page

Now finally you can create static Contact Us page for the blogger. For doing this, we must create a contact us page on our blog.

- Go to the Pages section and click on the New page button.
- Fill up the Page Title with Contact Us/Contact and click on the HTML tab.
- Now copy the following code and paste it into the HTML mode of the page. 

Code:

<form name="contact-form"><span><i class="fa fa-pencil-square-o"></i> Name </span><br /> <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> <br /> <br /> <span><i class="fa fa-envelope-o"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span> <br /> <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <br /> <br /> <span><i class="fa fa-keyboard-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span><br /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br /> <input id="ContactForm1_contact-form-submit" type="button" value="Send" /> <br /> <div style="max-width: 222px; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><br /><style scoped="" type="text/css"> #comments,.post_meta,#blog-pager {display:none;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{ height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;} #ContactForm1_contact-form-email-message{width:95%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;} #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);} #ContactForm1_contact-form-submit{font-family:'Open Sans';float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease} #ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;} .contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;} .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;} img.contact-form-cross {line-height:40px;margin-left:5px;} @media only screen and (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}} </style>


So this is about How To Create a Contact us Page For Your Blogspot Blog. If this article is helpful for you, you can share it with your friends, and you can subscribe to our blog Grow-Experience.blogspot.com to get a lot of tips for online business.