How To Create Contact us page easily for Blogger

Creating a contact page for bloggers is one of the essential steps before you can apply for AdSense approval. Creating a sitemap, cookie policy, privacy policy, disclaimer, terms and conditions and Contact page for bloggers are some initial pages you should build when creating a blog on blogger, WordPress, Wix, or any other platform.

Advertisement

Contact us page is necessary for all websites so that visitors can contact the webmaster if they have any queries, suggestions, or even any disagreements.

Not only Adsense but most of the Advertising networks like Mediavine, Adthrive, Ezoic, Media dot net, or affiliate networks won’t approve your websites unless you have a proper contact us page in your blog or website.

Advertisement

In WordPress or on other CMS you can create this page through Plugins like ‘WPForms’ or others but Bloggers still does not support any plugins and it is more dependent on manual work.

To create a contact us page in blogger is no rocket science and needs no expertise. Just follow the steps described below and you can create a new contact us page in few minutes.

Advertisement

Also read how to create an XML sitemap for blogger

How to create contact us page for blogger

Contact us page for bloggers is easy to make.

  • Open the blogger website and log in with your username and password
  • Go to the Dashboard of the blog in which you want to create a contact page.
  • Click on the New page option on the top of the dashboard
how to add new page in blogger

Create a contact us page for blogger

  • After this, a new page will appear, write the title as ” Contact Us ” and change the view to HTML mode.
contact us page for blogger

Create a contact us page for blogger

  • Then copy and paste the below code and publish the page.

<div dir="ltr" style="text-align: left;" trbidi="on">

  <pre class="ndfHFb-c4YZDc-fmcmS-DARUcf"

    style="background-color: white; font-family: &quot;Courier New&quot;, Courier, 

monospace, arial, sans-serif; font-size: 16px; overflow-wrap: break-word; user-select: 

text; white-space: pre-wrap;"><div style="background-color: lightgreen; color: white; 

padding: 10px;">

<pre class="ndfHFb-c4YZDc-fmcmS-DARUcf" style="font-family: &quot;Courier New&quot;, 

Courier, monospace, arial, sans-serif; overflow-wrap: break-word; user-select: text;

white-space: pre-wrap;"><form name="contact-form">

<i class="fa fa-pencil-square-o"></i> Name 

 <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> 

 

 <i class="fa fa-envelope-o"></i> Email Address <span style="color: #f56954; 

font-size: xx-small; font-weight: bold;">important</span> 

 <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" 

value="" /> 

 

 <i class="fa fa-keyboard-o"></i> Content <span style="color: #f56954; 

font-size: xx-small; font-weight: bold;">important</span>

 <textarea cols="25" id="ContactForm1_contact-form-email-message" 

name="email-message" rows="5"></textarea> 

 <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>

<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>

</pre>

  <div>

  </div>

</div>

</pre>

</div>
  • Your contact us page is now ready

Wrapping up

This is the best and easy way to create a contact us page for bloggers, just follow these steps. If you have any queries or suggestions please feel free to comment below.

Leave a Comment