Membuat Formulir Order dengan HTML dan CSS
Langkah pertama mari kita buat formulir ordernya terlebih dahulu menggunakan tag HTML. Kode selengkapnya seperti berikut ini.
<!DOCTYPE html><html> <head> <title>Membuat Formulir Order Checkout Ke Pesan WhatsApp</title> <link rel="stylesheet" type="text/css" href="<a class="vglnk" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="nofollow"><span>https</span><span>://</span><span>stackpath</span><span>.</span><span>bootstrapcdn</span><span>.</span><span>com</span><span>/</span><span>bootstrap</span><span>/</span><span>3</span><span>.</span><span>4</span><span>.</span><span>1</span><span>/</span><span>css</span><span>/</span><span>bootstrap</span><span>.</span><span>min</span><span>.</span><span>css</span></a>"> <script type="text/javascript" src="<a class="vglnk" href="https://code.jquery.com/jquery-1.12.4.min.js" rel="nofollow"><span>https</span><span>://</span><span>code</span><span>.</span><span>jquery</span><span>.</span><span>com</span><span>/</span><span>jquery</span><span>-</span><span>1</span><span>.</span><span>12</span><span>.</span><span>4</span><span>.</span><span>min</span><span>.</span><span>js</span></a>"></script> <script type="text/javascript" src="<a class="vglnk" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" rel="nofollow"><span>https</span><span>://</span><span>stackpath</span><span>.</span><span>bootstrapcdn</span><span>.</span><span>com</span><span>/</span><span>bootstrap</span><span>/</span><span>3</span><span>.</span><span>4</span><span>.</span><span>1</span><span>/</span><span>js</span><span>/</span><span>bootstrap</span><span>.</span><span>min</span><span>.</span><span>js</span></a>"></script> </head><body> <div class="container"> <div class="col-lg-6 col-lg-offset-3"> <h4>Membuat Formulir Order Checkout Ke Pesan 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></body></html> |
Untuk tampilan formulir diatas kita menggunakan bantuan CSS framework Bootstrap. Berikut hasil tampilan formulir ordernya :
Menambah Kode Kirim Ke WhatsApp
Selanjutnya mari kita tambahkan kode untuk mengirim isian formulir order atau checkout ke aplikasi WhatsApp.
$(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 = '<a class="vglnk" href="https://web.whatsapp.com/send" rel="nofollow"><span>https</span><span>://</span><span>web</span><span>.</span><span>whatsapp</span><span>.</span><span>com</span><span>/</span><span>send</span></a>', phone = '6281360417510', 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>'; }}); |
Nah, sekarang silakan coba gunakan formulir order diatas. Apabila berhasil, secara otomatis isian formulir akan dikirim ke nomor WhatsApp yang diinginkan. Silakan ganti nomor whatsapp dan pengaturan pesan pada bagian /* Pengaturan WhatsApp */ seperti kode diatas.
Kode diatas juga dapat mendeteksi perangkat apa yang digunakan oleh user. Bila user menggunakan perangkat desktop seperti laptop dan komputer maka saat checkout secara otomatis akan membuat aplikasi whatsapp web. Namun bila user menggunakan perangkat mobile seperti Android ataupun iPhone maka secara otomatis akan membuka aplikasi whatsapp mobile.
Kesimpulan
Demikian tutorial membuat formulir order dan checkout ke WhatsApp. Bila diperhatikan cukup mudah dan sederhana. Anda dapat mengembangkan kode diatas lebih lanjut sesuai kebutuhan baik untuk aplikasi berbasis PHP, CMS WordPress ataupun Blogger.
Selamat mencoba dan semoga bermanfaat.
Social Plugin