How To Create Material Design Contact Form For Blogger On Static Page Using HTML Code


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

learn how to Create Material Design Contact Form for Blogger On Static Page using HTML Code
In my previous Blogger Contact Form related post, I explain the simplest way to make contact form on blogger static page using HTML Code. To show this unique contact form on your blog, you just need to copy and paste my given HTML code there.

So, today in this tutorial I'm going to share you another blogger contact form HTML Script with material design effect. Let Stated.

Adding a Contact Form on 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 then click on New Page button to add a new page there

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, so permalink generated -  mydomain/p/contact.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 Scripts appearing there.
After copy-paste HTML script on HTML editor, follow my steps 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)
[<style scoped="scoped">
.sharetickinput{float:none;position:relative;margin-bottom:45px;margin-right:10px}.sharetickinput input,.sharetickinput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.sharetickinput input:focus,.sharetickinput textarea:focus{outline:none}.sharetickinput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.sharetickinput input:focus ~ label,.sharetickinput input:valid ~ label,.sharetickinput textarea:focus ~ label,.sharetickinput textarea:valid ~ label{top:-20px;font-size:14px;color:#07ACEC}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#07ACEC;transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}.sharetickinput input:focus ~ .bar:before,.sharetickinput input:focus ~ .bar:after,.sharetickinput textarea:focus ~ .bar:before,.sharetickinput textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.sharetickinput input:focus ~ .highlight,.sharetickinput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.sharetickinput input:focus ~ label,.sharetickinput input:valid ~ label,.sharetickinput textarea:focus ~ label,.sharetickinput textarea:valid ~ label{top:-20px;font-size:13px;color:#07ACEC}
input#ContactForm1_contact-form-submit{color:#fff!important;background:#07ACEC;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px}
input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
<form name="contact-form">
<div class="sharetickinput">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<div class="sharetickinput">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<div class="sharetickinput">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
<span class="highlight"></span>
<span class="bar"></span>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<div id="ContactForm1_contact-form-error-message">
<div id="ContactForm1_contact-form-success-message">
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1311596492989291007';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1311596492989291007','//sharetick.com/','1311596492989291007');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '1311596492989291007', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
Step 6: Replace the URL //sharetick.com/ with your blog URL

Step 7: Find and replace this code 1311596492989291007 4th time with your Blog ID

Step 8: To Change base color, you may replace this code #07ACEC with your own color code

Step 9: Now setup additional Page Setting. Write down your description in Search Description box then click on Options and do setup as showing given images.

Final Step: Now click on Publish button to finish. Done!

So, these are my tutorial on How to make Material Design Contact Form in Blogger Static Page. Hope you like this Stylish Blogger Contact Form and material design effect. If you have any question or face any problem to set up this contact form on your blog, just let me know by leaving a comment below. I will get back to you as soon as i can.



100% Cashback,3,4G Unlimited Offer,1,Action Game,1,Advanced SystemCare Ultimate,1,Amazon Offers,4,Amazon Prime Trick,1,Android,24,Android Antivirus,7,Android Apk,16,Android Browser,2,Android Games,7,Antivirus,5,Arlina Design,2,Ashampoo,2,Asphalt Nitro,2,Avast,1,AVG,1,Beginners Guide,7,Ben 10,1,Bitdefender,4,Blogger,46,Blogger Templates,33,Blogger Theme,33,Blogger Tutorial,13,Blogging,47,Blogging idea,10,Blogspot Templates,32,Blogspot Themes,33,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,11,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,Filmora Discount Coupon,1,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,GoDaddy Coupon,1,godaddy promo code,1,Godaddy renewal promo code,1,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,Namecheap,1,Namecheap Coupons,1,Namecheap Renewal Promo Codes,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,25,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,Software,16,Speed up android,1,Subway Surfers,1,TemplatesZoo,1,Temple Run 2,1,ThemeForest,22,Themelet,4,ThemeXpose,2,Tips And Tricks,13,Todays Deals,32,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,Wondershare Filmora,1,Xperia Live Wallpapers,1,ZenMate VPN,1,
ShareTrick : Premium Sharing and Download Center: How To Create Material Design Contact Form For Blogger On Static Page Using HTML Code
How To Create Material Design Contact Form For Blogger On Static Page Using HTML Code
Learn how to create a Material Design Contact Form for Blogger blog on Static Page using Custom HTML Code to get in touch with reader, fans and follower.
ShareTrick : Premium Sharing and Download Center
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 PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network 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 Table of Content