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 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-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>
]
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.
Leave a Reply