Cara Membuat Form Order Menuju Email Di Blog

Cara membuat form order menuju email di blog - Tutorial terpilih kali ini mengenai cara membuat form order menuju email di blog. Kami membuat postingan tentang cara membuat form order menuju email di blog karena mungkin ada yang mencari informasi cara membuat form order menuju email dengan mudah di blog.

Tutorial cara membuat form order menuju email di blog di blog bisa kalian pasang di blog mengunakan beberapa kode sederhana di bawah ini. Kode yang di butuhkan untuk memasang widget form order menuju email di blog hanya perlu copy paste dari postingan ini.

Cara Membuat Formulir Order Menuju Email 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 Email by wendy code */
.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 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-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>

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 Email by wendy code
// 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>

bagian yang saya tandai alamat email 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-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>

Terimakasih sudah membaca artikel kami tentang Cara Membuat Formulir Order Menuju Email Di Blogger. Kami membuat postingan ini karena mungkin ada yang mencari informasi tentang Cara Bikin Toko Online di Blog,Cara Membuat Form Order Pemesanan di Blog paling mudah,Cara Membuat Order Form di Blog, Smoga bermanfaat..