Part 5: Cara Menambahkan Formulir Kontak WhatsApp di Portofolio HTML & CSS Internal
Pada Part 4, kita sudah menambahkan tampilan kartu proyek (card design) agar portofolio terlihat profesional. Kali ini di Part 5, kita akan menambahkan formulir kontak sederhana yang terhubung langsung ke WhatsApp. Dengan cara ini, pengunjung website bisa langsung mengirim pesan ke WhatsApp Anda tanpa backend atau database.
Apa yang Akan Dibuat?
Kita akan membuat:
- Formulir kontak sederhana dengan input nama, email, dan pesan.
- Tombol kirim yang langsung membuka WhatsApp Web/App dengan pesan siap kirim.
- CSS sederhana untuk mempercantik tampilan form.
Langkah 1: Tambahkan CSS untuk Formulir Kontak
Buka file index.html dari Part 4. Cari bagian <style> dan tambahkan kode CSS berikut di bawah CSS sebelumnya:
/* Formulir Kontak */
form {
display: flex;
flex-direction: column;
gap: 10px;
}
input, textarea, button {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
button {
background: #007bff;
color: #fff;
border: none;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #0056b3;
}
💡 Penjelasan: Form menggunakan layout flex agar input tersusun rapi ke bawah, tombol biru memiliki efek hover agar interaktif.
Langkah 2: Tambahkan Formulir di Bagian Kontak
Cari bagian <section id="contact"> di HTML, lalu ubah isinya menjadi:
<section id="contact">
<h2>Kontak</h2>
<p>Hubungi saya melalui formulir di bawah ini:</p>
<form id="contactForm">
<input type="text" id="name" placeholder="Nama Anda" required>
<input type="email" id="email" placeholder="Email Anda" required>
<textarea id="message" rows="4" placeholder="Pesan Anda" required></textarea>
<button type="submit">Kirim ke WhatsApp</button>
</form>
</section>
Form ini memiliki tiga input: nama, email, dan pesan.
Langkah 3: Tambahkan Script untuk WhatsApp
Sebelum tag </body>, tambahkan JavaScript berikut:
<script>
document.getElementById("contactForm").addEventListener("submit", function(e) {
e.preventDefault();
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
const message = document.getElementById("message").value;
const whatsappNumber = "6281234567890"; // Ganti dengan nomor WhatsApp Anda (tanpa +)
const url = `https://wa.me/${whatsappNumber}?text=Halo, saya ${name}%0AEmail: ${email}%0APesan: ${message}`;
window.open(url, "_blank");
});
</script>
✅ Saat tombol diklik, WhatsApp Web/App akan terbuka dengan pesan siap kirim ke nomor Anda.
Di Part 6, kita akan menambahkan animasi halus (hover & transition) agar portofolio terlihat lebih hidup.