Cara Membuat Formulir Pemesanan Checkout Ke WhatsApp

Saat ini, kita menemukan banyak toko online atau e-commerce yang menawarkan pesanan atau fungsi pesanan yang langsung ke nomor WhatsApp. Hal ini memudahkan pelanggan untuk langsung membeli atau bertanya kepada penjual melalu aplikasi WhatsApp.
Dalam tutorial kali ini, kita akan membuat formulir checkout via WhatsApp yang nantinya akan langsung mengirimkan pesan kepada anda, pembeli ke penjual, lihat demo.

Untuk lebih jelasnya silahkan ikuti langkah demi langkah di bawah ini.

1). Tambahkan HTML

<div class="container">
  <div class="col-lg-6 col-lg-offset-3">
    <h4>Cara Membuat Formulir Pemesanan Checkout Ke WhatsApp</h4>
      <div class="panel panel-success">
        <div class="panel-heading">Checkout Ke WhatsApp</div>
          <div class="panel-body">
            <div class="form-group">
              <label>Nama</label>
<input type="text" name="name" class="form-control" placeholder="Nama" id="name"></div>
               <div class="form-group">
               <label>Email</label>
<input type="email" name="email" class="form-control" placeholder="Email" id="email"></div>
               <div class="form-group">
               <label>Nomor Kontak / WhatsApp</label>
<input type="text" name="phone" class="form-control" placeholder="Nomor Kontak / WhatsApp" id="phone"></div>
               <div class="form-group">
               <label>Pilih Produk</label>
               <select name="product" class="form-control" id="product">
                 <option value="">-- Pilih Produk --</option>
                 <option value="produk_1">Produk 1</option>
                 <option value="produk_2">Produk 2</option>
                 <option value="produk_3">Produk 3</option>
               </select>
               </div>
               <div class="form-group">
               <label>Catatan</label>
<textarea name="description" class="form-control" rows="3" id="description"></textarea></div>
               <div class="form-group">
               <button class="btn btn-success send">Pesan via WhatsApp</button>
          </div>
                  <div id="text-info"></div>
      </div>
    </div>
  </div>
</div>

2). Tambahkan CDN

CSS bootstrap 3.4.1

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

minimal versi jquery-1.12.4.min.js

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

JavaScript bootstrap 3.4.1

<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

3). Tambahkan CSS

.panel-heading-whatsaap {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.form-control-whatsaap {
    display: block;
    width: 100%;
    height: auto;
    margin:10px 0;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.pesan-valid {
  color: #ff0000;
  font-family: sans-serif;
  font-style: italic;
  font-size: 13px;
}
.whatsaap-success {
   cursor: pointer;
   outline: 0;
   color: #fff;
   background-color: #5cb85c;
   border-color: #4cae4c;
   display: inline-block;
   font-weight: 400;
   line-height: 1.5;
   text-align: center;
   border: 1px solid transparent;
   padding: 6px 12px;
   font-size: 16px;
   border-radius: .25rem;
   transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.whatsaap-success:hover {
   color: #fff;
   background-color: #4cae4c;
   border-color: #4cae4c;
}
.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.alert {
    padding: 15px;
    margin: 10px 0 0;
    border: 1px solid transparent;
    border-radius: 4px;
}

4). Tambahkan JavaScript

<script>
$(document).on('click','.send', function(){
    /* Inputan Formulir */
    var input_name          = $("#name").val(),
        input_email         = $("#email").val(),
        input_phone         = $("#phone").val(),
        input_product       = $("#product").val(),
        input_description   = $("#description").val();
 
    /* Pengaturan Whatsapp */
    var walink      = 'https://web.whatsapp.com/send',
        phone       = '62812345678910',
        text        = 'Halo saya ingin memesan ',
        text_yes    = 'Pesanan Anda berhasil terkirim.',
        text_no     = 'Isilah formulir terlebih dahulu.';
 
    /* Smartphone Support */
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        var walink = 'whatsapp://send';
    }
 
    if(input_name != "" && input_phone != "" && input_product != ""){
        /* Whatsapp URL */
        var checkout_whatsapp = walink + '?phone=' + phone + '&text=' + text + '%0A%0A' +
            '*Nama* : ' + input_name + '%0A' +
            '*Alamat Email* : ' + input_email + '%0A' +
            '*Nomor Kontak / Whatsapp* : ' + input_phone + '%0A' +
            '*Produk* : ' + input_product + '%0A' +
            '*Catatan* : ' + input_description + '%0A';
 
        /* Whatsapp Window Open */
        window.open(checkout_whatsapp,'_blank');
        document.getElementById("text-info").innerHTML = '<div class="alert alert-success">'+text_yes+'</div>';
    } else {
        document.getElementById("text-info").innerHTML = '<div class="alert alert-danger">'+text_no+'</div>';
    }
});
</script>

Ganti phone = '62812345678910', dengan no WhatsApp kamu, di awali dengan 62 itu kode negara kita ya "indonesia" jika bukan dari indonesia di sesuaikan saja dengan kode negara kalian.

Itulah Cara Membuat Formulir Pemesanan Checkout Ke WhatsApp, Semoga artikel ini mudah di aplikasikan di WordPress maupun Blogger kalian.

Selamat Mencoba.