Senin, 15 Desember 2014
Ada beberapa sahabat Kang Wira yang mengingatkan bahwa selama aku membagikan tutorial ataupun trik, tapi aku belum pernah membagikan trik atau tutorial menciptakan Contact Form.
Maka dari itu kali ini aku coba memperlihatkan sedikit trik berupa arahan html yang mempunyai kegunaan untuk mempercantik sebuah halaman contact form yang kau buat.
Ada beberapa design Contact Form yang sudah dimodifikasi oleh teman-teman blogger lain, sehingga tampilannya pun aneka macam macamnya.
Pada artikel ini, aku akan berikan sebuah trik untuk menampilkan Contact Form dengan Design Flat pada halaman statis.
Tampilan nya dapat kau lihat pada tombol dibawah ini.
Bagaimana Caranya?
Saya berharap kau sudah menciptakan halaman statisnya terlebih dulu.Jika belum, silahkan kau buat halaman statis dengan judul "Contact" atau apapun yang kau mau. Jika Sudah, maka kita lanjut pada langkah kedua yaitu edit halaman.
Disini kita akan akan memasukkan sebuah arahan adonan dari HTML, CSS dan JavaScript. Maka dari itu, silahkan kau buka halaman Contact yang sudah kau buat tadi.
Lalu selanjutanya pilih tab HTML, jangan Tab Compose ya. Setelah itu, silahkan kau copy arahan Contact Form Design Flat dibawah ini, dan kau salin di halaman contact kamu.
<style scoped="scoped"> .inputkangwira{float:none;position:relative;margin-bottom:45px;margin-right:10px}.inputkangwira input,.inputkangwira textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd} .inputkangwira input:focus, .inputkangwira textarea:focus{outline:none} .inputkangwira label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all} .inputkangwira input:focus label, .inputkangwira input:valid label, .inputkangwira textarea:focus label, .inputkangwira 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%} .inputkangwira input:focus .bar:before, .inputkangwira input:focus .bar:after, .inputkangwira textarea:focus .bar:before, .inputkangwira textarea:focus .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5} .inputkangwira input:focus .highlight, .inputkangwira textarea:focus .highlight{animation:inputHighlighter .3s ease} .inputkangwira input:focus label, .inputkangwira input:valid label, .inputkangwira textarea:focus label, .inputkangwira 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="inputkangwira"> <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="inputkangwira"> <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="inputkangwira"> <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 async="async" 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'] = '8863100899420715293';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8863100899420715293','//kangwira.com/','8863100899420715293'); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Kirim...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Pesan Anda Berhasil dikirim.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Pesan Anda Belum Terkirim, Silahkan Ulangi.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">Masukkan Alamat Email Aktif.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Kolom Pesan Tidak Boleh Kosong.</span>', 'title': 'Contact Form', 'blogId': '8863100899420715293', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]> </script>Langkah terakhir ialah simpan halaman kemudian lihat hasilnya.
Silahkan kau perhatikan arahan HTML yang sudah aku tandai diatas.
- Silahkan ganti //kangwira.com/ dengan url blog kamu.
- Silahkan ganti 8863100899420715293 dengan ID Blog kamu.
Apakah ada yang merasa kesulitan ketika mengikuti langkah-langkah diatas?
Jangan sungkan untuk bertanya pada kolom komentar dibawah artikel ini. Semoga gampang dipahami ya.
Share This :
comment 0 Comment
more_vert