5025231237 - Rayhan Aurelia Pramana Rijal - Javascript Form
Nama : Rayhan Aurelia Pramana Rijal\
NRP : 5025231237
Kelas : PWEB E
CODE :
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Formulir Kontak</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f4;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#pesan-konfirmasi {
margin-top: 15px;
padding: 10px;
border-radius: 4px;
}
.sukses {
background-color: #dff0d8;
color: #3c763d;
}
.error {
background-color: #f2dede;
color: #a94442;
}
</style>
</head>
<body>
<h2>Formulir Kontak</h2>
<form id="kontakForm">
<div class="form-group">
<label for="nama">Nama Lengkap</label>
<input type="text" id="nama" name="nama" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="telepon">Nomor Telepon</label>
<input type="tel" id="telepon" name="telepon" required>
</div>
<div class="form-group">
<label for="pesan">Pesan</label>
<textarea id="pesan" name="pesan" rows="5" required></textarea>
</div>
<button type="submit">Kirim Pesan</button>
</form>
<div id="pesan-konfirmasi"></div>
<script>
document.getElementById('kontakForm').addEventListener('submit', function(e) {
e.preventDefault(); // Mencegah pengiriman form standar
// Ambil nilai input
const nama = document.getElementById('nama').value;
const email = document.getElementById('email').value;
const telepon = document.getElementById('telepon').value;
const pesan = document.getElementById('pesan').value;
// Validasi sederhana
if (nama.trim() === '' || email.trim() === '' ||
telepon.trim() === '' || pesan.trim() === '') {
tampilkanPesan('Mohon lengkapi semua field', false);
return;
}
// Validasi format email
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
tampilkanPesan('Format email tidak valid', false);
return;
}
// Validasi nomor telepon (hanya angka)
const teleponRegex = /^[0-9]+$/;
if (!teleponRegex.test(telepon)) {
tampilkanPesan('Nomor telepon harus berisi angka', false);
return;
}
// Simulasi pengiriman data (dalam praktiknya, Anda akan mengirim ke backend)
console.log('Data Form:', { nama, email, telepon, pesan });
// Tampilkan pesan sukses
tampilkanPesan(`Terima kasih ${nama}, pesan Anda telah terkirim!`, true);
// Reset form
document.getElementById('kontakForm').reset();
});
function tampilkanPesan(pesan, sukses) {
const pesanKonfirmasi = document.getElementById('pesan-konfirmasi');
pesanKonfirmasi.textContent = pesan;
pesanKonfirmasi.className = sukses ? 'sukses' : 'error';
}
</script>
</body>
</html>
Penjelasan Kode :
Saya telah membuat sebuah formulir kontak lengkap dengan beberapa fitur:
- Desain Responsif
- Form menggunakan CSS untuk tampilan yang rapi
- Warna dan gaya modern
- Menyesuaikan lebar layar
- Validasi JavaScript
- Memeriksa kelengkapan field
- Memvalidasi format email
- Memastikan nomor telepon hanya berisi angka
- Fitur Interaktif
- Mencegah pengiriman form standar
- Menampilkan pesan konfirmasi (sukses/error)
- Mereset form setelah pengiriman
- Pesan Konfirmasi
- Warna hijau untuk sukses
- Warna merah untuk error
- Personalisasi pesan dengan nama pengirim
Komentar
Posting Komentar