Material Design Menciptakan Contact Form Di Blog

Material Design Cara Membuat Dan Memasang Contact Form Di Blog Material Design Membuat Contact Form Di Blog

Material Design Membuat Contact Form Di Blog: Hallo sobat kali ini aku akan coba membagikan tutorial untuk cara membuat/memasang contact form di blog.
Contact Form atau biasa di sebut Contact Us pada umumnya banyak laba yang di dapatkan di mana akan mempermudah pengunjung untuk mengirim pesan pribadi pribadi ke Admin blog atau web, Pada blogger bawaan contact form bekerjsama sudah di sediakan pada aplikasi widget/gadget blogger namun tampilanya sangat masih sederhana, berbeda dengan contact form/contact us yang akan kita bahas ini sudah memakai project terbaru dari google adalah material design.
banyak designer web yang sudah menambahkan project ini dalam merancang aneka macam Struktur isyarat Html contohnya pada template blog, widget, dan lebih lainya.

Result

Nah tertarik untuk memasangnya??, pemasangan contact form ini begitu simpel untuk lebih lengkap silahkan kau ikuti tutorialnya di bawah ini.

Material Design Membuat Contact Form Di Blog

1. Silahkan buat laman gres dalam mode HTML/jika sudah ada laman contact form/contact us sebelumnya sanggup shobat ganti dengan Html berikut.

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

2097019471312122410 Silahkan shobat ganti dengan ID blog shobat
//iddzgn.blogspot.co.id/ Silahkan kau ganti dengan Url situs web kamu.

Nah untuk mendapat ID blog kau silahkan lihat gambar di bawah ini.

Nah bagai mana simpel bukan, kalau sudah selesai melalui Langkah-langkahnya di atas, terakhir silahkan kau Publikasikan/Pertinjau terlebih dahulu untuk melihat hasilnya.

Baca Juga: Cara Membuat Contact Form Style 1 Material Design

Oky mungkin cukup sampe di sini ya, kalo ada dilema yang timbul sanggup keluhkan dalam bentuk komentar di bawah ini, tapi jangan dengan kata-kata yang tidak pantas, ok terimakasi sampe ketemu di tutorial ngeblog selanjutnya.