Membuat dan Memodifikasi Form di Website dengan Form Builder

01 Mei 2014
Form merupakan salah satu elemen yang umum kita temui pada sebuah website atau blog seperti yang biasa digunakan untuk bagian kotak pencarian, fitur komentar, atau wijet berlangganan artikel via email. Elemen form umum pula digunakan pada halaman login, formulir kontak, serta jajak pendapat atau survei online.

Jika elemen form berbentuk kotak pencarian, maka pengguna akan dengan mudah menelusuri semua informasi yang ada pada halaman website tersebut, cukup dengan mengetikkan kata kunci pada kotak isian yang disediakan.

Jika elemen form berbentuk fitur komentar, maka pengguna akan dapat memberikan tanggapan, pertanyaan, atau pesan apa pun terkait dengan informasi tertentu yang disajikan website bersangkutan.

Elemen form memang digunakan untuk memungkinkan terjadinya interaksi antara website dengan para penggunanya. Melalui elemen ini, website tersebut akan dapat menerima informasi yang dikirimkan pengguna ke server tempat ia berada dengan melibatkan bahasa pemrograman web yang dijalankan di sisi server seperti PHP, ASP, dan JSP.

Artikel ini bukan dimaksudkan untuk menguraikan bagaimana mengimplementasikan bahasa-bahasa pemrograman web di atas pada elemen form ini, tetapi untuk menjelaskan bagaimana membuat dan memodifikasi tampilan form memanfaatkan Form Builder.

Form Builder ini adalah layanan online yang disajikan secara gratis untuk memudahkan kita membuat dan mendasain elemen-elemen form di website.

Form dalam sebuah website dibuat menggunakan elemen HTML <form>. Namun, form bukanlah elemen yang dapat berdiri sendiri. Ia membutuhkan elemen-elemen lain seperti <input>, <select>, dan <button>.

Berikut adalah contoh struktur dasar elemen form dalam HTML.

<form>
   <label for="judulbuku">Judul buku yang dipesan</label>
   <br>

   <input type="text" id="judulbuku" name="judulbuku">
   <br>

   <label for="jumlahbuku">Jumlah buku</label>
   <br>

   <select id="jumlahbuku" name="jumlahbuku">
      <option value="10">10</option>
      <option value="20">20</option>
      <option value="30">30</option>
      <option value="40">40</option>
      <option value="50">50</option>
   </select>
   <br>

   <button type="submit" name="kirim">Kirim</button>
</form>

Dengan menggunakan Form Builder, kita tidak perlu menuliskan kode-kode di atas. Secara otomatis, Form Builder akan membuatkannya untuk kita. Kita hanya perlu memberi pengaturan-pengaturan pada sisi tampilannya.

Ketika tulisan ini dibuat, Form Builder hanya bisa digunakan untuk membuat form dengan elemen <input>. Namun, jika kita hendak membuat form login atau mendesain tampilan wijet berlangganan artikel, Form Builder cukup memadai.

Ketika pertama kali mengakses Form Builder ini, kita akan disuguhi sebuah form dengan dua buah elemen <input>, yakni "Name" dan "Email". Kita bisa memodifikasi form tersebut dengan pengaturan-pengaturan yang telah disediakan, misalnya memberi garis pinggir, mengubah warna latar form, dan mengganti judul form dan nama elemen.

Form Builder

Setelah Anda puas dengan tampilan form yang diperoleh, lanjutkan dengan mengeklik tombol "Generate HTML" dan "Generate CSS" di bagian paling bawah halaman Form Builder tersebut.

Tombol pertama akan menampilkan kotak dialog yang berisi kode-kode HTML, dan tombol kedua akan menampilkan kode-kode CSS-nya. Silakan salin kode-kode tersebut dan integrasikan langsung ke halaman website Anda.

Oh iya! Selain membuat form, Form Builder juga menyediakan tool untuk membuat ikon dan pita (ribbon). Klik tombol “Change tool” untuk mengakses tool terkait.