Cara Membuat Form yang Menarik dengan CSS

Form adalah komponen penting di hampir setiap website — mulai dari form login, registrasi, hingga form kontak. Sayangnya, tampilan form HTML bawaan browser seringkali terlihat membosankan dan tidak konsisten antar browser. Dengan CSS, kamu bisa mengubah form menjadi terlihat profesional dan nyaman digunakan. Artikel ini membahas cara membuat form yang menarik dari awal.

Reset Style Bawaan Browser

Langkah pertama adalah me-reset tampilan bawaan elemen form agar konsisten di semua browser:

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

input,
textarea,
select,
button {
  font-family: inherit;
  font-size: inherit;
}

Struktur HTML Form

Gunakan struktur yang semantik dan aksesibel:

<form class="form-keren" novalidate>
  <h2>Hubungi Kami</h2>

  <div class="form-grup">
    <label for="nama">Nama Lengkap</label>
    <input type="text" id="nama" name="nama" placeholder="Masukkan nama kamu">
  </div>

  <div class="form-grup">
    <label for="email">Alamat Email</label>
    <input type="email" id="email" name="email" placeholder="nama@email.com">
  </div>

  <div class="form-grup">
    <label for="topik">Topik</label>
    <select id="topik" name="topik">
      <option value="">Pilih topik...</option>
      <option value="umum">Pertanyaan Umum</option>
      <option value="teknis">Masalah Teknis</option>
      <option value="kerjasama">Kerjasama</option>
    </select>
  </div>

  <div class="form-grup">
    <label for="pesan">Pesan</label>
    <textarea id="pesan" name="pesan" rows="5"
              placeholder="Tulis pesan kamu di sini..."></textarea>
  </div>

  <button type="submit" class="tombol-kirim">Kirim Pesan</button>
</form>

CSS Styling Utama Form

.form-keren {
  max-width: 520px;
  margin: 40px auto;
  padding: 40px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.form-keren h2 {
  margin-bottom: 28px;
  font-size: 1.5rem;
  color: #1e293b;
  font-weight: 700;
}

.form-grup {
  margin-bottom: 20px;
}

.form-grup label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: #374151;
}

/* Styling input, textarea, dan select */
.form-grup input,
.form-grup textarea,
.form-grup select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 1rem;
  color: #1e293b;
  background: #f9fafb;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  outline: none;
}

/* Efek fokus */
.form-grup input:focus,
.form-grup textarea:focus,
.form-grup select:focus {
  border-color: #3b82f6;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Placeholder */
.form-grup input::placeholder,
.form-grup textarea::placeholder {
  color: #9ca3af;
  font-size: 0.9rem;
}

.form-grup textarea {
  resize: vertical;
  min-height: 120px;
}

Styling Tombol Submit

.tombol-kirim {
  width: 100%;
  padding: 12px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  margin-top: 8px;
}

.tombol-kirim:hover {
  background: #2563eb;
}

.tombol-kirim:active {
  transform: scale(0.98);
}

Menambahkan Ikon pada Input

Ikon di dalam input membuat form terlihat lebih profesional. Gunakan teknik positioning:

<div class="form-grup input-dengan-ikon">
  <label for="cari">Pencarian</label>
  <div class="input-wrapper">
    <span class="ikon-input">🔍</span>
    <input type="text" id="cari" placeholder="Cari sesuatu...">
  </div>
</div>

<style>
.input-wrapper {
  position: relative;
}

.ikon-input {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.input-dengan-ikon input {
  padding-left: 40px;
}
</style>

Menampilkan Pesan Validasi

Tambahkan pesan validasi yang informatif dan estetis:

.form-grup .pesan-error {
  display: none;
  color: #ef4444;
  font-size: 0.82rem;
  margin-top: 4px;
}

.form-grup.error input,
.form-grup.error textarea {
  border-color: #ef4444;
  background: #fff5f5;
}

.form-grup.error .pesan-error {
  display: block;
}

.form-grup.sukses input {
  border-color: #10b981;
  background: #f0fdf4;
}

Checkbox dan Radio yang Menarik

<div class="form-grup">
  <label class="checkbox-label">
    <input type="checkbox" name="setuju">
    <span>Saya setuju dengan syarat dan ketentuan</span>
  </label>
</div>

<style>
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.9rem;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #3b82f6;
  cursor: pointer;
}
</style>

Tips Membuat Form yang Baik

• Selalu gunakan <label> yang terhubung dengan input melalui atribut for dan id.
• Berikan efek fokus yang jelas agar pengguna tahu field mana yang sedang aktif.
• Gunakan placeholder sebagai contoh nilai, bukan sebagai pengganti label.
• Pastikan tombol submit memiliki ukuran yang cukup besar dan mudah diklik di layar sentuh.
• Validasi form di sisi klien (HTML5 atau JavaScript) sebelum mengirim ke server.

Kesimpulan

Dengan CSS yang tepat, form HTML yang biasa bisa berubah menjadi komponen yang menarik dan nyaman digunakan. Kuncinya adalah memperhatikan detail seperti efek fokus, warna border, tipografi, dan feedback visual untuk validasi. Terapkan teknik-teknik di atas pada form login, registrasi, atau kontak di proyek kamu untuk meningkatkan pengalaman pengguna secara signifikan.