Create Separate Contact Page in Blogger

Having a contact page on your blog is highly important. It is how visitors, brands, and companies can reach you and it’s something that every blogger should have. A contact form can serve as an easy way for others to get in touch.

Adding a contact form to Blogger can be done with a few coding tweaks. Blogger actually offers a free contact form for your blog, unfortunately they’ve made it as a Gadget and placed it on the Layout page so that it is added to your sidebar. Not the ideal place for a contact form, if you ask me! It should be situated on its own page, so here’s how to set it up that way:

First, go to the Layout page in Blogger and click an Add a Gadget link. From the popup, choose More Gadgets in the sidebar and then select Contact Form and add it.

Now, go to the Template page > Click edit HTML page.

Click Jump to widget > Select ContactForm1

Click the small black arrow on the left side to Expand ContactForm1

Click small black arrow on the left side again to expand codes between
 <b:includable id='main'> and </b:includable>

Delete the highlighted codes 
(all things between <b:includable id='main'> and </b:includable>)

After deleting, the ContactForm1 widget code will look like this:

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>
</b:includable>
  </b:widget>

Now create a blank page. Click Pages > New Page > Click HTML

Then Copy and Paste the whole code described below, and click Publish

<h2 class="post-title entry-title">
CONTACT US
</h2>
<form name="contact-form">
<span style="color: black; font-size: 1.2em;"><i class="fa fa-user"></i> Name </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<span style="color: black; font-size: 1.2em;"><i class="fa fa-envelope-o"></i> Email Address </span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<span style="color: black; font-size: 1.2em;"><i class="fa fa-pencil-square-o"></i> Content </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 Message" />
<div style="max-width: 100%; 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">
#body {background:#edeae1;}
#outer-wrapper {background:transparent;margin:0 auto;padding:0;text-align:left;float:none;background-position:center!important;box-shadow:initial;}
#post-wrapper {background:transparent;width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important;}
.post-body,.post{background-position:center!important;line-height:normal;}
#blog1,#artikel,.blog-posts{background-position:center!important;}
.banner,#comments,#sidebar-wrapper,#menu-wrap,.back-to-top,.back-to-top.show{display:none;margin-top:0;margin:0;}
.post-inner {padding:0 0 0 0;margin:20px auto;}
#content-wrapper {background-color:transparent;margin:5% auto 2% auto;padding:0;word-wrap:break-word;max-width:520px;}
#BackToTop,.blogouter-wrapper,#comments, #blog-pager, .breadcrumbs, .post-footer,#menutop,.BackToTop,#newsletter,h1.post-title{display:none!important;}
.post {background:transparent;box-shadow:initial;border:0;padding:30px 30px 30px 30px;position:relative;}
.post img {height:auto;max-width:100%;border:0;}
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-email,#ContactForm1_contact-form-name{width:100%;height:auto;margin:10px auto;padding:12px;background:#fff;color:#444;border:1px solid transparent;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all .5s ease-out;border:2px solid #000;}
#ContactForm1_contact-form-email-message{width:100%;height:140px;margin:10px 0;padding:12px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid transparent;transition:all 0.5s ease-out;border:2px solid #000;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border:2px solid #000;}
#ContactForm1_contact-form-submit{width:100%;font-family:'Open Sans';float:left;background:#000;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:15px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border:1px solid transparent;transition:all .6s ease}
#ContactForm1_contact-form-submit:hover {color:#fff;background:#333333;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:100%;margin-top:35px;}
.contact-form-error-message-with-border {border:none;box-shadow:none;color:#000;padding:5px 0;}
.contact-form-success-message {border:none;box-shadow:none;color:#000;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
.post h2{background:transparent;position:absolute;top:0;left:0;right:0;font-weight:700;font-size:1.6em;color:#000;display:block;margin:0px 30px;;}
.post h2 a{background:#e76e66;color:#000;position:absolute;display:inline-block;right:0;top:0;padding:16px 26px;font-weight:normal;}
.post h2 a:hover{background:#e76e66;color:#000!important;}
form i{font-family:Fontawesome;font-weight:normal}
.post h2 a i{transform:rotate(0deg);transition:all .6s}
.post h2 a i:hover{transform:rotate(360deg);}
</style>

Live Demo

Now your blog has a contact page. Please make sure you don't remove the Contact Form gadget from your layout. All messages will be sent to your Gmail email associated with the Blogger account. If you found this article helpful, then please share it with someone else by using the buttons below. Thank you!