formulir order menuju whatsapp di blogger
Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat formulir order menuju whatsapp di blogger.
biasanya form order seperti ini dapat kita jumpai di situs jual beli seperti toko online maupun landing page, namun jika kalian memiliki sebuah blog yang biasanya membagikan artikel tapi ingin sambil berjualan juga maka formulir order menuju whatsapp mungkin akan membantu.
formulir ini cocok sekali buat untuk kalian yang menjual produk digital , misalnya aja kalian menjual template blogger / produk digital lainnya, namun bukan bearti tidak bisa untuk produk fisik.
script saya bagikan open source agar bisa di sesuaikan sesuai kebutuhan kalian, dan bisa di kembangkan lagi untuk keperluan lain misalnya aja ingin membuat formulir pendaftaran, namun di perlukan setidaknya sedikit pengetahuan coding untuk bisa mengeditnya.
untuk demonya bisa kalian lihat melalui tombol di bawah ini, ok buat kalian yang ingin membuatnya mari simak caranya di bawah ini.
untuk yang ingin kirim menuju email bisa cek postingan saya yang ini cara membuat formulir order menuju email di blogger
Cara Membuat Formulir Order Menuju Whatsapp Di Blogger
pastikan template kalian sudah terpasang jQuery jika belum ada, bisa salin kode di bawah ini dan letakkan di atas kode </head> atau <!--</head>--></head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
lanjut salin css di bawah ini dan letakkan di atas kode ]]></b:skin> atau di atas kode </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}
lanjut meletakan html di bawah ini, sebenarnya bebas bisa di letakkan di mana saja selama masih di dalam tag <body> namun agar terlihat lebih rapih struktur kode template kalian bisa meletakkannya di atas kode <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>
dan letakkan juga html ini di bawah kode <data:post.body/>, biasanya kode ini ada lebih dari 1 tergantung template yang kalian gunakan, silakan coba 1 per 1, html ini berfungsi untuk memanggil judul dari postingan kita untuk di jadikan nama produk, jika kode ini salah posisi maka judul postingan akan gagal terpanggil.
<div id='nama_produk'><data:post.title/></div>
dan terakhir letakkan jQuery di bawah ini di atas kode </body> atau <!--</body>--></body>
<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>
bagian yang saya tandai no whatsapp dan pesan pembuka silakan di sesuaikan jika sudah jangan lupa untuk klik simpan.
dan silakan salin html di bawah ini dan letakkan pada halaman postingan produk kalian jika sudah klik perbarui atau simpan.
<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>
ok jadi sekian cara membuat formulir order menuju whatsapp di blogger semoga bermanfaat dan terima kasih sudah berkunjung.
24 komentar
ada solusi kah?
Artikelnya sgt membantu
Oh iya bang mau tanya
Apa bedanya artikel ini dg kita pake gambar yg di kasih link ke google formulir / whatsapp target ?
Trahir saya undang utk main2 ke blog saya tujuannya kasih penilaian khususnya saran2 soal blog saya
Maklum wong deso dg auto didag
Misal untuk sewa dengan mengeset harga satuan dan pilihan jumlah hari sewa.
Sehingga hasilnya total biaya yang harus dibayarkan.
Info saya jika ada baik yang gratis atau berbayar soloshoping.com@gmail.com