Tutorial Make Material Design Contact Form in Blogger

Tutorial Make Material Design Contact Form in Blogger - Halo, Today I will show Tutorial Make Material Design Contact Form in Blogger without special javascript. Because Google looks success in developing Material Design and Many Web Designer starts to learn New Design of Google Material Design, and here we go..

Are you interested to make that contact form to your blog?

Tutorial Make Material Design Contact Form in Blogger

If you already have contact form, you just edit yours, no need make new contact form.

Insert this below codes into your contact form page (mode HTML).

<style scoped="scoped">
.deadthemeinput{float:none;position:relative;margin-bottom:45px;margin-right:10px}.deadthemeinput input,.deadthemeinput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.deadthemeinput input:focus,.deadthemeinput textarea:focus{outline:none}.deadthemeinput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.deadthemeinput input:focus ~ label,.deadthemeinput input:valid ~ label,.deadthemeinput textarea:focus ~ label,.deadthemeinput 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%}.deadthemeinput input:focus ~ .bar:before,.deadthemeinput input:focus ~ .bar:after,.deadthemeinput textarea:focus ~ .bar:before,.deadthemeinput textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.deadthemeinput input:focus ~ .highlight,.deadthemeinput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.deadthemeinput input:focus ~ label,.deadthemeinput input:valid ~ label,.deadthemeinput textarea:focus ~ label,.deadthemeinput 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="deadthemeinput">
<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="deadthemeinput">
<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="deadthemeinput">
<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'] = '142510873472775100';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d142510873472775100','//deadtheme.com/','142510873472775100');
_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': '142510873472775100', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Change deadtheme.com with your URL.

Change Code 142510873472775100 with your ID Blog.

To change base color, please change #07ACEC with color code do you want to use
use this Color Picker Code Tool

Save.

Result

Tutorial Make Material Design Contact Form in Blogger

4/ 5

Oleh Saint Adjie

Saint Adjie Pada 02.35 Komentar