How to Create Contact Us (Contact Form) Page in Blogger?

How to Create Contact Us (Contact Form) Page in Blogger? : If you are a blogger and using blogger.com as platform then you must need to know how to create a Contact Us or Contact Form page in blogger. 

Step 1: First of all, If you are using a third party theme just go on Layout (in left side menu bar) you can see add a gadget option in right side sidebar as shown in below image.

 

Step 2 : You can see "Contact Form" in gadget section click on Plus sign to add it.

 

Step 3: Now we have make it hide because we don't want to use it in Side bar, We want to use it on Contact Us page. 

• Now go on menu Below Layout , Click on Theme.
• In theme there is option to edit HTML.
• Once you are in HTML area you just press ctrl+f.
• In search box just copy ]]></b:skin> code and paste it & press enter.
• Just below this code paste code which is mentioned below. As mention in below image.

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

Step 4 : Now in the HTML area press ctrl + f and do below steps.

• In the search box paste </head> and press enter.
• Copy code given below right above the </head> same as mentioned in below image & click on save theme.

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

 

Step 5 : Now we have to create a static page in blog.

• Go on the pages create new page.
• Name page title Contact Us/Contact Form select HTML from very left of the menu.
• Copy below given code and paste it in 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>

 

 

Now we have done everything now make it publish.