Membuat Contact Form Menggunakan Bootstrap

Belajar Web Design

Pada kesempatan kali ini, kita akan membuat sebuah contact form menggunakan Bootstrap.

Tentunya kita pasti pernah mengunjungi sebuah halaman Website, ada halaman khusus.

Yang mana halaman tersebut menyediakan form untuk diisi.

Biasanya form tersebut berisi info tentang nama, email, bahkan pesan maupun kritik dan saran.

Maka dari itu kita membutuhkan beberapa komponen pendukung dari Bootstrap.

-Navbar, untuk menu navigasi atas https://getbootstrap.com/docs/4.0/components/navbar/#brand.
-Container, untuk layout menu utamanya https://getbootstrap.com/docs/4.0/layout/overview/#containers.
-Grid, untuk atur posisi kontent https://getbootstrap.com/docs/4.0/layout/grid/.
-Form, untuk kolom yang akan diisi datanya oleh pengunjung https://getbootstrap.com/docs/4.0/components/forms/.
-CSS buatan sendiri, untuk menambahkan dengan style yang kita buat sendiri.

Oke, langsung aja kita mulai.

  1. Buat file dengan format “.html” lalu ketikkan script kode berikut, bisa dicopy paste dari halaman ini https://getbootstrap.com/docs/4.0/getting-started/introduction/#starter-template.
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Contact Form</title>
  </head>
  <body>
    

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>
  1. Lalu ketikkan script Navbar pada Bootstrap.
    Letakkan setelah tag .
    <nav class="navbar navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Webhozz Blog</a>
    </nav>

3. Maka akan tampil seperti ini pada Browser.

4. Lalu masukkan Container dan Grid setelah Navbar tadi.

<div class="container">
      
      <div class="row">
        <div class="col">
          
        </div>

        <div class="col">
         
        </div>
      </div>

Saat dijalankan pada browser, tampak tidak ada perubahan.

Itu karna warna background untuk container dan grid berwarna putih.

  1. Pada script langkah 4 tadi, kita bisa tambahkan pada masing-masing kolom tersebut dengan beberapa komponen, contohnya ini untuk kolom pertama ().

Kita isi dengan script HTML berikut.

  <h1>Kontak Kami</h1>
  <p>
    Silahkan tinggalkan pesan anda, pada kolom yang tersedia.
  </p>

6. Lalu kolom kedua (), kita isi dengan komponen form https://getbootstrap.com/docs/4.0/components/forms/.

<form method="post" action="#">
            
    <div class="form-group">
      <label for="">Nama Anda:</label>
      <input type="text" class="form-control" name="nama" placeholder="Masukkan Nama">
    </div>

    <div class="form-group">
      <label for="">E-mail Anda:</label>
      <input type="email" class="form-control" name="email" placeholder="Masukkan Email">
    </div>

    <div class="form-group">
      <label for="">Pesan Anda:</label>
      <textarea name="pesan" class="form-control" cols="30" rows="7"></textarea>
    </div>

    <input class="btn btn-primary" type="submit" value="POST">

  </form>

7. Maka seperti inilah script kedua kolom tersebut.

 <div class="row">
    <div class="col">
      <h1>Kontak Kami</h1>
      <p>
        Silahkan tinggalkan pesan anda, pada kolom yang tersedia.
      </p>
    </div>

    <div class="col">
      <form method="post" action="#">
        
        <div class="form-group">
          <label for="">Nama Anda:</label>
          <input type="text" class="form-control" name="nama" placeholder="Masukkan Nama">
        </div>

        <div class="form-group">
          <label for="">E-mail Anda:</label>
          <input type="email" class="form-control" name="email" placeholder="Masukkan Email">
        </div>

        <div class="form-group">
          <label for="">Pesan Anda:</label>
          <textarea name="pesan" class="form-control" cols="30" rows="7"></textarea>
        </div>

        <input class="btn btn-primary" type="submit" value="POST">

      </form>
    </div>
  </div>

8. Maka seperti inilah tampilannya pada browser.

9. Lalu kita bisa buat folder beserta file CSS terbaru.

Tujuannya untuk menambahkan style pada Bootstrap, dengan style buatan kita sendiri.

Berikut ini adalah script kode CSS buatan kita sendiri.

body
{
    background-color: gainsboro;
}

.badan
{
    background-color: white;
    padding: 13px 0;
    margin-top: 30px;
}

.peding-100
{
    padding: 120px;
}

.peding-30
{
    padding: 30px;
}

10. Lalu satukan file CSS tersebut dengan file HTML yang sudah kita buat.

Tentunya pada tag <head></head>.

<link rel="stylesheet" href="css/tampilan.css">

Pada kode di atas, menunjukkan bahwa kita membuat file CSS bernama “tampilan.css” yang terdapat dalam folder “css”.

11. Lalu lakukan tambahan class CSS pada Container, dan Gridnya seperti contoh di bawah ini.

<div class="container badan">
      
      <div class="row">
        <div class="col peding-100">
          ...
        </div>

        <div class="col peding-30">
          ...
        </div>
      </div>

    </div>

Kita bisa lihat ada tambahan class seperti “.badan, .peding-100, .peding-30” bahkan perubahan pada tag .

12. Maka, seperti inilah script kode keseluruhan.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Contact Form</title>
    <link rel="stylesheet" href="css/tampilan.css">
  </head>
  <body>
    <nav class="navbar navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Webhozz Blog</a>
    </nav>

   <div class="container badan">
      
      <div class="row">
        <div class="col peding-100">
          <h1>Kontak Kami</h1>
          <p>
            Silahkan tinggalkan pesan anda, pada kolom yang tersedia.
          </p>
        </div>

        <div class="col peding-30">
          <form method="post" action="#">
            
            <div class="form-group">
              <label for="">Nama Anda:</label>
              <input type="text" class="form-control" name="nama" placeholder="Masukkan Nama">
            </div>

            <div class="form-group">
              <label for="">E-mail Anda:</label>
              <input type="email" class="form-control" name="email" placeholder="Masukkan Email">
            </div>

            <div class="form-group">
              <label for="">Pesan Anda:</label>
              <textarea name="pesan" class="form-control" cols="30" rows="7"></textarea>
            </div>

            <input class="btn btn-primary" type="submit" value="POST">

          </form>
        </div>
      </div>

    </div>
  
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

13. Maka seperti inilah hasil akhirnya.

Nah, kira-kira begitulah. Demikianlah share ilmu kita pada kesempatan kali ini.

Akhir kata, selamat mencoba dan semoga bermanfaat…

No related posts.