Cara Memasang Widget Contact Form Whatsapp Di Blog

cara membuat custom form whatsapp responsive - pada tahun sekarang pengguna whatsapp sudah banyak rata-rata di semua smatphone teman-teman sudah terinstall aplikasi whatsapp bukan ? bagi anda soeang blogger atau pembuat website, wajib mencoba contact whatsapp responsive, semua platform sudah responsive.

saya sarankan untuk menggunakan contact form whatsapp ini di blog download, website bisnis, website jual beli barang dan website betema jual beli, agar pengunjung mudah berkomunikasi dengan penjual dengan whatsapp tanpa membuka website lagi untuk menanyakan harga dan bisa tawar menawar.

Cara Membuat Custom Contact Form Whatsapp
1. Blogger > Theme > Edit Theme.
2. Salin script fontawesome dan jquery di atas </head>

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

3. Terapkan script CSS ini, di atas </style>

div#suryapero {
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#suryapero.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;
}
}

4. Salin sctip HTML dibawah ini, letakkan di atas </body>

<a class='fa fa-whatsapp fa-3x animated infinite rubberBand' href='javascript:void(0);' id='wa-icon' onclick='openModal()'></a>
<div class='suryapero' id='suryapero'>
</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='ISI NO WA KAMU'/>
<!-- No. WhatsApp -->
<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..'></textarea>
<a class='submit'>Kirim</a>
</div>
</div>

5. Salin script javascript dibawah ini, letakkan di atas </body> atau letakkan setelah script HTML yang di atas yang anda salin tadi.

 <script type='text/javascript'>
function closeModal() {
document.getElementById('suryapero').classList.remove('active')
document.getElementById('whatsapp').classList.remove('active')
}
function openModal() {
document.getElementById('suryapero').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 .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>

Demikianlah cara membuat widget contact form whatsapp. semoga bermanfaat untuk blog dan website anda.

Surya Seorang mahasiswa yang senang membagikan informasi yang sudah saya dapatkan. Informasi yang saya tulis blog ini, sesuai pengalaman saya dari pertama blog.

Berbagi :