Advan– Saat membuat website, ada satu elemen yang penting dan sering dicari pengunjung, yaitu form contact. Kamu pasti sering melihat form ini di berbagai situs, terutama di halaman Hubungi Kami. Membuat form contact ini memudahkan pengunjung untuk berkomunikasi dengan pemilik website secara langsung. Tidak hanya itu, form contact juga bisa meningkatkan kesan profesional pada website kamu.
Bagi yang baru mulai belajar web development, mungkin terdengar menakutkan untuk membuat form contact sendiri. Tapi jangan khawatir, dengan tutorial sederhana ini, kamu bisa membuat form contact sendiri tanpa perlu kemampuan coding tingkat tinggi. Tenang saja, kamu hanya membutuhkan HTML dasar untuk memulainya.
Nah, di artikel ini kita akan membahas langkah-langkah yang mudah dan bisa kamu ikuti. Siapkan editor teks favorit kamu, seperti Notepad++ atau Visual Studio Code, lalu ikuti setiap langkah yang ada di sini. Berikut ini adalah langkah-langkah detailnya:
1. Persiapkan Struktur Dasar HTML
Pertama-tama, kamu harus mempersiapkan struktur dasar HTML. Kamu bisa membuat file baru dengan ekstensi .html, misalnya contact.html. Setelah itu, isi file tersebut dengan kode HTML dasar berikut ini:
html
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Form Kontak</title>
</head>
<body>
<h1>Hubungi Kami</h1>
</body>
</html>
Kode di atas adalah struktur HTML dasar. Tag <html> menandakan bahwa ini adalah dokumen HTML, dan <head> berisi informasi meta seperti karakter dan judul halaman.
2. Tambahkan Form Element
Langkah selanjutnya adalah menambahkan elemen form di dalam body HTML kamu. Gunakan tag <form> untuk membuat form:
html
<form action=”/submit_form” method=”POST”>
<label for=”name”>Nama:</label>
<input type=”text” id=”name” name=”name” required>
<br>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email” required>
<br>
<label for=”message”>Pesan:</label>
<textarea id=”message” name=”message” required></textarea>
<br>
<button type=”submit”>Kirim</button>
</form>
Kode di atas merupakan form sederhana dengan tiga input: nama, email, dan pesan. Setiap input memiliki atribut required, artinya pengunjung wajib mengisinya sebelum form dapat dikirim.
3. Tambahkan Validasi Dasar
Untuk memastikan pengunjung mengisi form dengan benar, kamu bisa menambahkan validasi sederhana menggunakan atribut HTML seperti required dan type pada input email:
html
<input type=”email” id=”email” name=”email” required>
Atribut type=”email” akan mengecek apakah pengunjung memasukkan format email yang valid.
Baca Juga : Prinsip Dasar Kriptografi Kunci Publik dan Kunci Privat
4. Optimalkan Tampilan dengan CSS
Agar form kamu terlihat lebih menarik, kamu bisa menambahkan sedikit CSS ke dalam file HTML. Misalnya:
html
<style>
form {
max-width: 400px;
margin: auto;
}
label {
display: block;
margin-bottom: 8px;
}
input, textarea {
width: 100%;
padding: 8px;
margin-bottom: 12px;
}
</style>
Kode CSS di atas akan membuat form lebih rapi dan responsif. Tampilan yang menarik tentu akan meningkatkan pengalaman pengguna di website kamu.
Membuat form contact di HTML tidaklah sulit, bukan? Dengan mengikuti langkah-langkah di atas, kamu bisa membuat form contact sederhana untuk website kamu dalam waktu singkat. Kamu juga bisa mengembangkan form ini dengan menambahkan fitur lain, seperti reCAPTCHA atau pengiriman otomatis ke email.
Jika kamu mencari gadget yang bisa menunjang produktivitas pembuatan website atau menjalankan berbagai aplikasi, Advan punya beberapa produk menarik yang bisa kamu pertimbangkan. Salah satu rekomendasi adalah Advan G9 Pro yang menawarkan performa cepat dengan RAM besar dan harga terjangkau. Selain itu, router Advan CPE Start bisa memberikan koneksi internet yang stabil dan cepat, sangat cocok untuk bekerja dari rumah atau tempat kerja mana pun. Kunjungi website resmi advan untuk melihat lebih banyak produk berkualitas lainnya.***
Editor: Andik Chefasa