Form Design — UI/UX

Merancang Form yang User-Friendly Form adalah salah satu elemen UI paling kritis — di sinilah user memberikan data. Form yang buruk = user meninggalkan…

Form adalah percakapan: halaman bertanya, pengunjung menjawab. Bayangin resepsionis homestay yang mencatat data tamu. Resepsionis yang baik bertanya satu per satu dengan pertanyaan yang jelas, gak menanyakan hal yang gak perlu, menunggu tamu selesai bicara, dan kalau nomornya kurang satu angka, dia bilang bagian mana yang kurang dan cara membetulkannya. Dia gak memotong di tengah kalimat dengan "salah!".

🧪 Tebakan cepat: Pak Hadi mengetik nomor WhatsApp-nya di form pesan Bu Sri: 0812-3456-7890. Begitu dia menekan angka 0 yang pertama, kolomnya langsung merah dengan tulisan "Input tidak valid". Ada dua kesalahan di situ. Apa saja? Jawabannya ada di bagian "Validasi: kapan muncul, apa isinya".

Minta yang perlu saja

Tanggal dan jumlah malam sudah dipilih di kartu kamar. Untuk memesan, Bu Sri cuma butuh tiga hal:

Kolom Kenapa perlu Wajib?
Nama lengkap supaya Bu Sri tahu siapa yang datang ya
Nomor WhatsApp konfirmasi dan arah jalan dikirim lewat WhatsApp ya
Email bukti pesanan, kalau tamu mau opsional, ditulis "(opsional)"

Tiap kolom tambahan adalah satu pertanyaan lagi yang bisa membuat orang berhenti. Kalau sebuah form terpaksa panjang, misalnya formulir pendaftaran dengan 12 kolom, periksa dulu tiap kolom: perlu sekarang, atau bisa ditanyakan nanti? Lalu pecah jadi beberapa langkah, dan langkah pertama cuma berisi yang benar-benar wajib.

Label di atas, satu kolom

Label dihubungkan ke kolomnya lewat for yang sama persis dengan id kolom. Hubungan ini yang membuat klik di label memindahkan fokus ke kolom, dan pembaca layar menyebut "Nomor WhatsApp" saat kolomnya difokus.

Di latihan nanti, form-nya punya input id="name" dan id="email" tanpa label. Tambahkan <label for="name">Nama</label> dan <label for="email">Email</label>, ubah input email jadi type="email", dan beri required di kedua input.

Tipe input dan autocomplete

<form class="booking" novalidate>
  <label for="nama">Nama lengkap</label>
  <input id="nama" name="nama" type="text" autocomplete="name" required>

  <label for="wa">Nomor WhatsApp</label>
  <input id="wa" name="wa" type="tel" autocomplete="tel" required aria-describedby="wa-help wa-error">
  <p id="wa-help" class="help">Contoh: 0812 3456 7890 atau +62 812 3456 7890</p>
  <p id="wa-error" class="error" hidden></p>

  <label for="email">Email (opsional)</label>
  <input id="email" name="email" type="email" autocomplete="email">

  <button type="submit">Pesan kamar, bayar di tempat</button>
</form>

Validasi: kapan muncul, apa isinya

Kapan. Luke Wroblewski menguji 22 orang di 2009: form dengan validasi langsung di tiap kolom menaikkan tingkat berhasil 22%, menurunkan kesalahan 22%, dan mempercepat pengisian 42% dibanding form yang baru mengecek setelah dikirim. Waktu terbaiknya setelah tamu meninggalkan kolom (on blur). Pesan yang muncul sejak huruf pertama membuat orang kesal ("belum selesai ngetik sudah merah"), dan pesan yang baru muncul setelah tombol kirim ditekan memaksa tamu mencari ke atas lagi.

Apa isinya. Pesan error harus bilang apa yang salah dan cara membetulkannya (WCAG 3.3.1 dan 3.3.3), dalam teks, bukan cuma warna. Nomor WhatsApp diterima dalam bentuk 08... dan +62 8...:

function phoneProblem(raw) {
  const value = raw.trim();
  if (value === "") return "Isi nomor WhatsApp, supaya Bu Sri bisa mengirim konfirmasi.";
  if (!/^\+?[0-9\s.\-]+$/.test(value)) return "Nomor cuma boleh berisi angka, spasi, titik, tanda hubung, dan + di depan.";
  let digits = value.replace(/\D/g, "");                  // buang spasi, titik, tanda hubung, dan +
  if (digits.startsWith("620")) return "Setelah +62, angka 0 dihapus: tulis +62 812 3456 7890.";
  if (digits.startsWith("62")) digits = "0" + digits.slice(2); // 62812... jadi 0812...
  if (!digits.startsWith("08")) return "Nomor HP diawali 08 atau +62 8, contohnya 0812 3456 7890.";
  if (digits.length < 10 || digits.length > 13) return `Nomor ini ${digits.length} digit. Nomor HP diawali 08 dan panjangnya 10 sampai 13 digit.`;
  return ""; // kosong artinya gak ada masalah
}

const wa = document.querySelector("#wa");
const error = document.querySelector("#wa-error");
function check() {
  const problem = phoneProblem(wa.value);
  error.textContent = problem;
  error.hidden = problem === "";
  wa.setAttribute("aria-invalid", problem === "" ? "false" : "true");
}
wa.addEventListener("blur", check);                                  // pertama kali: setelah keluar kolom
wa.addEventListener("input", () => { if (!error.hidden) check(); }); // setelah error tampil: cek tiap ketikan
Diketik Pak Hadi Hasil
0812-3456-7890 diterima, 12 digit
+62 812 3456 7890 diterima, jadi 0812...
0812 345 "Nomor ini 7 digit. Nomor HP diawali 08 dan panjangnya 10 sampai 13 digit."
+62 0812 3456 7890 "Setelah +62, angka 0 dihapus: tulis +62 812 3456 7890."
021 5551234 "Nomor HP diawali 08 atau +62 8, contohnya 0812 3456 7890."

Jadi jawaban tebakannya: pesannya muncul terlalu cepat (sebelum Pak Hadi selesai mengetik, padahal nomornya benar), dan isinya gak membantu ("Input tidak valid" gak bilang cara membetulkannya). Itu jawaban tebakannya.

⚠️ Jebakan yang sering ketemu

TL;DR: Minta yang perlu saja; form panjang dipecah jadi beberapa langkah dengan yang wajib di langkah pertama. Satu kolom, label di atas (<label for> sama persis dengan id kolomnya), placeholder bukan label. Pakai type="tel", type="email", dan autocomplete (name, tel, email, WCAG 1.3.5); jangan type="number" untuk nomor HP. Tandai kolom wajib dengan required. Validasi muncul setelah tamu meninggalkan kolom (on blur), lalu dicek ulang tiap ketikan sampai benar; pesannya bilang apa yang salah dan cara membetulkannya (WCAG 3.3.1, 3.3.3), dengan teks dan ikon, bukan cuma merah. Nomor WhatsApp diterima sebagai 08... atau +62 8..., 10 sampai 13 digit.

Yang akan kamu pelajari