Tugas 6: Membuat Form Login dan Contact dengan Bootstrap

Nama: Dyandra Paramitha Widyadhana

NRP: 05111940000119

Kelas: PWEB-B

Link Website:

1. Sign In Form: https://dydyandra.github.io/bootstrap-forms/

2. Contact Form: https://dydyandra.github.io/bootstrap-forms/contact.html

Link Source Code: https://github.com/dydyandra/bootstrap-forms

Introduction

Pada penugasan ke-6, kami diminta untuk membuat form login dan contact dengan menggunakan Bootstrap.

Isi dari Form

Komponen yang digunakan pada form adalah card yang berisi form dan button. Adapun isi dari form yaitu:

1. Form Login

Form login berisi input username, password, dan button. Selain itu terdapat button untuk login menggunakan website lain seperti Google, Facebook atau SSO.

2. Form Contact

Form contact berisi input nama depan, nama belakang, email, keperluan dan pesan. Terdapat juga button untuk mengirimkan pesan tersebut.

Tools Yang Digunakan:

Untuk membuat, saya menggunakan HTML, CSS dan JS.

HTML sebagai markup language digunakan untuk membuat struktur dan konten dari form login dan contact. HTML yang saya gunakan yaitu HTML:5.

CSS digunakan untuk menentukan layout, style, serta keselarasan halaman website. Pada tugas kali ini, saya menggunakan Bootstrap sebagai salah satu framework yang dapat digunakan, dan juga terdapat internal CSS untuk menambahkan beberapa style pada komponen.

JS untuk menambahkan validasi input form, dan untuk menambahkan modal yang akan muncul apabila form sudah disubmit.

Untuk men-deploy, saya menggunakan Github Pages.

Gambar Form:

Source Code:

<!DOCTYPE html>
<html lang="en">
    <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>Login Page</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script src="https://use.fontawesome.com/6f05757a67.js"></script>
        background-image: linear-gradient(120deg, #75a3ee 0%, #c2e9fb 100%);
        color: white;
    label {
        font-weight: 600;
        width: 95%;
        text-align: center;
        border-bottom: 1px solid #000;
        line-height: 0.1em;
        margin: 10px 10px 0px;
    h5 span {
        background: #fff;
        padding: 0 10px;
    .btn-xl {
    padding: 10px 16px;
    font-size: 26px;
    line-height: 1.33;
    font-weight: bolder;
<body style="background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);">
    <div class="d-flex min-vh-100 flex-column aligns-items-center justify-content-center">
        <div class="container p-0 card shadow border-0 rounded" style="max-width: 30rem;">
            <div class="card-header bg">
                <h3>Login</h3>
            </div>
            <form name="formPendaftaran" action="" onsubmit="return validateForm()" id="myForm">
                <div class="form-group mt-3 mx-2">
                    <label>Username</label>
                    <input type="text" name="nama" placeholder="Username" class="form-control" required maxlength="10"
                        minlength="3">
                </div>
                <div class="form-group mt-3 mx-2">
                    <label>Password</label>
                    <input type="password" name="password" placeholder="Password" class="form-control" required
                        maxlength="10" minlength="4">
                </div>
                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-primary my-3 mx-2 btn-block " id="myBtn"
                        style="background-color: #94bbe9;">Login</button>
                </div>
            </form>
            <h5><span>or</span></h5>
            <div class="d-flex gap-0 align-items-center my-3">
                <!-- <a href="http://google.com"><i class="fa fa-google fa-2x"></i></a> -->
                <a href="http://google.com" class="btn btn-white  btn-xl mx-auto"><i class="fa fa-google fa-2x"></i>
                <a href="http://google.com" class="btn btn-white  btn-xl mx-1"><i class="fa fa-facebook-square fa-2x"></i>
                <a href="http://google.com" class="btn btn-white  btn-xl mx-auto">SSO
            </div>
        </div>
        <div class="d-flex justify-content-center mt-4">
            <p>Have a question?&nbsp;</p>
            <a href="./contact.html" class="text-reset fw-bold fst-italic">
                Contact Us
            </a>
        </div>
    <script>
        function validateForm() {
            if (document.forms["formPendaftaran"]["nama"].value == "") {
                alert("Fill name!");
                document.forms["formPendaftaran"]["nama"].focus();
                return false;
            if (document.forms["formPendaftaran"]["password"].value == "") {
                alert("Fill password!");
                document.forms["formPendaftaran"]["password"].focus();
                return false;
            swal({
                title: "Data Berhasil Tersimpan",
                text: "Terima kasih telah mengisi form!",
                icon: 'success',
            }).then(okay => {
                if (okay) {
                    window.location.href = "index.html";
            return false;
    </script>

Contact Page:

<!DOCTYPE html>
<html lang="en">
    <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 Form</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://use.fontawesome.com/6f05757a67.js"></script>
        background-image: linear-gradient(120deg, #75a3ee 0%, #c2e9fb 100%);
        color: white;
    label {
        font-weight: 600;
        width: 95%;
        text-align: center;
        border-bottom: 1px solid #000;
        line-height: 0.1em;
        margin: 10px 10px 0px;
    h5 span {
        background: #fff;
        padding: 0 10px;
    .btn-xl {
    padding: 10px 16px;
    font-size: 26px;
    line-height: 1.33;
    font-weight: bolder;
    <div class="d-flex min-vh-100 flex-column aligns-items-center justify-content-center">
        <div class="container p-0 card bg shadow border-0 rounded" style="max-width: 30rem;">
            <div class="card-header">
                <h3>Contact Us</h3>
            </div>
            <form id="contact-form" name="contact-form" onsubmit="return validateForm()">
                <div class="controls mt-2">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mx-3">
                                <label for="form_name">First Name</label>
                                <input id="form_name" type="text" name="name" class="form-control" placeholder="First Name" required="required" data-error="Firstname is required.">
                        <div class="col-md-6">
                            <div class="form-group  mx-3">
                                <label for="form_lastname">Last Name *</label>
                                <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Last Name" required="required" data-error="Lastname is required.">
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group mx-3">
                                <label for="form_email">Email</label>
                                <input id="form_email" type="email" name="email" class="form-control" placeholder="Email so we can contact you!" required="required" data-error="Valid email is required.">
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group  mx-3">
                                <label for="form_need">Please specify your need *</label>
                                <select id="form_need" name="need" class="form-control" required="required" data-error="Please specify your need.">
                                    <option value=""></option>
                                    <option value="Request quotation">Requests</option>
                                    <option value="Request order status">Inquiries</option>
                                    <option value="Request copy of an invoice">Complaints</option>
                                    <option value="Other">Other</option>
                                </select>
                                <div class="help-block with-errors"></div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group  mx-3">
                                <label for="form_message">Message</label>
                                <textarea id="form_message" name="message" class="form-control" placeholder="Tell us what's on your mind!" rows="4" required="required" data-error="Please, leave us a message."></textarea>
                        <div class="col-md-12">
                            <input type="submit" class="btn btn-send my-4 mx-3" style="background-color: white; color: #94bbe9" value="Send message">
                    </div>
                </div>
            </form>
        </div>
    <script>
        function validateForm() {
            if (document.forms["contact-form"]["nama"].value == "") {
                alert("Fill name!");
                document.forms["contact-form"]["nama"].focus();
                return false;
            if (document.forms["contact-form"]["surname"].value == "") {
                alert("Fill surname!");
                document.forms["contact-form"]["surname"].focus();
                return false;
            if (document.forms["contact-form"]["email"].value == "") {
                alert("Fill email!");
                document.forms["contact-form"]["email"].focus();
                return false;
            if (document.forms["contact-form"]["message"].value == "") {
                alert("Fill message!");
                document.forms["contact-form"]["message"].focus();
                return false;
            return false;
    </script>

Link Source Code: https://github.com/dydyandra/bootstrap-forms

Penutup

Bootstrap memiliki banyak manfaat dalam pembuatan web, yaitu fleksibel dikarenakan dapat digunakan berulang kali dan juga desainnya yang responsif sehingga proses membangun website dapat menjadi lebih cepat, mudah, dan efisien. Selain itu, penggunaan bootstrap juga meminimalisir bug, dan juga ukuran file yang lebih kecil.

Dyandra Paramitha's