Cara membuat form order whatsapp otomatis

Masih bersama KAQI-5 penyuplai fashion tactical kekinian, perlengkapan security dan komunitas.

    Kali ini kita akan membahas tentang membuat form order ke WhatsApp, karena kebetulan pasar online di Indonesia ini masih banyak yg sering transaksi menggunakan WhatsApp. Maka, form order dengan menggunakan WhatsApp ini sepertinya lumayan banyak dicari oleh para pebisnis online di Indonesia. Kamu pedagang di web, Facebook dan Instagram,,,,? Tepat banget kamu membaca postingan ini dan menggunakan form order ini.

   Tinggal pasang di web kamu, lalu setiap post di Facebook atau Instagram lampirkan link form order ini. Langsung aja copas scriptnya dibawah ini, cukup copas lalu paste di web kamu. Jangan lupa ubah no hp menggunakan no hp kamu yaaah ( tulisan warna merah)


contoh form WA :
bit.ly/Form_Order_WA

<style>
  <title>Form Order WhatsApp</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    * {
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;
    }
    body,
    html {
      height: 100%;
      font-family: Helvetica, sans-serif;
    }
       -webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
outline:none;
margin:0;
padding:0;
}
.whatsapp-btn {
cursor:pointer;
position:fixed;
bottom:90px;
right:90px;
display:block;
width:90px;
height:90px;
border-radius:90px;
text-indent:-9999px;
background:-webkit-linear-gradient(45deg, #00dbde, #fc00ff) no-repeat center center;
background-size:50% auto;
box-shadow:0 20px 25px rgba(0,0,0,.05);
transition:.2s;
}
.whatsapp-btn:active {
bottom:35px;
}
#whatsapp {
position:fixed;
z-index:+100;
bottom:0px;
right:0px;
display:block;
background:url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTOAVGVWT34Z04TbMZD2tTtRONtxfmaj7K1J4XoP-osT3M0QDjh&usqp=CAU);
box-shadow:0 20px 25px rgba(000);
max-width:-webkit-fill-available;
font-family:Helvetica, sans-serif;
font-size:90%;
border-radius:4px;
visibility:hidden;
opacity:0;
transition:.3s;
}
#whatsapp.toggle {
    font-size: 100%;
    padding: 1px;
    position: relative;
    visibility: initial;
    opacity: unset;
}
@media(max-width:320px) {
.whatsapp-btn {
  bottom:10px;
  right:10px;
}
#whatsapp.toggle {
  bottom:80px;
  right:10px;
  visibility:visible;
  opacity:1;
}
[ Form ]*/
    #contact100-form {
      width: 100%;
    }
    .contact100-form-title {
      display: block;
      font-family: Helvetica, sans-serif;
      font-size: 35px;
      font-weight: 900;
      color: #333333;
      line-height: 1.2;
      text-align: center;
      padding-bottom: 44px;
    }
}
#whatsapp label,
#whatsapp a {
display:block;
margin:15px;
text-decoration:none;
}
#whatsapp input,
#whatsapp textarea {
display:block;
border:1px solid #21811a;
box-shadow:inset 0 2px 5px #ffffff00;
width:95%;
padding:15px;
border-radius:2px;
}
#whatsapp input.nama {
text-transform:capitalize;
}
#whatsapp input:focus,
#whatsapp textarea:focus {
border:1px solid #ddd;
}
#whatsapp textarea {
min-height:80px;
resize: none;
}
#whatsapp a {
cursor:pointer;
display:block;
padding:10px;
font-weight:bold;
text-align:center;
background:#25D366;
color:white;
border-radius:2px;
}
#whatsapp a:hover {
background:#20b558;
            }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br />
<div class="toggle" id="whatsapp">
<br />
<div style="text-align: center;">
<span style="color: #333333; font-family: helvetica, sans-serif; font-size: 15px; font-weight: 900;">UKARI TACTICAL&nbsp;</span></div>
<input class="tujuan" type="hidden" value="08xxxxxxxxxx" /> <!-- No. WhatsApp -->
<label>Nama :
<input class="nama" placeholder="Tulis Nama Lengkap." type="text" />
</label>
<label>Alamat :
<input class="alamat" placeholder="termasuk nama jln,No.rumah dan RT/RW, " type="alamat" />
</label>
<label>Nomor telepon :
<input class="nomor" placeholder="08xxxxxxxxxx" type="nomor" />
</label>
<label>Pesanan :
<textarea class="pesan" placeholder="contoh: 1 celana panjang blackhawk hitam size 30"></textarea>
</label>
<a class="submit" href="https://draft.blogger.com/null">&gt; KIRIM WHATSAPP &lt;&lt; </a>
</div>
<script>
$('.whatsapp-btn').click(function(){
$('#whatsapp').toggleClass('toggle');
});
// Onclick Whatsapp Sent!
$('#whatsapp .submit').click(WhatsApp);
$("#whatsapp input, #whatsapp textarea").keypress(function() {
if (event.which == 13) WhatsApp();
});
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
function WhatsApp() {
var ph = '';
if ($('#whatsapp .nama').val() == '') { // Cek Nama
  ph = $('#whatsapp .nama').attr('placeholder');
  alert('Silahkan tulis ' + ph);
  $('#whatsapp .nama').focus();
  return false;
} else if ($('#whatsapp .alamat').val() == '') { // Cek alamat
  ph = $('#whatsapp .alamat').attr('placeholder');
  alert('Silahkan tulis ' + ph);
  $('#whatsapp .alamat').focus();
  return false;
} else if ($('#whatsapp .nomor').val() == '') { // Cek Nomor
  ph = $('#whatsapp .nomor').attr('placeholder');
  alert('Silahkan tulis ' + ph);
  $('#whatsapp .nomor').focus();
  return false;
} else if ($('#whatsapp .pesan').val() == '') { // Cek Pesanan
  ph = $('#whatsapp .pesan').attr('placeholder');
  alert('Silahkan tulis ' + ph);
  $('#whatsapp .pesanan').focus();
  return false;
} else {
  if (!confirm("Kirim Ke WhatsApp?")) {
   window.open("https://www.whatsapp.com/download/");
  } else {
   // Check Device (Mobile/Desktop)
   var url_wa = 'https://web.whatsapp.com/send';
   if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    url_wa = 'whatsapp://send/';
   }
   // Get Value
   var tujuan = $('#whatsapp .tujuan').val(),
     via_url = location.href,
     nama = $('#whatsapp .nama').val(),
     alamat = $('#whatsapp .alamat').val(),
                    nomor = $('#whatsapp .nomor').val(),
     pesan = $('#whatsapp .pesan').val();
   $(this).attr('href', url_wa + '?phone=62 ' + tujuan + '&text=Halo admin saya mau order, %0A *' + nama + '* %0AAlamat:%20' + alamat +' %0ANo.tlp:%20'+ nomor + ' %0APesanan:%20' + pesan + '%0A%0Avia : www.ukarishop.blogspot.com');
   var w = 960,
     h = 540,
     left = Number((screen.width / 2) - (w / 2)),
     tops = Number((screen.height / 2) - (h / 2)),
     popupWindow = window.open(this.href, '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=1, copyhistory=no, width=' + w + ', height=' + h + ', top=' + tops + ', left=' + left);
   popupWindow.focus();
   return false;
  }
}
}
</script>



*****************************
Keterangan tulisan warna merah :
1. Link background, silahkan ganti sesuai keinginan
2. Nama toko kalian
3. No hp kalian

Semoga bermanfaat guy's,,,,

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Kaqi-5 - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger