Penulis 
Pada dasarnya platform Blogger sudah menyediakan Widget contact form, namun design dan tampilan masih sangat minimalis sehingga terlihat kurang menarik dan profesional.
Pada moment ini, penulis akan berbagi artikel cara membuat material design untuk contact form tanpa adanya javascript khusus yang responsive. Mengingat Google sangat menganjurkan penggunaan material design untuk membangun sebuah web ataupun perangkat mobile.
Nah, buat sobat yang tertarik dengan widget ini silahkan ikuti langkah berikut ini :
Cara Membuat Material Design Contact Form di Blog
1. Buka dasbor blogger > Laman > Buat Laman baru.
2. Masukan kode berikut pada kolom Laman baru dan pilih mode HTML.
<style scope="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,.data input textarea:focus~label,.datainput 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%}.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%;widht: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:#07acec;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.6),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}
input#ContactForm_contact-form-error-message{float:right;background:#d32f2f;color:#fff;font-size:13px;font-weight:700;border-radius:3px}input#ContactForm_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="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'] = '458698678969352428';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x458698678969352428','//nubietheme.com/','458698678969352428');
_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':'458698678969352428', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
3. Jangan lupa untuk mengganti semua tulisan dengan markup biru dengan ID blog Anda.
4. Simpan template.
Untuk mengecek apakah contact form bekerja dengan fungsinya, silahkan sobat mencobanya sendiri dengan mengirim sebuah pesan. Jika pesanya sukses terkirim, sobat akan mendapatkan email pemberitahuan dari "Blogger Contact Form". Untuk lebih jelasnya, silahkan lihat contoh pada gambar berikut :
Penulisan pesan pada contact form :
 |
| Contoh Penulisan pada Contact form |
Email pemberitahuan dari "Blogger Contact Form".
Sekian dulu sobat artikel dari penulis cara membuat material design contact form, semoga bermanfaat dan apabila ada kekeliruan atau kesalahan, penulis mohon maaf.
EmoticonEmoticon