How To Add Contact Us Page In Blogger Blog

Hello friends, if you are a new blogger or you have a website, and you want to make money from it, for this you will have to create some important pages (pages) in your blog or website. If you want to earn money through Adsense, then you will have to create all these necessary pages, otherwise you will not get Aproval from Adsense. The first and very important page of which is Contact Us.  In the contact page, you have to create a contact form. Through which viewers can contact you.

So friends, let me tell you that apart from contact page, there are more important pages, which you must make. If you want to earn money by placing ads in your blog or website through AdSense, then it is very important to create a page about - About Us, Privacy Policy, Terms and Conditions, Sitemap and Contact Us. If you make all these pages, then you can apply for adsense. And you get approval from Adsense very soon.

So, today In this article I will teach you that you can add contact us page to your blog or website by following very easy steps.

How To Add Contact Us Page In Blogger

• On the Blogger Dashboard, go to the Pages page.
• Create or open your Contact Page.
• Switch to HTML mode. Click on the HTML button.
• Paste the code below into the code window below your content.

<style>
#ContactForm1_contact-form-email,#ContactForm1_contact-form-name{width:70%;height:auto;margin:5px auto 15px;padding:10px;background:#ebebeb;border:1px solid #ccc;color:#777;border-radius:3px;}
#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{background:#fffff7;outline:0}
#ContactForm1_contact-form-email-message{width:95%;height:170px;margin:5px auto;padding:10px;background:#ebebeb;border:1px solid #ccc;color:#777;font-family:Arial,sans-serif;border-radius:3px;}
#ContactForm1_contact-form-submit{display:block;height:35px;float:left;color:#FFF;padding:0 40px;margin:10px 0 5px;cursor:pointer;background-color:#e0262c;border:none!important;border-radius:3px;text-shadow:0 1px 0 #de5135}
#ContactForm1_contact-form-submit:hover{opacity:.9}
#ContactForm1_contact-form-submit:active{position:relative;top:2px;}
#ContactForm1_contact-form-submit:focus{outline:0}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:15px;text-align:left}
@media screen and (max-width:768px){#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message,#ContactForm1_contact-form-name{width:96%}
}
@media screen and (max-width:480px){#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message,#ContactForm1_contact-form-name{width:94%}
}</style>
<div class='ContactForm'>
  <form name='contact-form'>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-name'>Nama</label><input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' type='text' value='' /></div>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-email'>Email<span>*</span></label><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' type='text' value='' /></div>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-email-message'>Message<span>*</span></label><textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message'></textarea></div>
    <div class='input-area'>
      <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send' /></div>
    <div class='notif-area'>
      <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
      <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
    </div>
  </form>
</div>
<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script><script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'XXXXXXXXXXXXXXXXXXX';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dXXXXXXXXXXXXXXXXXXX','//www.Website-URL/','XXXXXXXXXXXXXXXXXXX');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': 'XXXXXXXXXXXXXXXXXXX', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); 
//]]></script>

• Customize your setting. Find any word click F3 or Ctrl+F.

1. Replace it XXXXXXXXXXXXXXXXXXX with your Blog ID.
2. Replace it Website-URL with your Website URL.

• before publish your post see a preview of your blog post.
• If preview is correct then simply publish it.