Cara Membuat Formulir Order Menuju Whatsapp di Blog

Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial cara membuat formulir order menuju whatsapp dengan mudah.

Pasti kalian yang suka belanja online pernah berjumpa dengan form order seperti ini, biasanya pernah di jumpai pada website jual beli, toko online, maupun landing page tapi jika kalian memiliki blog yang berisi artikel tapi sambil jualan juga kalian bisa menggunakan form order whatsapp ini, mungkin form order menuju whatsapp ini sangat membantu kalian.

Form order ini sangat cocok buat kalian yang ingin berjualan produk digital seperti menjual source code maupun produk digital lainnya dan bisa juga untuk menjual produk fisik seperti sepatu, tas dll.

Script yang bagikan ini bersifat open source supaya bisa dikembangkan lagi oleh kalian, dengan begitu kalian bisa mngedit script ini menjadi formulir pendaftaran ataupun yang lainnya sesuai kebutuhan kalian.

Untuk demonya kalian bisa klik tombol demo di bawah ini

Demo

Buat kalian yang ingin menggunakan formulir order menuju whatsapp ini bisa kalian simak caranya di bawah ini.

---

Cara Membuat Formulir Order Menuju Whatsapp di Blog

• Sebelum ke tutorial pastikan template kalian sudah terpasang jQuery, jika belom silahkan salin kode di bawah ini dan letakan di atas kode </head> atau &lt;!--</head>--&gt;&lt;/head&gt;

<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

• Selanjutnya kalian bisa salin kode di bawah ini dan letakan di atas kode ]]></b:skin>

/* Formulir whatsapp by telatngoding.com */
.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}

• Salin kode dibawah ini dan letakan di atas kode <footer> atau bebas di mana saja yang penting masih di dalam tag <body>, suapay terlihat rapih saya sarankan letakan di atas <footer> saja

<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>

• Salin kode html di bawah ini dan letakan di bawah kode <data:post.body/>, jika template kalian mempunyai kode <data:post.body/> lebih dari satu silahkan coba satu persatu cari yang work, kode ini berfungsi untuk memanggil judul dari postingan dan jika salah penempatan maka judul postingan akan gagal terpanggil.

<div id='nama_produk'><data:post.title/></div>

• Terakhir silahkan salin dan tempel kode di bawah ini ke atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script>
//<![CDATA[
// Formulir whatsapp by telatngoding.com
// 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>

Rubah yang saya tandai warnai kuning dengan keperluan kalian.

• Simpan tema kalian.
• Salin kode html di bawah ini dan letakan pada halaman atau postingan produk kalian lalu simpan atau perbaharui.

<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>

Seperti itulah Cara Membuat Formulir Order Menuju Whatsapp di Blog jika masih bingung silahkan chat admin atau berkomentar pada kolom komentar yang sudah di sediakan, salam blogger dan semoga bermanfaat.

Baca juga :

Go to Link