Cara Membuat Contact Form Material Design di Blog
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 mengembangkan 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 sahabat 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 instruksi berikut pada kolom Laman gres 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 goresan pena dengan markup biru dengan ID blog Anda.
4. Simpan template.
Untuk mengecek apakah contact form bekerja dengan fungsinya, silahkan sahabat mencobanya sendiri dengan mengirim sebuah pesan. Jika pesanya sukses terkirim, sahabat akan menerima email pemberitahuan dari "Blogger Contact Form". Untuk lebih jelasnya, silahkan lihat rujukan pada gambar berikut :
Penulisan pesan pada contact form :
 |
| Contoh Penulisan pada Contact form |
Email pemberitahuan dari "Blogger Contact Form".
Sekian dulu sahabat artikel dari penulis cara membuat material design contact form, agar bermanfaat dan apabila ada kekeliruan atau kesalahan, penulis mohon maaf.
Post a Comment for "Cara Membuat Contact Form Material Design di Blog"