Ada beberapa sahabat Kang Wira yang mengingatkan bahwa selama saya membagikan tutorial ataupun trik, tapi saya belum pernah membagikan trik atau tutorial membuat Contact Form.
Maka dari itu kali ini saya coba memberikan sedikit trik berupa kode html yang berguna untuk mempercantik sebuah halaman contact form yang kamu buat.
Ada beberapa design Contact Form yang sudah dimodifikasi oleh teman-teman blogger lain, sehingga tampilannya pun banyak sekali macamnya.
Pada artikel ini, saya akan berikan sebuah trik untuk menampilkan Contact Form dengan Design Flat pada halaman statis.
Tampilan nya bisa kamu lihat pada tombol dibawah ini.
Bagaimana Caranya?
Saya berharap kamu sudah membuat halaman statisnya terlebih dulu.Jika belum, silahkan kamu buat halaman statis dengan judul "Contact" atau apapun yang kamu mau. Jika Sudah, maka kita lanjut pada langkah kedua yaitu edit halaman.
Disini kita akan akan memasukkan sebuah kode campuran dari HTML, CSS dan JavaScript. Maka dari itu, silahkan kamu buka halaman Contact yang sudah kamu buat tadi.
Lalu selanjutanya pilih tab HTML, jangan Tab Compose ya. Setelah itu, silahkan kamu copy kode Contact Form Design Flat dibawah ini, dan kamu 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 adalah simpan halaman lalu lihat hasilnya.
Silahkan kamu perhatikan kode HTML yang sudah saya tandai diatas.
- Silahkan ganti //kangwira.com/ dengan url blog kamu.
- Silahkan ganti 8863100899420715293 dengan ID Blog kamu.
Apakah ada yang merasa kesulitan saat mengikuti langkah-langkah diatas?
Jangan sungkan untuk bertanya pada kolom komentar dibawah artikel ini. Semoga mudah dipahami ya.
