bergabung di grup telegram kami

formulir order menuju whatsapp di blogger

formulir order menuju whatsapp di blogger
membuat 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 &lt;!--</head>--&gt;&lt;/head&gt;

<script async='async' 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>

/* 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 &lt;!--</body>--&gt;&lt;/body&gt;

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

Baca juga :

20 komentar



image quote pre code
  1. Keren mas
    1. Terima kasih mas
  2. Selalu puas dengan tutorial yang diberikan mas Wendy. request dong featured post Kaya Idnxmus mas. terima kasih
    1. Terima kasih mas, nanti saya coba dulu
    2. rupanya bawaan template mas, median ui sudah update versi 1.5 nya
  3. Mas ajarin bikin slider post seperti blog ini,keren tampilan uinya sekarng👍
    1. ini bawaan template mas, median ui sudah ada update versi 1.5 nya
  4. Mas cara buat halaman demo seperti blog ini gimana?
    1. Bukan halaman ini mas, tapi template, saya buat blog untuk demo
    2. Harus buat blog lagi yamas?
    3. Iya mas blog berbeda demo sama yang sekarang
  5. saya pengguna fletro
  6. Baru berkunjung lagi ke sini.... keren2 tutornya mantap
    1. Terima kasih kang, Masih belajar juga saya
  7. mas kenapa kadang muncul kadang tidak ya?
    ada solusi kah?
    1. coba jqueryny jgn pkae async='async'
  8. kenapa pas di coba checkout nya di alamat dan catatan tulisanya "undefined" ya? sama di jenis produk gak ke isi
    1. harus paham js dasar kalau mau edit lg, itu undifined pasti nama variabel di ubah makanya tidak terbaca
  9. mas mau nanya sudah berhasil jalankan tutorialnya, tapi di perangkat lain ga mau jalan javascripnya. kira2 kenapa ya mas????
    1. pastikan browser pada perangkat yang kamu maksud javascriptnya aktif, jika javascript browser di matikan maka tidak dapat berfungsi
© 2020 - Wendy Code