formulir order menuju whatsapp di blogger

cara membuat formulir order menuju whatsapp di blogger, formulir ini cocok sekali buat untuk kalian yang menjual produk digital

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

DEMO

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>

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

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

tutorial blogger

24 komentar

Ezet 06 Mei, 2021 06 Mei, 2021

Keren mas
1. wendy 06 Mei, 2021 06 Mei, 2021
  
  Terima kasih mas
Agus 07 Mei, 2021 07 Mei, 2021

Selalu puas dengan tutorial yang diberikan mas Wendy. request dong featured post Kaya Idnxmus mas. terima kasih
1. wendy 07 Mei, 2021 07 Mei, 2021
  
  Terima kasih mas, nanti saya coba dulu
2. wendy 08 Mei, 2021 08 Mei, 2021
  
  rupanya bawaan template mas, median ui sudah update versi 1.5 nya
Ezet 08 Mei, 2021 08 Mei, 2021

Mas ajarin bikin slider post seperti blog ini,keren tampilan uinya sekarng👍
1. wendy 08 Mei, 2021 08 Mei, 2021
  
  ini bawaan template mas, median ui sudah ada update versi 1.5 nya
Ezet 10 Mei, 2021 10 Mei, 2021

Mas cara buat halaman demo seperti blog ini gimana?
1. wendy 10 Mei, 2021 10 Mei, 2021
  
  Bukan halaman ini mas, tapi template, saya buat blog untuk demo
2. Ezet 10 Mei, 2021 10 Mei, 2021
  
  Harus buat blog lagi yamas?
3. wendy 10 Mei, 2021 10 Mei, 2021
  
  Iya mas blog berbeda demo sama yang sekarang
Agus 11 Mei, 2021 11 Mei, 2021

saya pengguna fletro
Kang Ismet 17 Mei, 2021 17 Mei, 2021

Baru berkunjung lagi ke sini.... keren2 tutornya mantap
1. wendy 17 Mei, 2021 17 Mei, 2021
  
  Terima kasih kang, Masih belajar juga saya
DwiMarfia 13 Maret, 2022 13 Maret, 2022

mas kenapa kadang muncul kadang tidak ya?
ada solusi kah?
1. wendy 13 Maret, 2022 13 Maret, 2022
  
  coba jqueryny jgn pkae async='async'
Cilangla ID 03 April, 2022 03 April, 2022

kenapa pas di coba checkout nya di alamat dan catatan tulisanya "undefined" ya? sama di jenis produk gak ke isi
1. wendy 03 April, 2022 03 April, 2022
  
  harus paham js dasar kalau mau edit lg, itu undifined pasti nama variabel di ubah makanya tidak terbaca
SRI BALI RENTAL 22 Agustus, 2022 22 Agustus, 2022

mas mau nanya sudah berhasil jalankan tutorialnya, tapi di perangkat lain ga mau jalan javascripnya. kira2 kenapa ya mas????
1. wendy 22 Agustus, 2022 22 Agustus, 2022
  
  pastikan browser pada perangkat yang kamu maksud javascriptnya aktif, jika javascript browser di matikan maka tidak dapat berfungsi
Arda Design 12 Juli, 2023 12 Juli, 2023

Bang code nya sudah berhasil namun footer nya tenggelam karena kode yg diatas ga ada pembungkus di XML bang, request dong kode pembungkus nya apa bang?
1. wendy 18 Juli, 2023 18 Juli, 2023
  
  Tidak mengerti apa yang di maksud pebungkus xml?
Achmad Sinwani MA 26 Agustus, 2023 26 Agustus, 2023

Salam bang Wendy
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
Solo Shopping Mall 27 November, 2023 27 November, 2023

Apakah ada yang sekalian bisa menghitung total yang harus dibayarkan :

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

Wendy Code

formulir order menuju whatsapp di blogger

Cara Membuat Formulir Order Menuju Whatsapp Di Blogger

input nomor telepon internasional dengan api

membuat fitur login username + password di blogger

membuat safelink di blog utama dengan random post + generator

widget stars rating blogger