How to add contact us page in blogger?

First of all you have been reached to this topic then probably you are thinking about submitting your website or blog to AdSense for approval then if this is true then congrats you are in right path and you are pretty serious about our website. Yeah all knows for approval we need contact us , disclaimer, privacy policy and about us page is minimum requirement to get approval from AdSense and also don't forget to add genuine content means your content must be yours only and not copyrighted. That's it if you fulfil these above points then nobody will stop you to get approval from Google.

Coming to main point how to add contact form for blogger is literally a great challenge for techie guys too, but if we compare Blogger to rival WordPress then WordPress won this comparison sounds good! but wait why WordPress won this point because it has inbuilt plugins corner then what about Blogger then my answer is if you know little about about programming language then this is better then WordPress plugins trust me.

Another question arise if techie guys not belongs to programming language then Blogger is not for these peoples then answer is nothing is impossible another third party forms are available to complete this task and these third party websites are 123contactform, jotform and many more but don't use third party form as per my recommendation because data is everything in internet world. You can also use official method to add contact us page in Blogger but design is still amiss then as said above if you know about css and html then nothing is amiss.

In this post listen carefully first we will add contact us page officially then will hide it by using simple html code and lastly will giving you a html and css code. Simply follow this below procedure carefully then trust me at the end you will get your contact us page ready.

Why need contact us page?

Congrats! you are getting famous bad joke i know but if your website is getting high traffic then visitors wants to reach admin of website then this comes into existence because visitors wants your real contact mail. contact us page also give visitors a genuine factor to trust whether these content written by bots or human being. As i said earlier for getting approval to display ads from Google AdSense and Last but not least it gives visitors a bug free interface to directly contact owner.

Follow these simple steps

Step 1: Go to google chrome and search for blospot.com and then sign in with your Gmail Id.

Step 2: As said earlier we do three task first is adding official contact form then hide it by using small html code and then adding code for contact form manually.

Task 1 (To Add Contact Form Officially)

Step 2(a): Go to blogger dashboard and navigate to left corner option menu you can see one option called Layout now select and hit to this text if not getting me then simple see this below screenshot.

Step 2(b): Now come to right side bar you can see multiple gadgets are already added like most popular, comments and much more below but you have to focus on add a gadget plus button which is mainly located at right side but this is not necessary that adding contact form to sidebar only you can also use footer now follow this screenshot below.

Step 2(c): After clicking to add a gadget then one pop up window will visible in front of you then scroll down below and search for Contact Form gadget.

Step 2(d): If you get Contact Form gadget then simply click on plus icon to add Contact Form Officially to your blogger.

Step 2(e): After clicking on plus icon then another pop will come out which is to configure contact form but don't touch default settings and hit on save button. Now Floppy like icon is visible at bottom right corner simple click on this icon to save your work.

Step 3: Second task is to hide contact form by using html code because this contact form is grotesque in terms of design you know. so we want to hide this form now then follow simple steps below to achieve this second task.

Task 2 (Now We Hide Contact Form By Using Small Code)

Step 3(a): Navigate to left corner again and simple search for theme option if found then click on it.

Step 3(b): Now click on customise orange button to edit your blogger design.

Step 3(c): After clicking to customise button then drop down will come out keep in your mind that if you editing your blogger design code then always download backup of your previous xml file. Now take backup and click to Edit HTML Option to add small code to hide Contact Form.

Step 3(d): Now click on code editor and use CTRL+F and search for below text.


]]></b:skin>

Step 3(e): Now add this HTML code to hide your contact form. simply copy this code and paste before ]]</b:skin> and done.


div#ContactForm1 {
display: none !important;
}

Step 4: Last third task to add css and html code to get attractive design of contact form because visitors want simple and attractive design. So simple follow these simple steps to get beautiful contact form.

Task 3 (Add code for beautiful and attractive design)

Step 4(a): Again navigate to left side bar and search for pages option and click on it. Now add New Page.

Step 4(b): Now Add title whatever you want but i recommend Contact Us only then click on pencil like button.

Step 4(c): Now Click on HTML View and paste this below code to your page now click on publish button then one pop up will come click on confirm and done.


<div><style>
div#twist_blogger_cntct_form {
    padding: 50px 0px;
    border-radius: 2px;
    color: #1D1D1D;
    font-size: 15px;
    font-weight: bold;
    background-color: #ffffff;
    font-family: sans-serif;
}
div#twist_blogger_cntct_form .wrap-me {
    margin: 0 auto;
    display: block;
    padding: 30px 20px;
    background-color: #F3F3F3;
    max-width: 440px;
    width: 100% !important;
    border-top: 65px solid #FE7549;
    box-sizing: border-box;
}
div#twist_blogger_cntct_form .wrap-me:before {
    content: '\f14b';
    position: absolute;
    font-family: FontAwesome;
    font-weight: normal;
    margin-top: -88px;
    margin-left: -23px;
    left: 50%;
    display: inline-block;
    font-size: 28px;
    width: 53px;
    height: 53px;
    border-radius: 50px;
    text-align: center;
    color: #FFFFFF;
    box-sizing: border-box;
    border: 2px solid #FFFFFF;
    line-height: 49px;
}
input#ContactForm1_contact-form-name, #ContactForm1_contact-form-email, #ContactForm1_contact-form-email:hover, #ContactForm1_contact-form-email:active {
    padding: 5px;
    margin-top: 4px !important;
    box-shadow: none!Important;
    max-width: 300px;
    width: 100%;
    border: 1px solid #D2D2D2;
    line-height: 1em;
    min-height: 31px;
    background: #FEFEFE;
    font-family: sans-serif;
    margin-bottom: 15px;
    border-radius: 0px;
}
.contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover {
    padding: 5px;
    margin-top: 4px !important;
    box-shadow: none!Important;
    max-width: 400px;
    width: 100%;
    border: 1px solid #D2D2D2;
    line-height: 1em;
    min-height: 80px;
    background: #FEFEFE;
    font-family: sans-serif;
    margin-bottom: 10px;
    border-radius: 0px;
}
/***** Focus *****/
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
    outline: none;
    background: #FFFFFF !important;
    color: #444;
    border-color: rgb(236, 235, 235) !important;
    box-shadow: 0 0 5px rgba(241, 241, 241, 0.7) !important;
    transition: all 0.3s ease-in-out !important;
}
/**** Submit button style ****/
.contact-form-button-submit:hover {
    color: #FFFFFF;
    background: #4CAF50 !important;
}
.contact-form-button-submit {
    background: #ff6700;
    display: table;
    font-size: 17px;
    margin: 0 !important;
    border-radius: 0 !important;
    max-width: 100%;
    width: 100%;
    min-width: 100%;
    height: 32px;
    line-height: 0.5em;
    letter-spacing: 0.5px;
    font-family: sans-serif;
    font-weight: normal;
    cursor: pointer;
    outline: none!important;
    color: #FFFFFF;
    border: 1px solid #fff !important;
    text-align: center;
    padding: 0px 0px 0px 15px;
    text-transform: capitalize;
    transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
}
/**** Submit button on Focus ****/
.contact-form-button-submit:focus, .contact-form-button-submit.focus {
  border-color: #FFFFFF;
  box-shadow: none !important;
}
/**** Error message ****/
.contact-form-error-message-with-border .contact-form-success-message {
  background: #f9edbe;
  border: 1px solid #f0c36d;
  bottom: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  color: #666;
  font-size: 12px;
  font-weight: bold;
  padding-bottom: 10px;
  line-height: 19px;
  margin-left: 0;
  opacity: 1;
  position: static;
  text-align: center;
}
/**** Submit Button On Success Message ****/
.contact-form-button-submit.disabled, .contact-form-button-submit.disabled:hover, .contact-form-button-submit.disabled:active {
    opacity: 0.9;
}
/****** Success Message *****/
.contact-form-error-message-with-border {
    background: #000000;
    border: 1px solid #5A5A5A;
    bottom: 0;
    box-shadow: none;
    color: #FDFDFD;
    font-size: 15px;
    font-weight: normal;
    line-height: 35px;
    margin-left: 0;
    opacity: 1;
    position: static;
    text-align: center;
    height: 35px;
    margin-top: 45px;
}
.contact-form-cross {
    height: 14px;
    margin: 5px;
    vertical-align: -8.5%;
    float: right;
    width: 14px;
    border-radius: 50px;
    border: 0 !important;
    cursor: pointer;
}
.contact-form-success-message-with-border {
    font-weight: normal;
    background-color: #000;
    border: 1px solid #FFF;
    color: #FFF;
    line-height: 35px;
    margin-left: 0;
    font-size: 13px;
    opacity: 1;
    position: static;
    text-align: center;
    height: 35px;
    margin-top: 45px;
}
/* Extra Stuff */


div#twist_blogger_cntct_form span.name-bg, div#twist_blogger_cntct_form span.email-bg {
    display: inline-block;
    max-width: 300px;
    line-height: 21px;
    width: 100%;
    color: #696969;
    padding: 3px 5px;
    margin: 0px 0px 4px;
    box-sizing: border-box;
    height: 30px;
    border: 1px solid #ff6700;
    padding-left: 39px;
}
div#twist_blogger_cntct_form span.name-bg:before {
    content: '\f007';
    background-color: #ff6700;
 }
div#twist_blogger_cntct_form span.email-bg:before {
    content: '\f1fa ';
    background-color: #ff6700;
}
div#twist_blogger_cntct_form span.name-bg:before, div#twist_blogger_cntct_form span.email-bg:before, div#twist_blogger_cntct_form span.message-bg:before {
    font-family: FontAwesome;
    text-align: center;
    margin: -4px 0 0px 0px;
    font-weight: normal;
    padding: 0;
    line-height: 27px;
    width: 28px;
    height: 28px;
    display: table;
    position: absolute;
    margin-left: -40px !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 0 !important;
    color: #FFFFFF;
}
div#twist_blogger_cntct_form span.message-bg {
    display: inline-block;
    max-width: 400px;
    line-height: 21px;
    width: 100%;
    color: #696969;
    padding: 3px 5px;
    box-sizing: border-box;
    height: 30px;
    border: 1px solid #ff6700;
    padding-left: 39px;
    margin: 0px 0px 4px;
}
div#twist_blogger_cntct_form span.message-bg:before {
    content: '\f0e0';
    background-color: #ff6700;
}
div#twist_blogger_cntct_form span.send-bg {
    height: 32px;
    display: inline-block;
    float: left;
    max-width: 45%;
    width: 100%;
    margin-top: 15px;
    transition: all 0.4s ease-in-out !important;
}
div#twist_blogger_cntct_form span.send-bg:before {
    content: '\f1d8';
 }
div#twist_blogger_cntct_form span.send-bg:before, div#twist_blogger_cntct_form span.clear-bg:before {
    font-family: FontAwesome;
    text-align: center;
    font-weight: normal;
    margin: 0;
    background-color: #ff6700;
    padding: 0;
    line-height: 27px;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    border: 1px solid #fff;
    border-right: 0 !important;
    color: #FFFFFF;
}
div#twist_blogger_cntct_form span.clear-bg {
    display: inline-block;
    float: right;
    margin-top: 15px;
    max-width: 45%;
    width: 100%;
}
div#twist_blogger_cntct_form span.clear-bg:before {
    content: '\f021';
 }

input.contact-form-button.contact-form-button-submit.clear-button:hover {
    background-color: #ff6700 !important;
}
div#twist_blogger_cntct_form .clear-button {
    color: #FFFFFF;
    border: 1px solid #FFF !important;
    background-color: #ff6700;
    float: right;
    display: table;
    height: 32px;
}
.sidebar, #footer-wrapper, #blog-pager, h2.post-title, .comments {
display: none !important;
}
</style>
<div id="twist_blogger_cntct_form">
<div class="wrap-me">
<h2><form name="contact-form" style="text-align: left;"><br /></form></h2><form name="contact-form"><span class="name-bg">Your Name</span><br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br />
<br />
<span class="email-bg">Your Email*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br />
<br />
<span class="message-bg">Your Message*</span><br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" style="height: 68px; margin: 0px; width: 199px;"></textarea><br />
<span class="send-bg"><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /></span>
<span class="clear-bg"><input class="contact-form-button contact-form-button-submit clear-button" type="reset" value="Clear" /></span>
<br />
<div style="max-width: 100%; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<br /></div>
</div></div>