Skip to main content
Home Blogging Cara Membuat Formulir Order Via WhatsApp dan Email di Blogger

Cara Membuat Formulir Order Via WhatsApp dan Email di Blogger

Antarmuka Pencarian Pusat Panggilan

Hallo SobatNet! Pada kesempatan kali ini, kami akan membagikan tutorial lengkap tentang cara membuat formulir order yang menghubungkan pengunjung blog Anda dengan WhatsApp dan email. Dengan formulir ini, pelanggan dapat memilih untuk melakukan checkout melalui salah satu platform tersebut, sehingga meningkatkan kenyamanan dalam berbelanja online.

Kenapa Menggunakan Formulir Order di Blogger?

Blogger merupakan platform yang sangat populer untuk membuat blog dan toko online. Dengan menambahkan formulir order, SobatNet dapat memberikan pengalaman berbelanja yang lebih baik bagi pengunjung. Formulir ini memungkinkan pengunjung untuk mengisi data pemesanan dengan mudah, sekaligus memudahkan pemilik toko untuk mengelola pesanan.

Kelebihan Menggunakan Formulir Order

  1. Pilihan Metode Pembayaran: Pembeli bisa memilih metode pembayaran yang mereka inginkan.
  2. Peningkatan Konversi: Formulir yang sederhana dan intuitif dapat meningkatkan tingkat konversi.
  3. Mudah Dikelola: Dengan data yang terstruktur, pemilik toko dapat lebih mudah mengelola pesanan.
  4. Responsif dan Modern: Desain yang menarik dapat menarik perhatian pembeli.

Demo Formulir Order

Sebelum kita mulai, Anda bisa melihat demo dari formulir order yang telah kami buat di bawah ini:

demo formulir order

Langkah-Langkah Membuat Formulir Order Via WhatsApp dan Email

1. Persiapkan Template Blogger Anda

Sebelum memasukkan script, pastikan template Blogger Anda sudah terpasang jQuery. Jika belum, salin kode berikut dan letakkan di atas kode </head>: 

<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

2. Tambahkan CSS

Selanjutnya, tambahkan CSS di bawah kode ]]></b:skin> atau di atas kode </style>. Ini akan mengatur tampilan formulir Anda agar lebih menarik. 

.wendy-checkout-content{position:absolute;top:50%;left:50%;padding:35px 10px 10px 10px;transform:translate(-50%,-45%);background-color:#fff;border-radius:.5rem;max-width:500px;width:90%;box-shadow:inset 0 2px 6px 0 rgba(49,53,59,.12);max-height:calc(100vh - 150px);overflow:auto;margin:auto}
.wendy-checkout-content:hover{overflow-x:hidden;overflow-y:auto}
.wendy-checkout-content .wendy-close{position:absolute;right:15px;top:3px;font-size:15px;}
.wendy-checkout-content .wendy-close:before{content:'Close';position:relative;right:2px;top:0;font-size:12px;color:#999}
.wendy-checkout-content .wendy-close a.tombol-bukatutup{width:auto;background:transparent;color:#999;padding:;text-decoration:none}
.wendy-checkout-wrap{position:fixed;z-index:999;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.5);display:none;}
#wendy-belanja{padding:5px;display:block}
#wendy-konfirmasi{display:grid;grid-template-columns:1fr 1fr;grid-gap:0 15px}
.wendy-datainput{position:relative;margin-bottom:5px;margin-right:5px}
.wendy-datainput select{padding:12px 0;color:#555;font-size:14px;width:100%;border:0!important;border-bottom:1px solid #ddd!important;outline:none;background:#fff}
.wendy-datainput input{font-size:14px;padding:12px 0!important;display:block;width:100%;border:none!important;border-bottom:1px solid #ddd!important}
.wendy-datainput input:focus{outline:none}
.wendy-datainput label{color:#999;font-size:14px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}
.wendy-datainput .focus{box-shadow:inset 0 -1px 0 0 #f89000!important}
.wendy-datainput .wendy-validasi{position:absolute;z-index:2;top:calc(100% + 20px);left:0;background:#f89000;color:#fff;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-datainput .wendy-validasi.show{visibility:visible;opacity:1;top:calc(100% + 10px)}
.wendy-datainput .wendy-validasi:after{position:absolute;bottom:100%;left:12px;content:'';border:8px solid;border-color:transparent transparent #f89000 transparent}
a.send_form{position:relative;display:inline-block;background:#f89000;color:#ffffff;padding:7px;border-radius:5px;text-align:center;font-size:13px;font-weight:400;text-decoration:none;margin-top:5px}
.img-produk{display:grid;grid-template-columns:1fr 2.7fr}
.img-produk img{max-width:150px;float:left;margin:10px 15px 0 0;border-radius:5px}
.info-produk{font-size:13px;margin-top:10px}
.info-produk i{color:#999;font-size:11px;margin:8px 0;display:block}
#nama_produk{font-size:20px;font-weight:600}

/*css darkmode sesuaikan classnya jika berbeda atau hapus bagian ini*/
.darkMode .send_form,.darkMode .tombol-bukatutup{color:#fff}
.darkMode .wendy-checkout-content,.darkMode .wendy-datainput select,.darkMode .wendy-datainput input{background-color:#252526!important}

3. Tambahkan HTML

Letakkan HTML berikut di bawah kode <data:post.body/>. Pastikan untuk mencoba satu per satu jika ada lebih dari satu kode tersebut, agar semua data dapat terpanggil dengan baik. 

<div class='wendy-checkout-wrap'>
  <div class='wendy-checkout-content'>
    <div class='wendy-close'>
      <a class='tombol-bukatutup' href='javascript:void(0);'>✕</a>
    </div>
    <div class='img-produk'>
      <img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl,150)' expr:title='data:post.title' />
      <div class='info-produk'>
        <div id='nama_produk'>
          <data:post.title />
        </div>
        <br />Harga : <span class='harga-s'></span>
        <i>*Belum termasuk Ongkos kirim</i>
      </div>
    </div>
    <div id='wendy-belanja'>
      <div id='wendy-konfirmasi'>
        <div class='wendy-datainput'>
          <input class='validate' id='namalengkap' name='Nama' placeholder='Nama Anda' required='' type='text' value='' />
        </div>
        <div class='wendy-datainput'>
          <input class='validate' id='nomorWA' name='No HP' placeholder='No HP' required='' type='number' value='' />
        </div>
        <div class='wendy-datainput'>
          <input class='validate' id='email' name='Email' placeholder='Email' required='' type='text' value='' />
        </div>
        <div class='wendy-datainput'>
          <select class='validate' id='pembayaran' name='No Rekening'>
            <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>
        <div class='wendy-datainput'>
          <input class='validate' id='alamat' name='Alamat' placeholder='Alamat' required='' type='text' value='' />
        </div>
      </div>
      <a class='send_form' id='to_wa' href='javascript:;' title='Pesan via whatsapp' type='submit'>Pesan via whatsapp</a>
      <a class='send_form' id='to_mail' href='javascript:;' title='Pesan via Email' type='submit'>Pesan via Email</a>
    </div>
  </div>
</div>

4. Tambahkan jQuery

Terakhir, tambahkan jQuery di bawah kode </body>. Berikut adalah kode jQuery yang diperlukan: 

<script>
//<![CDATA[
/*
* Wendy Code Checkout Form Whatsapp And Email
* Copyright (c) 2021 https://blog.choipanwendy.com
* No Licensed & Open source Code
* jQuery library
*/
// Tombol Buka Tutup
$('.tombol-bukatutup').click(function(){
$('.wendy-checkout-wrap').fadeToggle()});
 
var input_harga = $('#harga').text(); // Mengambil Harga Produk 
$('.harga-s').text(input_harga);
 
// validasi Untuk Kolom mailjib Isi
$('.wendy-datainput .validate').each(function() {
    title = $(this).attr('name');
    label = $(this).parents('.wendy-datainput');
    $('<span class="wendy-validasi"><b>' + title + '</b> diperlukan</span>').appendTo(label);
});
   $(document).on('keyup', '.wendy-datainput .validate', function() {
    if ($(this).val() != '') {
        $(this).removeClass('focus');
        $(this).parents('.wendy-datainput').find('.wendy-validasi').removeClass('show');
    }
});
$(document).on('change', '.wendy-datainput select', function() {
    $(this).removeClass('focus');
    $(this).parents('.wendy-datainput').find('.wendy-validasi').removeClass('show');
});
$('.send_form').click(checkout);
function checkout() { 
if ($('#namalengkap').val() == '') { // validasi Nama Lengkap
          $('#namalengkap').each(function() {
              $(this).addClass('focus');
                    $(this).parents('.wendy-datainput').find('.wendy-validasi').addClass('show');
          });
        $('#namalengkap').focus();
        return false;
    } else if ($('#nomorWA').val() == '') { // validasi Nomor Hp
          $('#nomorWA').each(function() {
              $(this).addClass('focus');
                    $(this).parents('.wendy-datainput').find('.wendy-validasi').addClass('show');
          });
        $('#nomorWA').focus();
        return false;
    } else if ($('#email').val() == '') { // validasi Alamat Email
          $('#email').each(function() {
              $(this).addClass('focus');
                    $(this).parents('.wendy-datainput').find('.wendy-validasi').addClass('show');
          });
        $('#email').focus();
        return false;
      } else if ($('#pembayaran').val() == 'default') { // validasi Pembayaran
          $('#pembayaran').each(function() {
              $(this).addClass('focus');
                    $(this).parents('.wendy-datainput').find('.wendy-validasi').addClass('show');
          });
        $('#pembayaran').focus();
        return false;
      } else if ($('#alamat').val() == '') { // validasi Alamat
          $('#alamat').each(function() {
              $(this).addClass('focus');
                    $(this).parents('.wendy-datainput').find('.wendy-validasi').addClass('show');
          });
        $('#alamat').focus();
        return false;
    } else {
 
   /* Pengaturan Email */
var email = 'yourmail@gmail.com', //Alamat Email Kalian
    maillink = 'https://mail.google.com/mail/u/0/?view=cm&fs=1&tf=1&to=',
    mailsubject = '&subject=Konfirmasi Pembelian ', //Subjek Email Namun Hanya Muncul Di SmartPhone Saja
    maillink1 = '',
    jarak = '',
    maillink2 = '&body=Halo saya ingin membeli produk anda dengan keterangan berikut: ', //Pesan Pembuka di email
    
    /* Pengaturan Whatsapp */ 
    phone = '628131123xxxx', // Nomor Whatsapp Kalian
    walink = 'https://web.whatsapp.com/send', 
    walink2 = 'Halo saya ingin membeli produk anda dengan keterangan berikut:'; // Pesan Pembuka di whatsapp
      
    /* Dukungan Smartphone */ 
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
var maillink = 'mailto:',
    jarak ='<br>';
    maillink1 = '?cc=&bcc=',
    walink = 'whatsapp://send';
}  
 
    /* Formulir Input Panggilan */ 
var input_nama = $('#namalengkap').val(), // Mengambil Input Nama
    input_nomor = $('#nomorWA').val(), // Mengambil Input Nomor Hp
    input_email = $('#email').val(), // Mengambil Input Alamat Email
    input_pembayaran = $('#pembayaran :selected').text(), // Mengambil Input Pembayaran
    input_alamat = $('#alamat').val(), // Mengambil Input Alamat
    input_namaproduk = $('#nama_produk').text(), // Mengambil Nama Produk
    input_harga = $('#harga').text(), // Mengambil Harga Produk
    input_catatan = $('#catatan').val(), // Mengambil Catatan Pembeli
    input_viaUrl = location.href; // Mengambil Url Saat ini atau link produk

    /* URL Final Email */ 
var mail_link = maillink + email + maillink1 + mailsubject + input_nama + maillink2 + '%0A%0A' + jarak + jarak +
    'DATA SAYA ' + jarak + 
    '%0A-----------------------------%0A' + '%0A' + jarak + jarak +
    'Nama : ' + input_nama + '%0A' + jarak + 
    'No Hp : ' + input_nomor + '%0A' + jarak +
    'Email : ' + input_email + '%0A' + jarak +
    'Alamat : ' + input_alamat + '%0A' + jarak +
    'Metode Pembayaran : ' + input_pembayaran + '%0A' + jarak +
    '%0A-----------------------------%0A' + '%0A' + jarak + jarak + 
    'DAFTAR DAFTAR BELANJAAN %0A' + jarak +
    '-----------------------------%0A' + jarak +
    'Nama Produk : ' + input_namaproduk + '%0A' + jarak + 
    'Harga Produk : ' + input_harga + '%0A' + jarak +
    'Catatan Pembeli : ' + input_catatan + '%0A' + jarak +
    'Link Produk : ' + input_viaUrl + '%0A' + jarak + 
    '%0A-----------------------------%0A';
      
    /* URL Final Whatsapp */ 
var whatsapp_link = walink + '?phone=' + phone + '&text=' + walink2 + '%0A%0A' +
    'DATA SAYA ' +
    '%0A-----------------------------%0A' + '%0A' +
    'Nama : ' + input_nama + '%0A' +
    'No Hp : ' + input_nomor + '%0A' +
    'Email : ' + input_email + '%0A' +
    'Alamat : ' + input_alamat + '%0A' +
    'Metode Pembayaran : ' + input_pembayaran + '%0A' +
    '%0A-----------------------------%0A' + '%0A' +
    'DAFTAR BELANJAAN %0A' +
    '-----------------------------%0A' +
    'Nama Produk : ' + input_namaproduk + '%0A' +
    'Harga Produk : ' + input_harga + '%0A' +
    'Catatan Pembeli : ' + input_catatan + '%0A' +
    'Link Produk : ' + input_viaUrl + '%0A' +
    '%0A-----------------------------%0A';
 
     /* Buka Jendela Email dan Whatsapp  */ 
     $('#to_wa').attr('href',whatsapp_link).attr('target','_blank');
     $('#to_mail').attr('href',mail_link).attr('target','_blank');

     /* Kosongkan Semua Kolom Jika Terkirim */ 
     $('#namalengkap').val('');
     $('#nomorWA').val('');
     $('#email').val('');
     $('#pembayaran :selected').text('Pembayaran');
     $('#alamat').val('');
     $('#catatan').val('');
  }
};
//]]> 
</script>

Kesimpulan

Dengan mengikuti langkah-langkah di atas, SobatNet kini dapat membuat formulir order yang terintegrasi dengan WhatsApp dan email di blog Anda. Ini tidak hanya akan meningkatkan pengalaman pelanggan, tetapi juga membantu Anda dalam mengelola pesanan dengan lebih efisien.

Semoga tutorial ini bermanfaat dan selamat mencoba! Jika ada pertanyaan, jangan ragu untuk menghubungi kami. Terima kasih telah berkunjung ke blog kami!

Anda Mungkin Juga Menyukai:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar