Simple Way To Create Contact Form For Blogger On Static Page Using HTML Code

Having a Contact US Page / Contact Form on your blogger blog is highly important respect of other pages. It is about how visitors, brands, and companies can reach you and it is something that every blogger should have

In my Previous blog post, I explain. What are the Essential things you need to follow after your Blogger Blog goes live? There I told you to Create Some Pages for your blog like About, Privacy Policy, Contact, Terms of Service, Disclaimer and related types of pages and described why they are important.

Having a Contact US Page / Contact Form on your blogger blog is highly important respect of other pages.  It is about how visitors, brands, and companies can reach you and it is something that every blogger should have. If sharing your email address on your blog is not your cup of tea, a contact page can serve as an easy way for others to get in touch.

Blogspot doesn’t support plugins like WordPress that’s why most of the blogger user does is to seek the help of third-party sites (123contactform, foxyform, jotform, etc.).

So, today in this tutorial I will show you the simplest way to add blogger’s contact form in blogger pages with the help of custom HTML Script. Just follow my steps below.

Adding a Contact Form to Blogger Static Page

Step 1: First, go to the Blogger Dashboard

Step 2: Now go to Pages and click on New Page button (see the image below)

After visiting blogger dashboard, go to Pages and click on New Page button
Step 3: Firstly before doing anything else, type the title what you want. Please note that the title you choose there the first time will generate permalink as per your title and after publishing, you cannot be able to change them later. Let give me a hint I choose title Contact Us, so permalink generated –  mydomain/p/contact-us.html

Step 4: Now turn on the HTML mode on page editor by clicking on HTML button right side to the Compose button and remove there all HTML code lines appearing there.
After copy-paste HTML script on HTML editor, you need to setup additional page setting like this image
Step 5: Now it’s the time to Copy the Custom HTML Script and Paste on HTML Page Editor section. Click on Copy all code area to copy the HTML script and then in HTML editor area press Ctrl + V button to paste the code successfully. (to see Blogger Contact Form HTML Code Unlock the content by FB like or Twitter Share)

[lock]

[<form name=”contact-form”>
<span style=”color: black; font-size: 1.2em;”><i class=”fa fa-user”></i> Name </span><br />
<br />
<input id=”ContactForm1_contact-form-name” name=”name” placeholder=”Name *” size=”30″ type=”text” value=”” /><br />
<br />
<span style=”color: black; font-size: 1.2em;”><i class=”fa fa-envelope-o”></i> Email Address <span style=”color: #584f69; font-size: x-small; font-weight: bold;”>important</span></span> <br />
<br />
<input id=”ContactForm1_contact-form-email” name=”email” placeholder=”Email *” size=”30″ type=”text” value=”” /><br />
<br />
<br />
<span style=”color: black; font-size: 1.2em;”><i class=”fa fa-pencil-square-o”></i> Content <span style=”color: #584f69; font-size: x-small; font-weight: bold;”>important</span></span><br />
<br />
<textarea cols=”25″ id=”ContactForm1_contact-form-email-message” name=”email-message” placeholder=”Message *” rows=”5″></textarea> <br />
<br />
<br />
<input id=”ContactForm1_contact-form-submit” type=”button” value=”Send Message” />  <br />
<br />
<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>
<br />
<br />
<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:#3cc091;width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important;box-shadow:0 12px 5px -8px rgba(0,0,0,0.1);} .post-body,.post{background-position:center!important;line-height:normal;color:#fff} #blog1,#artikel,.blog-posts{background-position:center!important;} .banner,#footer-wrapper,#comments,#sidebar-wrapper,#header-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,nav,.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:70px 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} #ContactForm1_contact-form-email-message{width:100%;height:140px;margin:10px 0;padding:12px;background:#fff;color:#444;border:1px solid transparent;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;} #ContactForm1_contact-form-submit{width:100%;float:left;background:#494158;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:#584f69;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;} .contact-form-error-message-with-border {background:rgba(255,255,255,0.2);border:none;box-shadow:none;color:#fff;padding:5px 0;} .contact-form-success-message {background:rgba(255,255,255,0.2);border:none;box-shadow:none;color:#fff;} img.contact-form-cross {line-height:40px;margin-left:5px;} .post h2{background:#494158;position:absolute;top:0;left:0;right:0;font-weight:700;font-size:1.6em;color:#fff;display:block;margin:auto;padding:16px 0} .post h2 a{background:#3cc091;color:#fff;position:absolute;display:inline-block;right:0;top:0;padding:16px 26px;font-weight:normal;} .post h2 a:hover{background:#3cc091;color:#fff!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);}  @media screen and (max-width:640px){ #outer-wrapper {margin:0 20px;}} </style><br />
<style scoped=”” type=”text/css”>#post-wrapper {width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important;} #sidebar-wrapper{display:none;margin-top:0;margin:0;} .post img{background:#fff;} #comments,#disqus_thread,#disqusshow{display:none;} </style><br />
<br />
<br />
<script type=”text/javascript”>//<![CDATA[  var submit = document.getElementById(‘ContactForm1_contact-form-submit’); submit.addEventListener(“click”, function () {     var email = document.getElementById(‘ContactForm1_contact-form-email’).value,         filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;     if (!filter.test(email)) {         alert(‘Please enter a valid email!’);     } }, !1) //]]></script><br />
<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>
<style scoped=”” type=”text/css”>#comments,.post_meta,#blog-pager{display:none} form{color:#666} #kontak-arlina{margin:auto;max-width:640px} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out} #ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;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:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)} #ContactForm1_contact-form-submit{float:left;background:#34495e;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease} #ContactForm1_contact-form-submit:hover{background:#3498db;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} .post-body input{width:initial} @media only screen and (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}} </style>]

[/lock]

Step 6: Now setup additional Page Setting. Write down your description in Search Description box then click on Options and do setup as showing given images.
Step 7: Click on Publish button.
Step 8: Done!

Why Blogger’s Custom Contact Form is better than Official and Third Party Blogger Contact Form?

  • Only HTML Script used to generate this Contact Form. No need to add CSS or HTML on your template file.
  • You Can easy to setup on your Blogspot blog by simply doing copy-paste.
  • Stylish interface makes it pretty and easy for anyone to contact you
  • Instant message delivery. You will receive your message as soon as someone sends it.
  • Responsive so it can be fit perfect on mobile, PC and tablet devices.
  • Easy to Customize with text, color, width and height
  • User Can see notification after sending messages, i.e., delivered successfully or not
  • No Limit to access, you don’t need to pay for using this service. It’s completely free for Blogspot
So, these are my tutorial on How to Add Contact Form in Blogger Static Page. Hope you like this Stylish Blogger Contact Form. In my next tutorial, I will share another beautiful Custom HTML Contact Form Script with material design Effect. So please subscribe our newsletter for getting our next update.