Home-theater-designers
Formulir kontak adalah komponen penting situs web, yang memungkinkan pengguna menghubungi Anda dengan pertanyaan, masukan, atau permintaan.
Video MUO hari ini GULIR UNTUK MELANJUTKAN ISI
Di sini Anda akan mempelajari proses pembuatan formulir kontak dasar untuk situs web Anda. Dari menyiapkan proyek hingga menambahkan validasi dan gaya formulir, memastikan bahwa Anda memiliki formulir kontak yang fungsional dan menyenangkan pada akhirnya.
Menyiapkan Proyek
Sebelum Anda mulai membuat kode, pastikan lingkungan pengembangan Anda sudah diatur. Buka editor teks pilihan Anda atau salah satu lingkungan pengembangan terintegrasi (IDE) yang direkomendasikan menyukai Kode Visual Studio atau Teks Luhur .
Buat folder proyek untuk mengatur file HTML dan CSS Anda.
mentransfer data dari komputer ke komputer
Di dalam folder ini, buat file terpisah untuk HTML ( indeks.html ) dan CSS ( gaya.css ). Terakhir, tautkan file CSS Anda ke dalam dokumen HTML Anda
Membuat Struktur HTML
Dasar dari setiap formulir kontak adalah struktur HTML-nya. Inilah cara Anda membuat elemen HTML yang diperlukan untuk formulir kontak Anda.
<main>
<h1>Welcome to my Form</h1>
<form id="form">
<div class="input__container">
<label for="name">Name</label>
<!-- The 'required' prop ensures a filled field before submission -->
<input type="text" id="name" name="name" required />
</div>
<div class="input__container">
<label for="email">Email</label>
<input type="email" id="email" name="email" required />
</div>
<div class="input__container">
<label for="message">Message</label>
<textarea id="message" name="message" rows="4" required></textarea>
</div>
<button>Submit</button>
</form>
</main>
Kode HTML di atas membuat elemen formulir dan menyarangkan beberapa kolom masukan untuk menerima masukan pengguna untuk formulir kontak.
Saat ini, formulir kontak Anda terlihat seperti ini:
Menata Formulir Kontak
Formulir kontak yang menarik dan ramah pengguna meningkatkan pengalaman pengguna secara keseluruhan. Kode CSS di bawah ini menggunakan properti model kotak flexbox dan CSS seperti padding dan margin untuk menata formulir kontak agar tampilannya lebih baik.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: "Mulish", sans-serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
main {
width: 40rem;
box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
margin: 0 auto;
height: 45rem;
border-radius: 2rem;
padding: 2rem;
}
h1 {
text-align: center;
font-size: 3rem;
padding: 1rem 2rem;
}
form {
margin: 3rem 0;
display: flex;
flex-direction: column;
row-gap: 2rem;
}
.input__container {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
}
.input__container label { font-size: 1.6rem; }
.input__container input,
textarea {
padding: 1rem 2rem;
border-radius: 5px;
border: 1px solid #555;
resize: none;
}
button {
align-self: flex-start;
padding: 1rem 2rem;
border-radius: 5px;
border: none;
background: #333;
color: #fff;
cursor: pointer;
}
Formulir kontak Anda sekarang terlihat seperti ini:
Menerapkan Validasi Formulir
Memastikan keakuratan dan kelengkapan informasi yang diberikan pengguna adalah hal yang terpenting. Salah satu pendekatan yang efektif melibatkan menggunakan JavaScript untuk validasi formulir sisi klien . Untuk memulai, buat tag skrip di akhir file HTML Anda dan targetkan elemen formulir.
<script>
"use strict";
const form = document.getElementById("form");
</script>
Kemudian lampirkan pendengar acara ke formulir untuk dikirimkan oleh pengguna.
form.addEventListener("submit", function (event) { });
Selanjutnya, cegah tindakan pemuatan ulang halaman default berdasarkan formulir dan pilih nilai di bidang email.
form.addEventListener("submit", function (event) {
// Prevent page reload on submit
event.preventDefault();
// Selecting the email value filled by the user
const email = document.getElementById("email").value;
});
Terakhir, gunakan ekspresi reguler untuk menguji validitas email pengguna dan menampilkan pesan sesuai dengan nilai email.
form.addEventListener("submit", function (event) {
// Preventing page reload on submit
event.preventDefault();
// Selecting the email value filled by the user
const email = document.getElementById("email").value;
// Checking for valid email using a simple regex pattern
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
alert("Wrong email format");
return;
}
// If everything passes, show success message
alert("Form submitted successfully");
});
Langkah ini akan membantu mencegah kesalahan umum dan memastikan pengguna hanya mengirimkan data yang valid.
Pengujian dan Pemecahan Masalah Formulir Kontak Akhir
Tidak ada proyek yang selesai tanpa pengujian menyeluruh. Untuk memastikan formulir Anda berfungsi dengan benar, masukkan nilai yang diperlukan, kirimkan formulir, dan verifikasi bahwa formulir memberikan hasil yang diinginkan.
Sesuaikan Formulir Kontak Anda
Anda telah membuat formulir kontak dasar untuk situs web Anda. Anda telah menguasai penyiapan proyek, struktur HTML, gaya CSS, validasi formulir JavaScript, dan pengujian menyeluruh.
Formulir kontak yang dibuat dengan baik meningkatkan interaksi pengguna, sehingga memudahkan pengunjung untuk terhubung dengan Anda. Jangan ragu untuk menyesuaikan dan memperluas fungsinya untuk memenuhi kebutuhan spesifik Anda.