Cara Menciptakan Material Design Contact Form Di Blog

Material Design Contact Form - Halo teman dimanapun kalian berada, tutorial selanjutnya yang akan aku bahas ialah cara menciptakan material design contact form tanpa javascript khusus, bersama-sama ketika aku mempelajari input material design ini pada template Masign Grid ketika itu input material design yang aku buat masih memakai javascript khusus bawaan script material design.

Tampaknya Google cukup sukses dalam membuatkan Material Design, alasannya ialah ketika ini para web designer sudah mulai mempelajari desain bawaan Google terbaru ini, menyerupai yang sudah aku terapkan pada tutorial contact form blogger kali ini.

Nah bagaimana, teman tertarik untuk membuatnya?

Tutorial Membuat Material Design Contact Form di Blog

Masuk ke Blogger > Laman > Laman Baru > Pada Navbar Pilih Mode "HTML" bukan Compose.

Jika sudah memiliki halaman kontak teman hanya perlu mengedit laman yang sudah ada.

Masukan instruksi di bawah ini pada kolom halaman kontak form (mode HTML).

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

Ganti instruksi //idblanter.com/ dengan URL blog sobat.

Ganti kode 8866800899420715293 dengan ID blog sobat.

Untuk merubah warna dasar silahkan ubah #07ACEC dengan instruksi warna yang teman inginkan.

- Tool Kode Warna

Simpan.

Results

Lihat Juga : Membuat Show Hide Contact Form with Effect di Blog

Itulah Tutorial "Membuat Material Design Contact Form di Blog" salah satu tutorial wacana material design yang dapat aku bagikan kali ini. Semoga bermanfaat.

Sumber https://www.idblanter.com