Selamat datang di mandankoding.com. Kali ini kita akan berbagi tetang Cara Membuat Form Kontak Dengan HTML Dan CSS. Sebelumnya daya sudah berbagi tetang Membangun Aplikasi Cuaca Dengan HTML & CSS.
Kami juga menyediakan tutorial dalam bentuk video dan kamu bisa melihat tahapan proses pembuatan Form Kontak Dengan HTML Dan CSS dengan mengklik video youtube di bawah:
Form Kontak sangat berguna untuk sebuah website, karena akan membantu kamu sebagai pemilik website. Jika ada yang ingin menghubungi kamu, maka Form Kontak ini akan memprosesnya sebagai email dan mengirimkan data dan juga pesan yang telah di isi oleh si pengirim tersebut atau visitor kamu.
Tutorial Kami Lainnya:
- Mengenal Color dalam CSS: Mengatur Warna Halaman Website
- Jurusan Kuliah yang Gampang Cari Kerja untuk 5 Tahun Kedepan
- Tidak Mau Salah Pilih Jurusan? Ini Tips untuk Gen Z!
- Benarkah Syarat Jadi Programmer Harus Pintar Matematika?
Sekarang kita langsung saja, Untuk membuat Form Kontak Dengan HTML Dan CSS. Pertama, Kamu perlu membuat dua File. Satu File HTML dan satu lagi adalah File CSS. Setelah file-file tersebut selesai di buat, kamu cukup salin kode berikut di ke dalam file kamu.
Pertama, buat file HTML dengan nama index.html dan salin kode ke dalam file HTML kamu. Ingat, kamu harus membuat file dengan ekstensi .html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<h2>CONTACT US</h2>
<form action="" method="post">
<div class="form-group">
<label for="">Full Name</label>
<input type="text">
</div>
<div class="form-group">
<label for="">Email Address</label>
<input type="email">
</div>
<div class="form-group">
<label for="">Message</label>
<textarea name="" id="" rows="5" placeholder="Type your message here..."></textarea>
</div>
<div class="form-group">
<button type="submit" class="submit">Send Message</button>
</div>
</form>
</div>
</body>
</html>Kedua, buat file CSS dengan nama style.css dan salin kode kedalam file CSS kamu. Ingat, Anda harus membuat file dengan ekstensi .css.
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
background: linear-gradient(90deg, #74b6ff 0%, #1bdcfd 50%, #45d9fc 100%);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
line-height: 1.5;
display: flex;
height: 100vh;
flex-direction: column;
align-items: center;
justify-content: center;
}
.wrapper {
background: #fff;
width: 90%;
padding: 2rem;
box-shadow: 0 0px 2.2px rgba(0, 0, 0, 0.028), 0 0px 5.3px rgba(0, 0, 0, 0.04), 0 0px 10px rgba(0, 0, 0, 0.05);
}
h2 {
background: #1dbcfd;
color: white;
letter-spacing: 0.1rem;
padding: 1rem;
cursor: default;
}
form,
input,
textarea,
button {
font-family: inherit;
font-size: initial;
}
.form-group label {
display: block;
margin: 2rem 0 0.5rem 0;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
width: 100%;
padding: 1rem 0.8rem;
border: 1px solid rgba(0, 0, 0, 0.2);
outline: 0;
transition: border 0.15s;
}
.form-group input[type="text"],
.form-group input[type="email"] {
height: 4.6rem;
}
.form-group textarea {
resize: vertical;
}
.submit {
background: #1dbcfd;
color: white;
font-weight: bold;
margin-top: 1rem;
padding: 1rem 1.5rem;
border: none;
cursor: pointer;
transition: background 0.15s;
}
.submit:hover {
background: rgba(173, 216, 230, 1);
color: black;
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
border: 1px solid #1dbcfd;
}
/* responsive */
@media screen and (min-width: 576px) {
.wrapper {
width: 70%;
}
}
@media screen and (min-width: 768px) {
.wrapper {
width: 55%;
}
}
@media screen and (min-width: 992px) {
.wrapper {
width: 45%;
}
}
@media screen and (min-width: 1200px) {
.wrapper {
width: 35%;
}
}
Untuk melihat hasilnya, silahkan kamu jalankan file index.html di browser kamu.
Itu saja, sekarang kamu telah berhasil Membuat Form Kontak Dengan HTML & CSS. Jika kode kamu tidak berfungsi atau kamu menghadapi kesalahan/masalah, silakan tinggalkan pesan di kolom komentar.
Hi,
I am getting in touch to present a valuable guest post offer for your website which will help boosting your traffic as well as build links. You will just have to publish it on your site with my backlink.
Interested in working together on this? If yes, I’ll send you the topics.
Looking forward to hearing from you.
Best,
Wendy Gill