Kita langsung mulai dari coding video sebelumnya. Saya sudah menambahkan beberapa bagian. Yang pertama adalah section kontak, yang isinya judul Hubungi Kami. Yang kedua adalah section wavefooter, yang isinya adalah wave seperti yang telah kita pelajari pada video sebelumnya. Sedangkan bagian ketiga adalah footer, yang isinya tulisan Copyright 2021.

Kalau kita lihat tampilannya di browser. Bagian pertama adalah tulisan Hubungi Kami dengan warna latar belakang abu-abu terang. Bagian kedua adalah wave ini. Dan bagian terakhir adalah tulisan Copyright 2021.

Sekarang kita mulai coding formulir Hubungi Kami. Kita arahkan kursor ke bawah judul Hubungi Kami. Nah, untuk membuat formulir, pertama kita perlu membuat tag form terlebih dahulu. Kemudian di dalamnya kita tambahkan tag input. Sebagai contoh kita membuat input untuk nama terlebih dahulu, jadi kita berikan attribute id dengan nilai nama. Dan berhubung kita menggunakan Bootstrap, maka kita tambahkan kelas form-control. Kemudian kita bisa menambahkan attribute placeholder, untuk mengisikan kata-kata apa yang dituliskan di dalam input, sebelum diisi oleh pengunjung. Sebagai contoh kita isikan placeholder dengan kata “Nama Anda”.

Kita simpan dan refresh browser. Sekarang kita sudah memiliki satu buah input dengan tulisan Nama Anda. Apabila kita mengisikan sesuatu di dalam input ini, sebagai contoh saya tuliskan David. Maka tulisan Nama Anda menghilang dan diganti dengan tulisan kita. Berhubung kita menggunakan kelas form-control, maka input ini secara otomatis mengikuti gaya Bootstrap dengan ujung yang sedikit membulat, warna border abu-abu, dan pada saat menerima fokus, input kita mendapatkan shadow berwarna biru yang membuatnya menjadi lebih keren. Secara default input akan menggunakan seluruh lebar yang tersedia di parent tag-nya. Nanti bisa kita akali menggunakan grid system.

Selanjutnya, untuk memberikan keterangan mengenai input ini, biasanya kita menggunakan tag label. Kita tambahkan tag label di atas input. Kita tambahkan attribute for yang isinya harus sama dengan nilai attribute id pada tag input. Dalam contoh kita disini input menggunakan id nama, maka label menggunakan for nama. Berhubung kita menggunakan Bootstrap, maka kita menggunakan kelas form-label. Sebagai konten dari label, kita tuliskan Nama.

Kita simpan dan refresh browser. Sekarang di bagian atas input kita sudah ada keterangan Nama. Mengapa harus menggunakan tag Label? Karena apabila kita menggunakan tag label, pada saat kita mengklik ke tulisan Nama, maka browser akan otomatis memberikan fokus ke bagian input nama.

Selanjutnya kita hendak menambahkan input untuk email. Cara gampangnya, kita tinggal copy saja input dan label yang barusan kita buat. Kita paste satu kali di bawahnya. Lalu kita ubah semua kata Nama menjadi Email. Kemudian kita tambahkan attritube type dengan nilai email. Kita simpan dan refresh browser. Sekarang kita sudah memiliki input kedua yang meminta pengunjung untuk memasukkan alamat emailnya.

Lalu kita ingin agar pengunjung bisa mengirimkan pesan. Untuk memasukkan pesan, kita tidak menggunakan tag input, karena kita ingin agar pesan bisa terdiri dari banyak karakter dan banyak baris. Oleh karena itu lebih cocok menggunakan tag textarea.

Jadi pertama kita tambahkan dahulu tag label-nya. Kita berikan attritube for=”pesan”. Lalu class=”form-label”. Kontennya Pesan. Lalu kita tambahkan tag textarea, dengan class=”form-control”. Kita tambahkan id=”pesan”. Berbeda dengan tag input, untuk tag textarea kita harus memberikan tag penutup. Kita lihat hasilnya di browser. Sekarang kita sudah memiliki Nama, Email, dan Pesan. Sebelum melanjutkan ke input berikutnya, ada baiknya kita rapikan terlebih dahulu tampilan dari form kita.

Bila kita merasa formulir ini terlalu lebar, maka kita bisa menggunakan Bootstrap Grid System agar formulir hanya menggunakan sebagian dari layar. Caranya? Seperti biasa, kita tambahkan dahulu div dengan kelas row. Kemudian di dalamnya kita tambahkan lagi div dengan kelas kolom. Sebagai contoh, pada ukuran medium kita hanya menggunakan lebar sebanyak 10 unit, maka kita tambahkan kelas col-md-10. Lalu pada ukuran extra large, kita hanya menggunakan lebar sebanyak 8 unit, maka kita tambahkan kelas col-xl-8. Kita pindahkan seluruh form ke dalam kolom. Kita simpan dan refresh browser. Nah, sekarang ukuran form sudah responsive sesuai dengan pengaturan kolom kita.

Setelah itu kita ingin agar terdapat jarak diantara Nama, Email, dan Pesan. Jadi kita bisa menambahkan sebuah div, dengan kelas mb-3 untuk memberikan jarak di bagian bawah div. Lalu kita pindahkan label dan input nama. Kita ulangi proses ini untuk Email dan Pesan. Dan sekarang formulir hubungi kami sudah kelihatan lebih rapi.

Dan apabila kita ingin agar bagian kotak Pesan menjadi lebih tinggi, maka kita bisa menambahkan attribute rows pada tag Textarea. Sebagai contoh kita isikan dengan nilai 4.

Selanjutnya kita hendak menggunakan radio button untuk membuat bagian Departemen Tujuan. Pertama kita tambahkan dahulu div dengan kelas mb-3. Kemudian di dalamnya kita hendak membuat keterangan Departmen Tujuan. Namun disini kita menggunakan tag div ya, bukan menggunakan tag label. Karena apabila keterangan ini di klik, tidak mengubah fokus browser. Kita tambahkan div dengan kelas form-label. Lalu kita isikan dengan konten Departemen Tujuan.

Untuk setiap radio dan label di dalam form, harus kita bungkus dengan div dengan kelas form-check. Jadi kita buat dahulu div dengan kelas form-check. Lalu di dalamnya kita buat tag input dengan kelas form-check-input. Kita tambahkan lagi attribute type=”radio” name=”tujuan” dan id=”marketing”. Setelah itu barulah kita tambahkan label dengan kelas form-check-label. Kita tambahkan attribute for dengan nilai “marketing”. Dan kita beri konten Marketing.

Kita copy seluruh div form-check dan kita paste satu kali dibawahnya. Kita ubah kata marketing menjadi Support. Nah, sekarang kita sudah memiliki 2 buah radio button. Dimana kita hanya bisa memilih salah satu saja, karena kedua radio memiliki attribute name yang sama. Apabila kita ingin agar secara default radio button Marketing langsung terpilih, maka kita bisa tambahkan attritube checked pada tag input marketing.

Dan apabila kita ingin agar posisi kedua radio button bersebelahan, bukan pisah baris seperti sekarang, maka kita bisa tambahkan lagi kelas form-check-inline pada kedua div parentnya.

Dan pada bagian terakhir kita ingin menambahkan tombol Hubungi Kami. Kita tambahkan tag button dengan kelas btn, btn-primary dan form-control. Lalu kita beri konten Hubungi Kami. Dan kita tambahkan tag penutup button.

Oke, berhubung formulir Hubungi Kami sudah selesai, maka materi pembuatan situs Start Up kita telah selesai sepenuhnya. Bagian wave dan footer sudah pernah kita bahas dalam video sebelumnya, jadi pada materi kali ini sudah langsung saya tambahkan tanpa perlu membahas ulang cara pengerjaannya.

Produk aplikasi Laris Pos disini adalah real buatan kantor tempat saya bekerja dan dapat diunduh dari Google Play Store. Namun situs startup yang kita kerjakan dalam proyek ini adalah replikanya saja, dimana ada beberapa konten yang saya tambahkan sendiri untuk keperluan belajar. Jadi informasi pada situs replika ini tidak bisa dijadikan patokan untuk produk aslinya. Bagi teman-teman yang tertarik untuk mempelajari lebih lanjut mengenai Laris Pos bisa langsung melihat ke situs aslinya di http://www.larispos.com

Bagi teman-teman yang ingin mempelajari lebih lanjut mengenai cara membuat formulir menggunakan Bootstrap, bisa membuka bagian dokumentasi Bootstrap di http://www.getbootstrap.com. Lalu kita bisa memilih navigasi Docs. Dan kita pilih lagi bagian Forms. Disini masih ada beberapa materi yang belum sempat kita bahas seperti cara menggunakan Select, Range, Input Group, Floating Labels, Layout. Dan bahkan kita bisa melakukan validasi menggunakan Bootstrap.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.