Panduan Lengkap Membuat Formulir Kontak dengan HTML dan CSS

Formulir kontak adalah salah satu elemen penting dalam sebuah website. Fungsinya sangat vital karena menjadi media komunikasi antara pengunjung dan pemilik situs. Baik untuk website pribadi, portofolio, bisnis kecil, hingga toko online, formulir kontak yang baik akan mempermudah user dalam menghubungi Anda secara langsung tanpa harus membuka email mereka secara manual.

Pada artikel ini, kita akan belajar cara membuat formulir kontak menggunakan HTML dan CSS dari nol. Mulai dari struktur dasar HTML, penataan tampilan dengan CSS, hingga tips pengembangan lebih lanjut agar form terlihat profesional dan mudah digunakan.

1. Struktur Dasar HTML Formulir Kontak

Langkah pertama adalah membuat elemen-elemen dasar dari form kontak menggunakan HTML. Form ini akan memiliki tiga input utama: nama, email, dan pesan.

<form action="#" method="post">
  <label for="name">Nama Lengkap:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email Aktif:</label>
  <input type="email" id="email" name="email" required>

  <label for="subject">Subjek:</label>
  <input type="text" id="subject" name="subject">

  <label for="message">Pesan Anda:</label>
  <textarea id="message" name="message" rows="6" required></textarea>

  <button type="submit">Kirim Pesan</button>
</form>

Tag <form> berfungsi sebagai pembungkus semua elemen input, dan properti action serta method nantinya bisa disesuaikan jika Anda ingin menghubungkan ke backend atau layanan pengirim email.

2. Menambahkan CSS Agar Form Terlihat Profesional

Tanpa CSS, form akan terlihat sangat sederhana. Dengan menambahkan beberapa styling, kita bisa membuatnya lebih menarik dan nyaman digunakan.

<style>
form {
  max-width: 600px;
  margin: 40px auto;
  padding: 25px;
  background-color: #fdfdfd;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  font-family: Arial, sans-serif;
}

label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
  color: #333;
}

input, textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

input:focus, textarea:focus {
  outline: none;
  border-color: #2196F3;
  box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
}

button {
  background-color: #2196F3;
  color: #fff;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0b7dda;
}
</style>

Dengan styling di atas, form Anda akan tampil lebih modern dan user-friendly.

3. Tips Lanjutan

• Validasi Form: Gunakan HTML5 (seperti required, type="email") atau JavaScript untuk validasi tambahan sebelum data dikirim.
• Kirim Form dengan Google Forms: Jika belum memiliki backend, Anda bisa mengganti atribut action dengan URL Google Forms atau Formspree.io.
• Mobile Friendly: Pastikan form responsif agar nyaman diakses melalui perangkat mobile.
• Aksesibilitas: Gunakan label yang sesuai agar form mudah digunakan oleh pengguna dengan kebutuhan khusus.

4. Kesimpulan

Formulir kontak bukan hanya alat komunikasi, tetapi juga salah satu aspek penting dalam membangun kredibilitas sebuah situs web. Dengan HTML dan CSS yang tepat, Anda bisa menciptakan form yang terlihat profesional tanpa harus menggunakan framework berat atau library tambahan.

Silakan gunakan dan modifikasi kode ini sesuai kebutuhan proyek Anda. Nantikan juga tutorial lanjutan untuk menghubungkan form ini ke backend dengan PHP atau Flask.

Semoga artikel ini bermanfaat. Jangan lupa untuk terus belajar dan eksplorasi hal-hal baru di dunia web development hanya di Dede Rizqi Dev Blog!