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.
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 shobatNah untuk mendapat ID blog kau silahkan lihat gambar di bawah ini.
//iddzgn.blogspot.co.id/ Silahkan kau ganti dengan Url situs web kamu.
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.
