Form Checkout Rasa WA

Noob

New member
pemula
Sesuai dengan judul, script ini berfungsi biar nanti si cabuy klo mau beli produk , dia harus isi form dulu,
nah, nanti klo udah isi form trus klik tombol "konfirmasi Pesanan"

si script ini akan otomatis redirect si cabuy ke whatsapp dengan data yang sudah di isi
tampilan form nya seperti ini : https://prnt.sc/vw7dvq

Jadi alurnya sih : cabuy liat LP ->klik tombol mau pesan -> diarahkan ke script ini

udah gitu doang sih .... simple kan yah

eh lupa scriptnya belum diketik wkwkwkww

script :
HTML:
<!doctype html>
<html lang="en">
<head>
 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap core CSS -->
  <link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
 </head>
 
<body class="bg-light">
 
  <div class="container">
    <div class="text-center">
      <h5>Order Nama Product</h5>
      <img class="d-block mx-auto mb-4" src="../jualan/gbr/produk.jpg" alt="" width="200" height="200">
      <p class="mb-1">benefit produk disini</p>
    </div>
    
    <div class="col-md-8 order-md-1">
      <hr class="mb-4">
      <h4 class="mb-3">Detail Penerima:</h4>
      <form class="needs-validation" novalidate>
        <div class="row">
          <div class="col-md-6 mb-3">
            <label for="nama">Nama:</label>
            <input type="text" class="form-control" id="nama" placeholder="Nama anda disini" value="" required>
            <div class="invalid-feedback">
            Silahkan masukkan nama anda.
            </div>
          </div>       
          <div class="col-md-6 mb-3">
            <label for="hp">No HP/WA :</label>
            <input type="text" class="form-control" id="hp" placeholder="085xxxxxx" value="" pattern="[0-9]+" required>
            <div class="invalid-feedback">
            Silahkan masukkan no hp anda
            </div>
          </div>
        </div>
        <div class="mb-3">
          <label for="alamat">Alamat Lengkap :</label>
          <textarea class="form-control" id="alamat" rows="3" placeholder="Masukkan alamat anda disini" required></textarea>
          <div class="invalid-feedback">
          Silahkan masukkan alamat anda.
          </div>
        </div>
        <hr class="mb-4">
        <button class="btn btn-primary btn-lg btn-block" type="submit" id="btn-wa">Konfirmasi Pesanan</button>
      </form>

      <div class="py-5 text-center">
      <p class="mb-1">Anda akan terhubung dengan CS kami via Whatsapp secara otomatis setelah klik tombol diatas</p>
      </div>
    </div>
  </div>

  <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
  <script>
      const form = document.querySelector('form');

      form.addEventListener('submit', function(event) {
       event.preventDefault();

       if (form.checkValidity() === false) {

         form.classList.add('was-validated');
       } else {
          var nama_cabuy = document.getElementById('nama').value;
          var hp_cabuy = document.getElementById('hp').value;
          var alamat_cabuy = document.getElementById('alamat').value;
          //alert(nama_cabuy);
          //silahkan ganti text whatsapp dibawah ini

         location.replace("https://api.whatsapp.com/send?phone=62822222222222&text=Halo%20kak%2C%20Saya%20tertarik%20dengan%20produk%20itu%0D%0A%0D%0ASaya%20sudah%20melakukan%20order%2C%20mohon%20diproses%20yah%0D%0A%2ABerikut%20detailnya%20%0D%0APenerima%20%0D%0ANama%20%3A%20"+nama_cabuy+"%0D%0AHP%20%3A%20"+hp_cabuy+"%0D%0AAlamat%20%3A%20"+alamat_cabuy+"%2A%0D%0A%0D%0ATerima%20kasih");
       }
      }, false);
  </script> 
</body>
</html>
jadi nanti tinggal diedit sesuai keperluan aja yah.
yang perlu di edit sih no HP tujuan
yang ada di bagian script paling bawah..

dicari aja yah yang ada no : 62822222222222 ( ini diganti dengan no CS).

semoga bermanfaat .
 

Marmut

Member
pemula
Data pengisian form, misal nggk jadi kekirim ke cs udah masuk list database belum om? Nice share cendol dawet seger
 

Noob

New member
pemula
Data pengisian form, misal nggk jadi kekirim ke cs udah masuk list database belum om? Nice share cendol dawet seger
belum om, soalnya bikin yang simple doang, takut nanti klo kebanyakan setting , yang mau pake malah ribet.
 

babarafi123

New member
pemula
Sesuai dengan judul, script ini berfungsi biar nanti si cabuy klo mau beli produk , dia harus isi form dulu,
nah, nanti klo udah isi form trus klik tombol "konfirmasi Pesanan"

si script ini akan otomatis redirect si cabuy ke whatsapp dengan data yang sudah di isi
tampilan form nya seperti ini : https://prnt.sc/vw7dvq

Jadi alurnya sih : cabuy liat LP ->klik tombol mau pesan -> diarahkan ke script ini

udah gitu doang sih .... simple kan yah

eh lupa scriptnya belum diketik wkwkwkww

script :
HTML:
<!doctype html>
<html lang="en">
<head>
 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap core CSS -->
  <link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
 </head>
 
<body class="bg-light">
 
  <div class="container">
    <div class="text-center">
      <h5>Order Nama Product</h5>
      <img class="d-block mx-auto mb-4" src="../jualan/gbr/produk.jpg" alt="" width="200" height="200">
      <p class="mb-1">benefit produk disini</p>
    </div>
    
    <div class="col-md-8 order-md-1">
      <hr class="mb-4">
      <h4 class="mb-3">Detail Penerima:</h4>
      <form class="needs-validation" novalidate>
        <div class="row">
          <div class="col-md-6 mb-3">
            <label for="nama">Nama:</label>
            <input type="text" class="form-control" id="nama" placeholder="Nama anda disini" value="" required>
            <div class="invalid-feedback">
            Silahkan masukkan nama anda.
            </div>
          </div>       
          <div class="col-md-6 mb-3">
            <label for="hp">No HP/WA :</label>
            <input type="text" class="form-control" id="hp" placeholder="085xxxxxx" value="" pattern="[0-9]+" required>
            <div class="invalid-feedback">
            Silahkan masukkan no hp anda
            </div>
          </div>
        </div>
        <div class="mb-3">
          <label for="alamat">Alamat Lengkap :</label>
          <textarea class="form-control" id="alamat" rows="3" placeholder="Masukkan alamat anda disini" required></textarea>
          <div class="invalid-feedback">
          Silahkan masukkan alamat anda.
          </div>
        </div>
        <hr class="mb-4">
        <button class="btn btn-primary btn-lg btn-block" type="submit" id="btn-wa">Konfirmasi Pesanan</button>
      </form>

      <div class="py-5 text-center">
      <p class="mb-1">Anda akan terhubung dengan CS kami via Whatsapp secara otomatis setelah klik tombol diatas</p>
      </div>
    </div>
  </div>

  <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
  <script>
      const form = document.querySelector('form');

      form.addEventListener('submit', function(event) {
       event.preventDefault();

       if (form.checkValidity() === false) {

         form.classList.add('was-validated');
       } else {
          var nama_cabuy = document.getElementById('nama').value;
          var hp_cabuy = document.getElementById('hp').value;
          var alamat_cabuy = document.getElementById('alamat').value;
          //alert(nama_cabuy);
          //silahkan ganti text whatsapp dibawah ini

         location.replace("https://api.whatsapp.com/send?phone=62822222222222&text=Halo%20kak%2C%20Saya%20tertarik%20dengan%20produk%20itu%0D%0A%0D%0ASaya%20sudah%20melakukan%20order%2C%20mohon%20diproses%20yah%0D%0A%2ABerikut%20detailnya%20%0D%0APenerima%20%0D%0ANama%20%3A%20"+nama_cabuy+"%0D%0AHP%20%3A%20"+hp_cabuy+"%0D%0AAlamat%20%3A%20"+alamat_cabuy+"%2A%0D%0A%0D%0ATerima%20kasih");
       }
      }, false);
  </script> 
</body>
</html>
jadi nanti tinggal diedit sesuai keperluan aja yah.
yang perlu di edit sih no HP tujuan
yang ada di bagian script paling bawah..

dicari aja yah yang ada no : 62822222222222 ( ini diganti dengan no CS).

semoga bermanfaat .
halo gan , kalo buat diberdu gimana caranya ya ?
 
Top