Form Whatsapp untuk Pebisnis



Langkah-langkah
1. Taruh JQuery + Font Awesome
 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

2. Pasang sebelum di bagian </style>  atau </b:skin>
 /*== Contact form WhatsApp ==*/
div#pelajar{position:fixed;top:0;left:0;right:0;bottom:0;z-index:-99;opacity:0;transition:.5s;background:rgba(0,0,0,0.5)}
div#pelajar.active{z-index:9999;opacity:1}
div#whatsapp{position:fixed;top:50%;left:50%;max-width:480px;width:95%;background:#fff;transform:translate(-50%,-50%);z-index:-1;opacity:0;border-radius:5px;overflow:hidden;box-shadow:0 2px 5px rgba(0,0,0,0.5);transition:.5s}
div#whatsapp.active{z-index:999999;opacity:1}
p.wa-title{margin:0;padding:15px;font-size:16px;text-align:center;font-weight:700;background:#2ecc71;color:#fff}
.wa-body{padding:14px;display:flex;flex-wrap:wrap;width:100%;box-sizing:border-box}
.wa-input{border:1px solid #ddd;border-radius:3px;line-height:32px;padding:0 10px;box-shadow:inset 0 0 2px rgba(0,0,0,0.1)}
.wa-input.bagi{width:48%;margin:1%;margin-bottom:10px}
.wa-input.full{width:98%;resize:none;min-height:150px;margin:0 1%}
a.submit{line-height:24px;padding:10px 15px;width:100%;max-width:200px;text-align:center;background:#2ecc71;margin:14px auto 0;display:block;color:#fff;border-radius:3px;cursor:pointer}
span.wa-x{position:absolute;top:5px;right:5px;height:30px;width:30px;border:2px solid #fff;border-radius:50px;corsor:pointer}
a#wa-icon{position:fixed;bottom:30px;left:30px;line-height:0;border-radius:30px;background:#2ecc71;padding:0;height:60px;width:60px;color:#fff;box-shadow:0 10px 20px rgba(0,0,0,0.1);z-index:99}
a#wa-icon::before{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
span.wa-x::before{content:"";position:absolute;top:50%;left:50%;height:3px;width:50%;background:#fff;transform:translate(-50%,-50%)}
@media (max-width: 480px) {
.wa-input.bagi{width:100%;margin:0;margin-bottom:10px}
a#wa-icon{bottom:10px;left:10px}
.wa-input.full{width:100%;margin:0}
}



3. Taruh sebelum </body>
 <a class='fa fa-envelope-o' href='javascript:void(0);' id='wa-icon' onclick='openModal()'/><div class='pelajar' id='pelajar'/><div id='whatsapp'><span class='wa-x' onclick='closeModal()'/><p class='wa-title'>Formulir Resmi Pendaftaran Eco Racing</p><div class='wa-body'>
<input class='tujuan' type='hidden' value='89601045030'/><!-- No. WhatsApp -->
<input class='nama wa-input bagi' placeholder='Nama Lengkap sesuai KTP ...' type='text'/>
<input class='nabu wa-input bagi' placeholder='Nama Ibu Kandung ...' type='text'/>
<input class='alamat wa-input bagi' placeholder='Alamat Lengkap sesuai KTP ...' type='text'/>
<input class='gender wa-input bagi' placeholder='Jenis Kelamin ...' type='text'/><input class='NIK wa-input bagi' placeholder='NIK ...' type='text'/> <input class='tlp wa-input bagi' placeholder='No Tlp/Whatsapp ...' type='text'/><input class='email wa-input bagi' placeholder='E-mail Aktif ...' type='email'/>
 <select class='paket wa-input bagi'>
   <option value='Anda belum menentukan Pilihan'>Pilihan Investasi</option>
     <option value='BASIC SINERGY SAJUTA Rp. 1.000.000,-'>BASIC SINERGY</option>
     <option value='SUB AGEN SINERGY SAJUTA Rp. 3.000.000,-'>SUB AGEN SINERGY</option>
     <option value='PROFESIONAL AGEN SINERGY SAJUTA Rp. 7.000.000,-'>PROFESIONAL AGEN SINERGY</option>
     <option value='MASTER AGEN SINERGY SAJUTA Rp. 15.000.000,-'>MASTER AGEN SINERGY</option>
     <option value='STOKIST AGEN SINERGY SAJUTA Rp. 31.000.000,-'>STOKIST AGEN SINERGY</option>
 </select>
<textarea class='pesan wa-input full' placeholder='Motivasi anda Gabung Sinergy Eco Racing...'/><a class='submit'>Kirim Formulir</a></div></div>
<script type='text/javascript'>
function closeModal() {
document.getElementById('pelajar').classList.remove('active')
document.getElementById('whatsapp').classList.remove('active')
}
function openModal() {
document.getElementById('pelajar').classList.add('active')
document.getElementById('whatsapp').classList.add('active')
}
// Onclick Whatsapp Sent!
$('#whatsapp .submit').click(WhatsApp);
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
function WhatsApp() {
    var ph = '';
    if ($('#whatsapp .nama').val() == '') { // Cek Nama
        ph = $('#whatsapp .nama').attr('placeholder');
        alert('Silahkan tulis ' + ph);
        $('#whatsapp .nama').focus();
        return false;
    } else if ($('#whatsapp .paket').val() == '') { // Cek paket
        ph = $('#whatsapp .paket').attr('placeholder');
        alert('Silahkan tulis ' + ph);
        $('#whatsapp .paket').focus();
        return false;
    } else if ($('#whatsapp .nabu').val() == '') { // Cek nabu
        ph = $('#whatsapp .nabu').attr('placeholder');
        alert('Silahkan tulis ' + ph);
        $('#whatsapp .nabu').focus();
        return false;
    } else if ($('#whatsapp .alamat').val() == '') { // Cek Alamat
        ph = $('#whatsapp .alamat').attr('placeholder');
        alert('Silahkan tulis ' + ph);
        $('#whatsapp .alamat').focus();
        return false;
    } else if ($('#whatsapp .gender').val() == '') { // Cek gender
        ph = $('#whatsapp .gender').attr('placeholder');
        alert('Silahkan tulis ' + ph);
        $('#whatsapp .gender').focus();
        return false;
    } else if ($('#whatsapp .NIK').val() == '') { // Cek NIK
        ph = $('#whatsapp .NIK').attr('placeholder');
        alert('Silahkan tulis ' + ph);
        $('#whatsapp .alamat').focus();
        return false;
    } else if ($('#whatsapp .tlp').val() == '') { // Cek tlp
        ph = $('#whatsapp .tlp').attr('placeholder');
        alert('Silahkan tulis ' + ph);
        $('#whatsapp .tlp').focus();
        return false;
    } else if ($('#whatsapp .email').val() == '') { // Cek Email
        ph = $('#whatsapp .email').attr('placeholder');
        alert('Silahkan tulis ' + ph);
        $('#whatsapp .email').focus();
        return false;
    } else if (reg.test($('#whatsapp .email').val()) == false) { // Cek Validasi Email
        alert('Alamat E-mail tidak valid.');
        $('#whatsapp .email').focus();
         return false;
    } else if ($('#whatsapp .pesan').val() == '') { // Cek Pesan
        ph = $('#whatsapp .pesan').attr('placeholder');
        alert('Silahkan tulis ' + ph);
        $('#whatsapp .pesan').focus();
        return false;
    } else {
        if (!confirm(&quot;Dengan mengirimkan Formulir Pendaftaran Sinergy Eco Racing berarti anda belum menjadi Member dan akan mendaftar sebagai Member. Pastikan anda sudah memahami Harga Perpaket dan Marketing Plan dari Sinergy Eco Racing. Klik OK untuk melanjutkan Pilih BATAL untuk membatalkan.&quot;)) {
            window.open(&quot;/&quot;);
        } else {
            // Check Device (Mobile/Desktop)
            var url_wa = 'https://web.whatsapp.com/send';
            if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
                url_wa = 'whatsapp://send/';
            }
            // Get Value
            var tujuan = $('#whatsapp .tujuan').val(),
                    via_url = location.href,
                    nama = $('#whatsapp .nama').val(),
                    paket = $('#whatsapp .paket').val(),
                    nabu = $('#whatsapp .nabu').val(),
                    alamat = $('#whatsapp .alamat').val(),
                    gender = $('#whatsapp .gender').val(),
                    NIK = $('#whatsapp .NIK').val(),
                    tlp = $('#whatsapp .tlp').val(),
                    email = $('#whatsapp .email').val(),
                    pesan = $('#whatsapp .pesan').val();
            $(this).attr('href', url_wa + '?phone=62 ' + tujuan + '&amp;text=🙏 *_Assalamualaikum ..._* *Leader.* Dengan Mengisi Formulir ini, Saya : %20%0A👤 Nama Lengkap : + *' + nama + '* + %20%0A👤 Ibu Kandung : + *' + nabu + '* + %20%0A👤 Paket : + *' + paket + '* %20%0A👤 Alamat Lengkap : + *' + alamat + '* %20%0A👤 Jenis Kelamin : + *' + gender + '* + %20%0A👤 NIK : + *' + NIK + '* + %20%0A👤 No.Tlp/Whatsapp : + *' + tlp + '* + %20%0A👤 Email Aktif : *' + email + '* %20%0AIngin Join Eco Racing, Mohon bimbingannya dalam membeli Lisensi. %20%0A👤 Motivasi saya adalah : *' + pesan + '* + %0A%0AFormulir ini dari Web : %20%0A' + via_url);
            var w = 960,
                    h = 540,
                    left = Number((screen.width / 2) - (w / 2)),
                    tops = Number((screen.height / 2) - (h / 2)),
                    popupWindow = window.open(this.href, '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=1, copyhistory=no, width=' + w + ', height=' + h + ', top=' + tops + ', left=' + left);
            popupWindow.focus();
            return false;
        }
    }
}
</script>

Silahkan berkomentar untuk artikel "Form Whatsapp untuk Pebisnis"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel