Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <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>Form Log In</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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>
</head>
<style>
.login {
  min-height: 100vh;
}

.bg-image {
  background-image: url('Group 10.png');
  background-size: cover;
  background-position: center;
}

.login-heading {
  font-weight: 300;
}

.btn-login {
  font-size: 0.9rem;
  letter-spacing: 0.05rem;
  padding: 0.75rem 1rem;
}

</style>
<body>
    <div class="container-fluid ps-md-0">
        <div class="row g-0">
          <div class="d-none d-md-flex col-md-4 col-lg-7 bg-image"></div>
          <div class="col-md-8 col-lg-5">
            <div class="login d-flex align-items-center py-5">
              <div class="container">
                <div class="row">
                  <div class="col-md-9 col-lg-8 mx-auto">
                    <h3 class="login-heading mb-4">Leave us a message!</h3>

                    <!-- contact -->
                    <form name="formPendaftaran" action="" onsubmit="return validateForm()" id="myForm">
                        <div class="form-floating mb-3">
                            <input type="name" name="nama" class="form-control" id="floatingInput" placeholder="nama">
                            <label for="floatingInput">Name</label>
                          </div>
                      <div class="form-floating mb-3">
                        <input type="email" name="email" class="form-control" id="floatingInput" placeholder="[email protected]">
                        <label for="floatingInput">Email address</label>
                      </div>
                      <div class="form-floating mb-3">
                        <input type="phone" name="phone" class="form-control" id="floatingInput" placeholder="phone">
                        <label for="floatingInput">Phone Number</label>
                      </div>
                      <div class="form-floating mb-3">
                        <textarea class="form-control" name="komen" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
                        <label for="floatingTextarea2">Comments</label>
                      </div>
                      <div class="d-grid">
                        <button class="btn btn-lg btn-primary btn-login text-uppercase fw-bold mb-2" type="submit">Submit</button>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <script>
        function validateForm() {
            if (document.forms["formPendaftaran"]["nama"].value == "") {
                alert("Fill name!");
                document.forms["formPendaftaran"]["nama"].focus();
                return false;
            }
            if (document.forms["formPendaftaran"]["email"].value == "") {
                alert("Fill email!");
                document.forms["formPendaftaran"]["email"].focus();
                return false;
            }
            if (document.forms["formPendaftaran"]["phone"].value == "") {
                alert("Fill password!");
                document.forms["formPendaftaran"]["phone"].focus();
                return false;
            }
            if (document.forms["formPendaftaran"]["komen"].value == "") {
                alert("Fill password!");
                document.forms["formPendaftaran"]["komen"].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>
</body>
</html>