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)

[Demo ##eye##]

[lock]

[<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-email-message{height:150px}
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)}
#ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
</style>
<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>
<label>Name</label>
</div>
<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>
<label>Email</label>
</div>
<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>
<label>Message</label>
</div>
<input id=”ContactForm1_contact-form-submit” type=”button” value=”Send” />
<div id=”ContactForm1_contact-form-error-message”>
</div>
<div id=”ContactForm1_contact-form-success-message”>
</div>
</form>
<script src=”https://www.blogger.com/static/v1/widgets/2271878333-widgets.js” type=”text/javascript”></script>
<script type=”text/javascript”>
//<![CDATA[
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?blogIDx3d1311596492989291007′,’//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’));
//]]>
</script>
]

[/lock]

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.