Cara Membuat Formulir Kontak Sederhana Menggunakan HTML, CSS, dan JavaScript

Formulir kontak adalah komponen penting situs web, yang memungkinkan pengguna menghubungi Anda dengan pertanyaan, masukan, atau permintaan.

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.

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 bagian menggunakan menandai.

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 Formh1>
<formid="form">
<divclass="input__container">
<labelfor="name">Namelabel>

<inputtype="text"id="name"name="name"required />
div>
<divclass="input__container">
<labelfor="email">Emaillabel>
<inputtype="email"id="email"name="email"required />
div>
<divclass="input__container">
<labelfor="message">Messagelabel>
<textareaid="message"name="message"rows="4"required>textarea>
div>
<button>Submitbutton>
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:

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 5pxrgba(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__containerlabel { font-size: 1.6rem; }
.input__containerinput,
textarea {
 padding: 1rem 2rem;
 border-radius: 5px;
 border: 1pxsolid#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.