Cara Membuat Formulir Kontak dengan Bootstrap

Bagi sebuah website, halaman kontak memiliki fungsi yang sangat penting, degan adanya halaman tersebut pengunjung akan mengetahui bagaimana cara menghubungi pemilik atau pengelola suatu website. Salah satu bagian dari halaman kontak yaitu formulir kontak, yang biasanya terdiri dari beberapa data yang harus diisi seperti nama, alamat email, isi pesan, alamat website atau informasi lain yang diperlukan. Formulir kontak dengan tampilan yang bagus dan menarik tentu akan memberikan suatu kesan tersendiri bagi orang yang akan mengisinya, untuk itu saya akan memberikan panduan cara membuat formulir kontak menggunakan css framework bootstrap.

Cara membuatnya cukup mudah dan kita tidak perlu mendesain tampilannya dari awal, hanya perlu beberapa kode css untuk membuatnya lebih menarik. Agar Anda tidak penasaran, berikut langkah-langkahnya.

1. Sebelum mulai menggunakan bootstrap tentu anda perlu melakukan integrasi bootstrap pad website Anda, jika Anda menggunakan platform blogger maka Anda bisa membaca artikel berikut (Cara Mengintegrasikan Bootstrap dengan Template Blogger) sebagai referensi. Atau dengan mengimpor css, javascript dan jQuery dibawah ini kedalam website Anda.

Bootstrap CSS

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>

Bootstrap JavaScript

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

jQuery

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

2. Setelah itu siapkan sebuah halaman yang akan digunakan untuk halaman kontak sekaligus lokasi penempatan formulir kontak.
3. Selanjutnya untuk membuat formulir isian seperti nama, alamat email dan tombol kirim seperti gambar diatas, salin kode dibawah ini.

<!-- CONTACT FORM-->
<div class="support">
<div class="container">
<h2 class="sub-header1" id="contact"><span class='color'>Get</span> Support</h2>
        <div class="row">
          
          <form role="form" method="POST" action="" onSubmit="this.scrollPosition.value=document.body.scrollTop" class="contact-form">

            <input type="hidden" name="scrollPosition">

            <input type="hidden" name="submitted" id="submitted" value="true" />

            <div class="col-lg-4 col-sm-4" data-scrollreveal="enter left after 0s over 1s">

              <input type="text" name="myname" placeholder="Your Name" class="form-control input-box" value="">

            </div>

            <div class="col-lg-4 col-sm-4" data-scrollreveal="enter left after 0s over 1s">

              <input type="email" name="myemail" placeholder="Your Email" class="form-control input-box" value="">

            </div>

            <div class="col-lg-4 col-sm-4" data-scrollreveal="enter left after 0s over 1s">

              <input type="text" name="mysubject" placeholder="Subject" class="form-control input-box" value="">

            </div>

            <div class="col-md-12" data-scrollreveal="enter right after 0s over 1s">

              <textarea name="mymessage" class="form-control textarea-box" placeholder="Your Message"></textarea>

              <button class="btn btn-primary custom-button send-btn" type="submit" data-scrollreveal="enter left after 0s over 1s">Send Message</button> 
            </div>
            
          </form>

        </div>
</div>
</div>
<!-- / END CONTACT FORM-->

4. Agar tampilannya lebih menarik, tambahkan css untuk menghiasi formulir tersebut, bisa Anda sesuaikan dengan kebutuhan dan keinginan, atau jika ingin seperti gambar diatas maka salin kode dibawah ini.

.input-box{
    margin-bottom: 10px;
    border-radius:0px;
    height: 50px; 
}
.textarea-box{
    margin-bottom: 10px;
    border-radius:0px;
    min-height: 200px; 
}
.support{
    background:#DBBF56;
    min-height: 500px;
    background-size: 100%;
}
.custom-button {
    display: inline-block !important;
    text-align: center;
    text-transform: uppercase;
    padding: 13px 35px;
    border-radius: 4px;
    margin: 10px;
    border: medium none;
}
.send-btn{
    float: right;
}

5. Setelah selesai, sekarang Anda tinggal menyimpan dan melihat hasilnya.

Namun perlu diketahu bahwa formulir kontak yang dibuat seperti diatas belum dapat bekerja, jadi hanya tampilan saja. Agar dapat bekerja dengan baik Anda perlu menambahkan beberapa kode agar pengunjung dapat menghubungi Anda dan pesan bisa masuk. Keuntungan dari membuat formulir kontak menggunakan bootstrap adalah kita tidak perlu mendesain dari awal tampilan input dan tombol, jadi tanpa menambahkan css pun tampilannya sudah lumayan bagus. Selain itu juga responsif, jadi meskipun diakses menggunakan perangkat mobile tampilannya akan tetap bagus.