Untuk memudahkan pelanggan dalam memesan, penggunaan formulir order yang mengarahkan langsung ke WhatsApp pada website menjadi solusi yang efektif. Dalam artikel ini, kita akan menjelajahi apa itu formulir order menuju WhatsApp pada website dan mengapa hal itu dapat meningkatkan pengalaman pelanggan serta keuntungan bagi pemilik bisnis.
1. Apa itu formulir order menuju WhatsApp pada website?
Formulir order menuju WhatsApp pada website adalah alat yang memungkinkan pelanggan untuk mengisi informasi pemesanan melalui formulir online yang terintegrasi dengan WhatsApp. Setelah pelanggan mengisi formulir dan mengklik tombol "Kirim", mereka akan langsung diarahkan ke aplikasi WhatsApp untuk melanjutkan komunikasi dengan pemilik bisnis. Dengan formulir ini, pelanggan tidak perlu lagi menyalin dan menempelkan informasi pesanan mereka secara manual di aplikasi pesan, sehingga mempercepat proses pemesanan.
2. Bagaimana formulir order menuju WhatsApp berfungsi?
Formulir order menuju WhatsApp biasanya terletak pada halaman produk atau layanan di website bisnis. Pelanggan akan melihat formulir yang meminta informasi seperti nama, alamat pengiriman, jumlah produk yang dipesan, dan pertanyaan khusus lainnya yang relevan dengan pesanan. Setelah mengisi formulir, pelanggan cukup mengklik tombol "Kirim" atau "Pesan Sekarang", dan mereka akan langsung diarahkan ke WhatsApp dengan pesan yang sudah terisi dengan informasi pesanan mereka. Mereka hanya perlu menekan tombol "Kirim" pada WhatsApp untuk mengirimkan pesanan tersebut kepada pemilik bisnis.
3. Keuntungan menggunakan formulir order menuju WhatsApp pada website:
a. Kemudahan dan kenyamanan: Dengan formulir order yang terintegrasi dengan WhatsApp, pelanggan dapat dengan mudah mengisi informasi pesanan mereka dan mengirimkannya hanya dengan beberapa klik. Ini menghemat waktu dan usaha pelanggan, serta memberikan pengalaman yang nyaman dalam berbelanja online.
b. Reduksi kesalahan: Dalam proses pemesanan manual, kesalahan penyalinan dan penempelan informasi pesanan bisa terjadi. Dengan formulir order menuju WhatsApp, peluang kesalahan manusia dapat dikurangi secara signifikan, karena informasi pesanan langsung terisi secara otomatis.
c. Komunikasi langsung: Dengan formulir order yang mengarahkan ke WhatsApp, komunikasi antara pelanggan dan pemilik bisnis menjadi lebih mudah dan cepat. Pelanggan dapat mengajukan pertanyaan atau mengklarifikasi detail pesanan langsung melalui aplikasi pesan.
d. Pelacakan pesanan: Setelah pesanan dikirimkan melalui WhatsApp, pelanggan dapat melacak pesanan mereka dengan mudah melalui percakapan yang ada di dalam aplikasi. Ini memberikan kejelasan dan membangun kepercayaan antara pelanggan dan pemilik bisnis.
Cara Membuat Formulir Order Menuju Ke Whatsapp Di Blogger:
1. Pastikan template Anda sudah dipasang jQuery, tapi jika belum Anda dapat menyalin kode di bawah ini dan pasang di atas kode </head>.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
2. Salin kode CSS di bawah ini dan tempatkan di atas kode ]]></b:skin> atau </style>.
/* Formulir whatsapp by wendy code */ .wendy-form-wa{position:fixed;display:none;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.69);z-index:999}.form-container{width:calc(100% - 20px);max-width:500px;background:#fff;box-shadow:0 10px 35px 2px rgba(61,61,61,.3);padding:30px;box-sizing:border-box;border-radius:10px;margin:2% auto;overflow:hidden}.wendy-form-wa.aktif{display:block} .wendy-form-header{background:linear-gradient(to right, #f08900,#ffd91a);color:#fff;font-weight:700;padding:15px 20px;border-radius:10px;margin:0 0 30px} span.input-title{border-left:4px solid #f08900;padding:0 15px;font-size:.9rem;display:block}.wendy-form-wa #your-data{display:grid;grid-template-columns:49% 49%;grid-gap:10px;margin:10px 0 20px} .wendy-form-header a.form-close svg{fill:#fff;width:35px;height:35px;margin-top:-5px;float:right} a.wendy-btn-wa.send_form{background:linear-gradient(to right, #f08900,#ffd91a);color:#fff;font-size:15px;font-weight:bold;text-align:center;text-decoration:none;padding:10px 10px 10px 25px;width:100px;margin:15px 50px 0 0;float:left;border-radius:5px;} .wendy-btn-wa{background:linear-gradient(to right, #f08900,#ffd91a);font-size:15px;font-weight:700;color: #fff;display:inline-flex;align-items:center;margin:15px 15px 15px 0;padding:15px 25px;border-radius:7px;margin:15px;text-decoration:none;left:50%!important} .wendy-btn-wa:hover{opacity:.8;color:#fff} .wendy-btn-wa svg{fill:#fff;width:22px;height:22px;vertical-align:-5px;margin-right:10px} .wendy-input-field{position:relative;margin:15px 0 0} .wendy-input-field input,.wendy-input-field textarea{font-size:15px;padding:12px 0 12px 12px;display:block;width:94%;border:1px solid #ddd;border-radius:5px}.wendy-input-field input:focus,.wendy-input-field textarea:focus{outline:none} .wendy-input-field label{color:#999;border-radius:20px;font-size:14px;font-weight:500;position:absolute;pointer-events:none;left:15px;top:15px;transition:.2s ease all}.wendy-input-field input:focus~label,.wendy-input-field input:valid~label,.wendy-input-field textarea:focus~label,.wendy-input-field textarea:valid~label{top:0;font-size:14px;color:#f08900;background:#fff;padding:1px 7px;margin:10px 0 0 -5px} .wendy-input-field input:focus~label,.wendy-input-field input:valid~label,.wendy-input-field textarea:focus~label,.wendy-input-field textarea:valid~label{top:-20px!important;font-size:13px;color:#f08900;font-weight:700}.wendy-input-field textarea{width:96.5%}.wendy-input-field select{background:#fff;padding:12px 15px;border-radius:5px;margin:0 0 5px 0;border:1px solid #ccc;outline:none;width:100%;max-width:100%;font-size:14px;cursor:pointer} .wendy-input-field .wendy-validasi{position:absolute;z-index:2;top:calc(100% + 20px);left:0;background:#ffd91a;color:rgba(0,0,0,.6);padding:5px 10px;border-radius:3px;font-size:80%;box-shadow:0 5px 10px rgba(0,0,0,.08);transition:.4s;visibility:hidden;opacity:0;display:inline-block!important} .wendy-input-field .wendy-validasi.show{visibility:visible;opacity:1;top:calc(100% + 10px)} .wendy-input-field .wendy-validasi:after{position:absolute;bottom:100%;left:12px;content:'';border:8px solid;border-color:transparent transparent #ffd91a transparent} #nama_produk{display:none}
3. Lanjut salin kode di bawah ini lalu letakkan di bawah kode <body>.
<div class='wendy-form-wa'> <div class='form-container'> <div class='wendy-form-header'><span class='form-title'>Checkout Form Whatsapp</span><a class='form-close' href='javascript:void' title='Close'><svg viewBox='0 0 24 24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z'/></svg></a></div> <span class='input-title'>Data Anda</span> <div id='your-data'> <div class='wendy-input-field'><input class='validate' id='wa_nama' name='nama' type='text'/><label>Nama Anda</label></div> <div class='wendy-input-field'><input class='validate' id='wa_email' name='email' type='text'/><label>Email</label></div> <div class='wendy-input-field'><input class='validate' id='wa_blog' name='nama blog' type='text'/><label>Nama Blog</label></div> <div class='wendy-input-field'><input class='validate' id='wa_url' name='url blog' type='text'/><label>URL Blog</label></div> </div> <span class='input-title'>Data Lainnya</span> <div class='wendy-input-field'><select class='validate' id='wa_lisensi' name='lisensi'> <option hidden='hidden' selected='selected' value='default'>Pilih Lisensi</option> <option value='1'>Paket Personal</option> <option value='2'>Paket Reseller</option> </select></div> <div class='wendy-input-field'><select class='validate' id='wa_pembayaran' name='pembayaran'> <option hidden='hidden' selected='selected' value='default'>Pembayaran</option> <option value='1'>Mandiri</option> <option value='2'>Gopay</option> <option value='3'>OVO</option> <option value='4'>QRIS Lainnya</option> <option value='5'>Paypal</option> </select></div> <a class='wendy-btn-wa send_form' href='javascript:;' title='Kirim Informasi Produk' type='submit'>KIRIM</a></div></div>
4. Cari kode <data:post.body/> karena biasanya lebih dari satu, cobalah satu persatu kode hingga kodenya benar setelah memasang kode di bawah ini.
<div id='nama_produk'><data:post.title/></div>
5. Pada tahap terakhir silahkan cari kode </body> atau <!--</body>--></body> lalu letakkan kode di bawah ini di atasnya.
<script> //<![CDATA[ // Formulir whatsapp by wendy code // Tombol Buka Tutup $(".form-close").click(function(){ $(".wendy-form-wa").fadeOut("fast")} );$(".show-form").click(function(){ $(".wendy-form-wa").fadeIn("slow")}); // validasi Untuk Kolom Wajib Isi $('.wendy-input-field .validate').each(function() { title = $(this).attr('name'); label = $(this).parents('.wendy-input-field'); $('<span class="wendy-validasi"><b>' + title + '</b> diperlukan</span>').appendTo(label); }); $(document).on('keyup', '.wendy-input-field .validate', function() { if ($(this).val() != '') { $(this).removeClass('focus'); $(this).parents('.wendy-input-field').find('.wendy-validasi').removeClass('show'); } }); $(document).on('change', '.wendy-input-field select', function() { $(this).removeClass('focus'); $(this).parents('.wendy-input-field').find('.wendy-validasi').removeClass('show'); }); $('.send_form').click(whatsappchat); function whatsappchat() { if ($('#wa_nama').val() == '') { // validasi Nama Lengkap $('#wa_nama').each(function() { $(this).addClass('focus'); $(this).parents('.wendy-input-field').find('.wendy-validasi').addClass('show'); }); $('#wa_nama').focus(); return false; } else if ($('#wa_email').val() == '') { // validasi Alamat Email $('#wa_email').each(function() { $(this).addClass('focus'); $(this).parents('.wendy-input-field').find('.wendy-validasi').addClass('show'); }); $('#wa_email').focus(); return false; } else if ($('#wa_blog').val() == '') { // validasi Nama Blog $('#wa_blog').each(function() { $(this).addClass('focus'); $(this).parents('.wendy-input-field').find('.wendy-validasi').addClass('show'); }); $('#wa_blog').focus(); return false; } else if ($('#wa_url').val() == '') { // wendy-validasi Url Blog $('#wa_url').each(function() { $(this).addClass('focus'); $(this).parents('.wendy-input-field').find('.wendy-validasi').addClass('show'); }); $('#wa_url').focus(); return false; } else if ($('#wa_lisensi').val() == 'default') { // validasi Lisensi $('#wa_lisensi').each(function() { $(this).addClass('focus'); $(this).parents('.wendy-input-field').find('.wendy-validasi').addClass('show'); }); $('#wa_lisensi').focus(); return false; } else if ($('#wa_pembayaran').val() == 'default') { // validasi Pembayaran $('#wa_pembayaran').each(function() { $(this).addClass('focus'); $(this).parents('.wendy-input-field').find('.wendy-validasi').addClass('show'); }); $('#wa_pembayaran').focus(); return false; } else { /* Pengaturan Whatsapp */ var walink = 'https://web.whatsapp.com/send', phone = '6281312345678', // No Whatsapp Kalian walink2 = 'Halo saya ingin membeli template anda dengan keterangan berikut:'; // Pesan Pembuka /* Dukungan Smartphone */ if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { var walink = 'whatsapp://send'; } /* Formulir Input Panggilan */ var input_nama = $("#wa_nama").val(), input_email = $("#wa_email").val(), input_namaBlog = $("#wa_blog").val(), input_urlBlog = $("#wa_url").val(), input_lisensi = $("#wa_lisensi :selected").text(), input_pembayaran = $("#wa_pembayaran :selected").text(), input_namaproduk = $("#nama_produk").text(), input_viaUrl = location.href; /* URL Final Whatsapp */ var wendy_whatsapp = walink + '?phone=' + phone + '&text=' + walink2 + '%0A%0A' + '*DATA SAYA* %0A' + '=============================%0A' + '*Nama* : ' + input_nama + '%0A' + '*Email* : ' + input_email + '%0A' + '*Nama Blog* : ' + input_namaBlog + '%0A' + '*Url Blog* : ' + input_urlBlog + '%0A' + '*Metode Pembayaran* : ' + input_pembayaran + '%0A' + '=============================%0A' + '%0A' + '*DAFTAR BELANJAAN* %0A' + '=============================%0A' + '*Nama Template* : ' + input_namaproduk + '%0A' + '*Jenis Lisensi* : ' + input_lisensi + '%0A' + '*Link Template* : ' + input_viaUrl + '%0A' + '=============================%0A'; /* Buka Jendela Whatsapp */ window.open(wendy_whatsapp,'_blank'); window.location.href = input_viaUrl; return false; } }; //]]> </script>
Silahkan edit phone dengan nomor whatsapp Anda dan walink2 sebagai kata pembuka.
6. Silahkan buat postingan baru dan ubah menjadi mode html untuk menempatkan kode di bawah ini sebagai jalur tombol mengisi formulir menuju ke whatsapp.
<div style='text-align:center'> <a class="wendy-btn-wa show-form" href="javascript:void" title="Beli Sekarang"><svg viewBox='0 0 24 24'><path d='M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z'/><line x1='12' x2='12' y1='2' y2='16'/></svg>Beli Sekarang</a></div>
Kesimpulan:
Cara ini adalah hal yang sangat berguna bagi para pembisnis yang bergerak pada bidang digital namun masih menggunakan plartform blogger, beserta dapat membantu pembeli dalam mengisi formulir yang akan di tuju dengan sangat teliti agar penjual tidak bingung juga.
