Cara Membuat Contact Form

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti January 29, 2021

Di bawah ini kita akan mempelajari cara membuat formulir kontak dengan CSS.

Contact Form

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
</head>
<body>

<h3>Contact Form</h3>

<div class="container">
  <form action="/action_page.php">
    <label for="fname">Nama Depan</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Nama Belakang</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Negara</label>
    <select id="country" name="country">
      <option value="indonesia">Indonesia</option>
      <option value="malaysia">Malaysia</option>
      <option value="korea">Korea</option>
    </select>

    <label for="subject">Subjek</label>
    <textarea id="subject" name="subject" placeholder="tulis sesuatu.." style="height:200px"></textarea>

    <input type="submit" value="Submit">
  </form>
</div>

</body>
</html>

Cara Membuat Contact Form

Langkah 1) Tambahkan HTML
Gunakan elemen untuk memproses masukan. Anda dapat mempelajari lebih lanjut tentang ini di tutorial PHP kami. Kemudian tambahkan masukan (dengan label yang cocok) untuk setiap bidang:
Contoh

<div class="container">
  <form action="/action_page.php">
    <label for="fname">Nama Depan</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Nama Belakang</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Negara</label>
    <select id="country" name="country">
      <option value="indonesia">Indonesia</option>
      <option value="malaysia">Malaysia</option>
      <option value="korea">Korea</option>
    </select>

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

    <input type="submit" value="Submit">
  </form>
</div>

Langkah 2) Tambahkan CSS:
Contoh

/* style input dengan type = "text", pilih elemen dan area teks */
input[type=text], select, textarea {
  width: 100%; /* lebar maksimum */
  padding: 12px; /* padding */ 
  border: 1px solid #ccc; /* border abu-abu */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Pastikan padding dan lebar tetap pada tempatnya */
  margin-top: 6px; /* Tambahkan margin atas*/
  margin-bottom: 16px; /* margin bawah */
  resize: vertical /* Izinkan pengguna untuk mengubah ukuran textarea secara vertikal (bukan horizontal) */
}

/* Style submit button dengan warna background tertentu, dll */
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Saat menggerakkan mouse ke atas button submit, tambahkan warna hijau yang lebih gelap*/
input[type=submit]:hover {
  background-color: #45a049;
}

/* Tambahkan warna background dan beberapa padding di sekitar contack form */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}