Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial cara membuat formulir order checkout menuju email di blogger dengan mudah.
Pada artikel sebelumnya saya sudah membahas tentang Cara Membuat Formulir Order Menuju Whatsapp di Blog tapi kali ini saya akan membagikan tutorial yang berbeda karena order yang masuk bukan ke whatsapp melainkan ke email. Untuk gayanya sama saja dengan formulir order menuju whatsapp, disini saya mengubah sedikit pada bagian jQuerynya sehingga orderan akan masuk ke email.
Untuk membuat order checkout menuju email sempat mengalami kendala pada pesan yang tanpa ada jarak tapi alhamdulillah sekarang sudah beres, formulir order checkout email ini bisa kalian gunakan untuk jualan atau jasa sehingga tidak terlalu mengganggu jika toko anda sedang tutup atau anda juga bisa gunakan dengan keperluan anda sendiri.
Untuk melihat demonya kalian bisa klik tombol di bawah ini, dan nantinya akan di bawa ke halaman lain dan klik tombol beli sekarang.
Cara Membuat Formulir Order Checkout Menuju Email di Blogger
- Seperti biasa silahkan kalian masuk ke blog kalian lalu pilih tema dan pilih edit html
- Oh iya sebelum ke tutorial pastikan template kalian sudah terpasang jQuery jika belum ada, kalian bisa salin kode di bawah ini dan letakkan di atas kode </head> atau <!--</head>--></head>
<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>- Salin kode di bawah ini dan letakan tepat di atas kode ]]></b:skin>
/* Formulir Email by telatngoding.com */
.wendy-form-mail{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-mail.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-mail #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-mail.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-mail{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-mail:hover{opacity:.8;color:#fff}
.wendy-btn-mail 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 salin kode di bawah ini dan letakan bebas dimana saja yang penting masih dalam tag <body> tapi jika ingin terlihat rapih letakan di atas kode <footer>
<div class='wendy-form-mail'>
<div class='form-container'>
<div class='wendy-form-header'><span class='form-title'>Checkout Form Email</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='mail_nama' name='nama' type='text'/><label>Nama Anda</label></div>
<div class='wendy-input-field'><input class='validate' id='mail_nomor' name='nomor hp' type='number'/><label>Nomor Hp</label></div>
<div class='wendy-input-field'><input class='validate' id='mail_blog' name='nama blog' type='text'/><label>Nama Blog</label></div>
<div class='wendy-input-field'><input class='validate' id='mail_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='mail_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='mail_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-mail send_form' href='javascript:;' title='Kirim Informasi Produk' type='submit'>KIRIM</a></div></div>- Sekarang salin kode di bawah ini dan letakan dibawah kode <data:post.body/> jika kode tersebut lebih dari satu maka harus pilih yang tepat atau bisa di coba satu persatu, karena setiap template pasti berbeda.
<div id='nama_produk'><data:post.title/></div>- Terakhir salin kode di bawah ini dan letakan di atas kode </body> atau <!--</body>--></body>
<script>
//<![CDATA[
// Formulir Email by telatngoding
// Tombol Buka Tutup
$(".form-close").click(function(){
$(".wendy-form-mail").fadeOut("fast")}
);$(".show-form").click(function(){
$(".wendy-form-mail").fadeIn("slow")});
// validasi Untuk Kolom mailjib 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(mailchat);
function mailchat() {
if ($('#mail_nama').val() == '') { // validasi Nama Lengkap
$('#mail_nama').each(function() {
$(this).addClass('focus');
$(this).parents('.wendy-input-field').find('.wendy-validasi').addClass('show');
});
$('#mail_nama').focus();
return false;
} else if ($('#mail_nomor').val() == '') { // validasi Nomor Hp
$('#mail_nomor').each(function() {
$(this).addClass('focus');
$(this).parents('.wendy-input-field').find('.wendy-validasi').addClass('show');
});
$('#mail_nomor').focus();
return false;
} else if ($('#mail_blog').val() == '') { // validasi Nama Blog
$('#mail_blog').each(function() {
$(this).addClass('focus');
$(this).parents('.wendy-input-field').find('.wendy-validasi').addClass('show');
});
$('#mail_blog').focus();
return false;
} else if ($('#mail_url').val() == '') { // wendy-validasi Url Blog
$('#mail_url').each(function() {
$(this).addClass('focus');
$(this).parents('.wendy-input-field').find('.wendy-validasi').addClass('show');
});
$('#mail_url').focus();
return false;
} else if ($('#mail_lisensi').val() == 'default') { // validasi Lisensi
$('#mail_lisensi').each(function() {
$(this).addClass('focus');
$(this).parents('.wendy-input-field').find('.wendy-validasi').addClass('show');
});
$('#mail_lisensi').focus();
return false;
} else if ($('#mail_pembayaran').val() == 'default') { // validasi Pembayaran
$('#mail_pembayaran').each(function() {
$(this).addClass('focus');
$(this).parents('.wendy-input-field').find('.wendy-validasi').addClass('show');
});
$('#mail_pembayaran').focus();
return false;
} else {
/* Pengaturan Email */
var maillink = 'https://mail.google.com/mail/u/0/?view=cm&fs=1&tf=1&to=',
email = 'emailanda@gmail.com', //Alamat Email Anda
mailsubject = '&subject=Konfirmasi Pembelian ', //Subjek Email Namun Hanya Muncul Di SmartPhone Saja
maillink1 = '',
jarak = '',
maillink2 = '&body=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 maillink = 'mailto:',
jarak ='<br>',
maillink1 = '?cc=&bcc=';
}
/* Formulir Input Panggilan */
var input_nama = $("#mail_nama").val(),
input_nomor = $("#mail_nomor").val(),
input_namaBlog = $("#mail_blog").val(),
input_urlBlog = $("#mail_url").val(),
input_lisensi = $("#mail_lisensi :selected").text(),
input_pembayaran = $("#mail_pembayaran :selected").text(),
input_namaproduk = $("#nama_produk").text(),
input_viaUrl = location.href;
/* 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 +
'Emai : ' + input_nomor + '%0A' + jarak +
'Nama Blog : ' + input_namaBlog + '%0A' + jarak +
'Url Blog : ' + input_urlBlog + '%0A' + jarak +
'Metode Pembayaran : ' + input_pembayaran + '%0A' + jarak +
'%0A-----------------------------%0A' + '%0A' + jarak + jarak +
'DAFTAR BELANJAAN %0A' + jarak +
'-----------------------------%0A' + jarak +
'Nama Template : ' + input_namaproduk + '%0A' + jarak +
'Jenis Lisensi : ' + input_lisensi + '%0A' + jarak +
'Link Template : ' + input_viaUrl + '%0A' + jarak +
'%0A-----------------------------%0A';
/* Buka Jendela Email */
window.open(mail_link,'_blank');
window.location.href = input_viaUrl;
return false;
}
};
//]]>
</script>- Simpan tema kalian dan selesai.
Untuk yang saya tandai dengan warna kuning silahkan sesuaikan dengan kebutuhan kalian.
Untuk penggunaannya silahkan salin kode di bawah ini dan letakan pada postingan kalian di bagian tampilan html
<div style='text-align:center'>
<a class="wendy-btn-mail 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>