Membuat Contact Form Menggunakan Material Design
 |
| By. Syaiful Bahri |
Cara Membuat Material Design Contact Form Blogger, Pasti kalian para blogger sudah tau dong apa yang dimaksud dengan Contact Form Blogger ? Nah kalau sudah tau baguslah jadi aku tidak perlu membahasnya lagi :).
Tetapi disini aku akan menciptakan Contact Form dengan Material Design, yang tentunya lebih menarik dan lezat dipandang, beda dengan yang biasanya.
Membuatnyapun tidak begitu sulit, kalian hanya copy instruksi yang sudah aku sediakan dibawah ini kedalam halaman postingan, lebih jelasnya kalian ikutin saja tutorial dibawah ini.
Sebagai teladan kalian sanggup lihat Contact Form pada blogg ini, sebagai materi pertimbangan sebelum membaca lebih lanjut.
Baca juga: Cara Menampilkan Iklan Adsense Sebelum dan Sesudah Postingan Artikel
Material Design ini dibentuk oleh admin pemilik blog Idblanter, sebelum aku menciptakan artikel ini aku sudah terlebih dahalu meminta ijin kepada beliau.
Jika anda berniat untuk menciptakan Contact Form dengan Material Design ini, silahkan anda simak dengan baik.
Cara Membuat Contact Form Dengan Material Design
Silahkan anda masuk kedalam blogger => Halaman => Halaman Baru, silahkan anda ganti pada mode HTML bukan Compose.
Jika sebelumnya anda sudah memiliki halaman, anda hanya perlu mengedit halaman yang ada.
Masukan instruksi dibawah ini pada kolom halaman (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'] = '629867937819630058 ';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d629867937819630058 ','//duarebu.com/ ','629867937819630058 '); _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 //duarebu.com/ dengan alamat url blog anda
Ganti juga kode 629867937819630058 dengan instruksi id blog anda
Untuk merubah instruksi warna dasar silahkan anda ganti instruksi #07ACEC dengan Tools instruksi warna
- Kode Warna
Jika sudah benar semua kini anda klik simpan halaman, dan anda lihat sendiri hasilnya
Oh iyaa notif akan masuk pada e-mail admin blogg.
Nah itulah tutorial Cara Membuat Material Design Contact Form Blogger. Semoga sanggup membantu bagi kalian yang ingin tampilan blogg menjadi cantik.
Material Design ini sudah 100% Responsive, karna sipembuatnya pribadi yang berbicara.
Baca juga: Cara Mendapatkan Subdomain Zone.id Gratis
Mohon maaf kalau ada kata-kata yang kurang sanggup dimengerti oleh anda, silahkan komentar dibawah kalau dirasa kurang jelas.
Atau sanggup pribadi kesumbernya
Sumber Referensi
Sumber https://www.duarebu.com/
