Membuat Contact Form Whatsapp

Membuat Contact Form Whatsapp

- Hallo Sobat Idtemplatez,Pada kesempatan kali ini saya akan Membagikan Tutorial Mengenai Membuat Contact Form Whatsapp,Sebenarnya Contact Form Ini Hampir sama dengan Contact Form Pada Umumnya ,Cuma Bedanya Ini Menggunakan Nomer WA Kita sebagai alamat Tujuanya.

Bagi Kalian Yang Tertarik Untuk Memasang Contact Form di Blog Kalian,Silahkan Ikuti Tutorial di bawah,sebelum Itu saya Berterimakasih Kepada admin Codepelajar.com , Atas Tutorialnya.

Untuk Demo Silahkan Lihat Di Bawah

Intinya Contact Form Ini Mempermudah Kalian Berkomunikasi dengan Pengunjung Blog  Kalian.

1. Login Ke akun kalian masing-masing

2. Masuk Ke Edit HTML/Tema Sobat

3.Pasang Font Awesome dan Jquery Di Bawah kedalam Tema Kalian.

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

4. Kemudian Masukkan CSS ini Sebelum Tag </Style> atau </b:skin> Untuk Yang Lain Menyesuaikan

<style>
/* Custom Widget Whats'app By IdTemplatez*/
div#idtemplatez{
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#idtemplatez.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: bold;
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 auto;
display: block;
color: #fff;
border-radius: 3px;
cursor: pointer;
}
span.wa-x {
position: absolute;
top: 5px;
right: 5px;
height: 30px;
width: 30px;
/* background: #222; */
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);
/* filter: invert(100%); */
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;
}
}
</style>

5.Jika sudah Letakkan HTML Berikut di atas tag </body>

 <a class='fa fa-whatsapp fa-3x animated infinite rubberBand' href='javascript:void(0);' id='wa-icon' onclick='openModal()'></a>
<div class='idtemplatez' id='idtemplatez'>
</div>
<div id='whatsapp'>
<span class='wa-x' onclick="closeModal()"></span>
<p class='wa-title'>Contact Form</p>
<div class='wa-body'>
<input class='tujuan' type='hidden' value='087783180814'/>
<!-- No Whats'app-->
<input class='nama wa-input bagi' placeholder='Nama Lengkap..' type='text'/>
<input class='email wa-input bagi' placeholder='Alamat E-mail..' type='email'/>
<textarea class='pesan wa-input full' placeholder='pesan..'/>
<a class='submit'>Kirim</a>
</div>

6.Letakkan Javascript ini tepat di atas Kode </body>

<script type='text/javascript'>
function closeModal(){
document.getElementById('idtemplatez').classList.remove('active')
document.getElementById('whatsapp').classList.remove('active')
}
function openModal(){
document.getElementById('idtemplatez').classList.add('active')
document.getElementById('whatsapp').classList.add('active')
}
//Onclick What'sapp Send
$('#whatsapp .submit').click(WhatApp);

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 .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("Sudah menginstall WhatsApp?")) {
            window.open("https://www.whatsapp.com/download/");
        } 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(),
                    email = $('#whatsapp .email').val(),
                    pesan = $('#whatsapp .pesan').val();
            $(this).attr('href', url_wa + '?phone=62 ' + tujuan + '&text=Halo, saya *' + nama + '* (' + email + ').. %0A%0A' + pesan + '%0A%0Avia ' + 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>

7.Simpan Template dan Lihat Hasilnya.

Itulah Cara membuat Contact Form Whatapp,Jika kalian Masih Bingung Bisa Tanya Admin di Kolom Komentar,Jangan Lupa share dan bagikan,Biar Ilmu ini bisa Terus berkembang Terimakasih 

"Tanpa Bantuan dari Teman Terdekat Saya (Codepelajar.com) Saya Mungkin tidak bisa Membuat Tutorial Ini Terimakasih Sekali lagi Untuk Admin Codepelajar Atas Informasinya https://www.codepelajar.com/2018/09/membuat-widget-contact-fom-whatsapp.html"