Create Contact us page easily for Blogger

Creating a contact page for blogger 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 blogger are some initial pages you should build when creating a blog on blogger, WordPress, Wix or any other platform.

Also read how to create XML sitemap for blogger

How to create contact us page for blogger

Contact us page for blogger is easy to make, just  click on new pages button.

how to add new page in blogger

Create 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 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-emailheight: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>

Wrapping up

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

Related Articles

Leave a Reply

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

Back to top button