Tutorial Membuat Formulir Kontak dengan Validasi AI di Website

Cara Membuat Formulir Kontak dengan Validasi AI

Pada tutorial kali ini, kita akan belajar bagaimana membuat formulir kontak sederhana dengan validasi menggunakan JavaScript. Formulir ini akan memastikan data yang dimasukkan sesuai dengan format yang benar.

Langkah 1: Struktur Dasar HTML

Mulailah dengan membuat kerangka HTML untuk formulir kontak. Berikut adalah contoh kodenya:

<form id="contactForm">
  <label for="name">Nama:</label>
  <input type="text" id="name" name="name" required>

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

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

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

Langkah 2: Tambahkan Validasi dengan JavaScript

Gunakan JavaScript untuk memvalidasi data sebelum dikirimkan. Berikut contoh sederhana:

<script>
document.getElementById("contactForm").addEventListener("submit", function(event) {
  const name = document.getElementById("name").value.trim();
  const email = document.getElementById("email").value.trim();
  const message = document.getElementById("message").value.trim();

  if (name === "" || email === "" || message === "") {
    alert("Harap isi semua kolom!");
    event.preventDefault();
  } else if (!/^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$/.test(email)) {
    alert("Masukkan email yang valid!");
    event.preventDefault();
  }
});
</script>

Langkah 3: Menambahkan Gaya dengan CSS

Untuk mempercantik tampilan formulir, tambahkan beberapa gaya CSS berikut:

<style>
form {
  max-width: 400px;
  margin: auto;
  padding: 20px;
  background: #f0f0f0;
  border-radius: 10px;
}
label {
  display: block;
  margin-bottom: 8px;
}
input, textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
button {
  background-color: #007BFF;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  background-color: #0056b3;
}
</style>

Hasil Akhir

Setelah semua kode digabungkan, Anda akan mendapatkan formulir kontak yang terlihat profesional dan berfungsi dengan validasi sederhana.

Lihat Demo