menambahkan fitur kirim contact form

index.html

@@ -158,20 +158,29 @@ <h2>Contact Me</h2>
  </div>
  <div class="row justify-content-center">
  <div class="col-md-6">
- <form>
+ <div class="alert alert-success alert-dismissible fade show d-none my-alert" role="alert">
+ <strong>Terimakasih!</strong> Pesan anda sudah kami terima.
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+ </div>
+ <form name="wpu-contact-form">
  <div class="mb-3">
  <label for="name" class="form-label">Nama Lengkap</label>
- <input type="text" class="form-control" id="name" aria-describedby="name" />
+ <input type="text" class="form-control" id="name" aria-describedby="name" name="nama" />
  </div>
  <div class="mb-3">
  <label for="email" class="form-label">Email</label>
- <input type="email" class="form-control" id="email" aria-describedby="email" />
+ <input type="email" class="form-control" id="email" aria-describedby="email" name="email" />
  </div>
  <div class="mb-3">
  <label for="pesan" class="form-label">Pesan</label>
- <textarea class="form-control" id="pesan" rows="3"></textarea>
+ <textarea class="form-control" id="pesan" rows="3" name="pesan"></textarea>
  </div>
- <button type="submit" class="btn btn-danger">Kirim</button>
+ <button type="submit" class="btn btn-primary btn-kirim">Kirim</button>
+
+ <button class="btn btn-primary btn-loading d-none" type="button" disabled>
+ <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+ Loading...
+ </button>
  </form>
  </div>
  </div>
@@ -193,5 +202,33 @@ <h2>Contact Me</h2>
  <!-- Akhir Footer -->
 
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
+
+ <script>
+ const scriptURL = 'https://script.google.com/macros/s/AKfycbzjWwvjJihKz3-24SxEnHM5XFjNPgQd_dv3uD_fgjLSp_4AAXsC6IC4C_ECvWyLkGsuBg/exec';
+ const form = document.forms['wpu-contact-form'];
+ const btnKirim = document.querySelector('.btn-kirim');
+ const btnLoading = document.querySelector('.btn-loading');
+ const myAlert = document.querySelector('.my-alert');
+
+ form.addEventListener('submit', (e) => {
+ e.preventDefault();
+ // ketika tombol submit diklik
+ // tampilkan tombol loading, hilangkan tombol kirim
+ btnLoading.classList.toggle('d-none');
+ btnKirim.classList.toggle('d-none');
+ fetch(scriptURL, { method: 'POST', body: new FormData(form) })
+ .then((response) => {
+ // tampilkan tombol kirim, hilangkan tombol loading
+ btnLoading.classList.toggle('d-none');
+ btnKirim.classList.toggle('d-none');
+ // tampilkan alert
+ myAlert.classList.toggle('d-none');
+ // reset formnya
+ form.reset();
+ console.log('Success!', response);
+ })
+ .catch((error) => console.error('Error!', error.message));
+ });
+ </script>
  </body>
 </html>