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

Learn how to create a Contact Us Page for Blogger blog on Static Page using Custom HTML Contact Form Script to get in touch with reader, fans and follower.

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.

COMMENTS

Name

100% Cashback,3,4G Unlimited Offer,1,Action Game,1,Advanced SystemCare Ultimate,1,Amazon Offers,3,Android,26,Android Antivirus,7,Android Apk,18,Android Browser,2,Android Games,7,Android Video Downloader,2,Android Youtube Video Downlod,2,Antivirus,5,Arlina Design,2,Ashampoo,2,Asphalt Nitro,2,Avast,1,AVG,1,Beginners Guide,6,Ben 10,1,Bitdefender,4,Blogger,44,Blogger Templates,32,Blogger Theme,32,Blogger Tutorial,12,Blogging,44,Blogging idea,7,Blogspot Templates,31,Blogspot Themes,32,Browser,1,Cashback Offers,23,CCleaner,1,Cheap Deals,14,Clash Of Clans,1,Cleaner master,1,CorelDRAW,1,Coupon Codes,30,Deals Of The Day,10,Design And Editing,3,Dolphin,1,Downloader,2,Dr Web,1,DTH Recharge Offers,1,Dunia Blanter,1,eBay coupon codes,6,Endless Runner Games,2,ESET,1,Facebook Cover Picure,4,Fancy Themes,1,FB Boy Covers,1,FB Boys,1,FB Covers,4,FB Girl Covers,1,FB Girls,1,fbtemplates,2,Folder Lock,1,Free Blogger Template,8,Free Calls,1,Free mobile data,7,Free Paytm Cash,2,Freecharge Coupon,7,Freecharge Offers,3,Gift Vouchers,2,Giveaway,4,Giveaway Of The Day,4,Giveaways,4,Giveaways Promotion,4,Google AMP Themes,1,Google Chrome,1,Graphics,2,Happy New Year,1,Idm,1,Internet,13,IRCTC,1,Keyword Research Tool,1,Live Wallpaper,1,Magazine,5,MakeMyTrip Coupons,1,Material Design,3,Mcafee,1,Mcdonalds Burger,1,Merry Christmas,1,Microsoft Office,1,mobikwik,7,Mobikwik Coupon,7,Mobikwik Offer,8,Multimedia,1,MX Player,1,NearBuy,1,Office & Education,1,OZmondStudio,1,Paid Apk,1,Panda,1,Paytm Cashback,1,Paytm Coupons,2,PBThemez,3,Pizza Offers,1,PowerDVD,2,Premium Blogger Template,24,Quick Heal,1,RAR Archiver Tool,1,RAR Premium,1,Reffer And Earn,1,Reliance Jio Preview offer,1,Security,5,sem rush,1,SEMrush,1,SEMrush Coupon,1,SEO Tools,1,Shopclues Offers,1,Showbox,1,Slycolor,1,snapdeal coupons,2,snapdeal promo code,2,Snaptube,2,Software,16,Speed up android,1,Subway Surfers,1,TemplatesZoo,1,Temple Run 2,1,ThemeForest,21,Themelet,4,ThemeXpose,2,Tips And Tricks,10,Todays Deals,31,Torrent Download,2,Trabol,1,Twitter Image,4,Uber Offers,1,UC Browser,1,Utilities,2,Valentines day offer,1,Video Player,2,Vodafone,1,VPN,1,Watch Movies and TV Shows Online,1,Win RAR For Android,1,Windows,18,Xperia Live Wallpapers,1,ZenMate VPN,1,
ltr
item
ShareTrick : Premium Sharing and Download Center: Simple Way To Create Contact Form For Blogger On Static Page Using HTML Code
Simple Way To Create Contact Form For Blogger On Static Page Using HTML Code
Learn how to create a Contact Us Page for Blogger blog on Static Page using Custom HTML Contact Form Script to get in touch with reader, fans and follower.
https://1.bp.blogspot.com/-Vu0fsWDvZBg/WDGQofG7GrI/AAAAAAAAC9U/EbExqgtwZCEUJbB-ohKwFomuUoWviWbCACLcB/s640/Screenshot%2B%252823%2529.png
https://1.bp.blogspot.com/-Vu0fsWDvZBg/WDGQofG7GrI/AAAAAAAAC9U/EbExqgtwZCEUJbB-ohKwFomuUoWviWbCACLcB/s72-c/Screenshot%2B%252823%2529.png
ShareTrick : Premium Sharing and Download Center
http://www.sharetrick.com/2016/11/contact-form-for-blogger-on-static-page-using-html-code.html
http://www.sharetrick.com/
http://www.sharetrick.com/
http://www.sharetrick.com/2016/11/contact-form-for-blogger-on-static-page-using-html-code.html
true
1311596492989291007
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy