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
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 </span></div>
<input class="tujuan" type="hidden" value="08xxxxxxxxxx" /> <!-- No. WhatsApp -->
<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 </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">> KIRIM WHATSAPP << </a>
<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">> KIRIM WHATSAPP << </a>
</div>
<script>
$('.whatsapp-btn').click(function(){
$('#whatsapp').toggleClass('toggle');
});
// Onclick Whatsapp Sent!
$('#whatsapp .submit').click(WhatsApp);
<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>
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