Cara Membuat Widget Contact Form WhatsApp - Jasa Desain Website & Grafis di Bandung
Custom Widget Contact Form WhatsApp – Pada postingan ini mimin ingin berbagi sedikit source code Widget Contact Form WhatsApp yang digunakan website ini, Widget Contact Form WhatsApp ini berfungsi untuk mengarahkan pengunjung website agar menghubungi admin secara langsung melalui whatsapp dengan menggunakan Widget Contact Form WhatsApp untuk mendapatkan informasi seperti: nama, e-mail, dan pesan awal pengunjung sebelum memulai chatting..
Bagi anda yang penasaran, seperti apa Widget Contact Form WhatsApp ini, silahkan klik tombol Demo dibawah ini:
Cara membuat Widget Contact Form WhatsApp :
- Buat Kode HTML dengan beberapa input text & textarea untuk membuat form pengambilan informasi Nama, E-mail dan Pesan awal sebelum memulai chat.
<i class="whatsapp-btn">WhatsApp</i>
<div id="whatsapp">
<input class="tujuan" type="hidden" value="089618885066"> <!-- No. WhatsApp -->
<label>
<input class="nama" type="text" placeholder="Nama Lengkap..">
</label>
<label>
<input class="email" type="email" placeholder="Alamat E-mail..">
</label>
<label>
<textarea class="pesan" placeholder="Pesan.."></textarea>
</label>
<a class="submit">Kirim</a>
</div>
*Pengaturan: Ubah No. Telepon 0896188850666 pada kode HTML di atas dengan No. Telepon WhatsApp anda. - Simpan kode CSS dibawah ini tepat di atas tag </head>
<style type="text/css">
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
outline:none;
margin:0;
padding:0;
}
.whatsapp-btn {
cursor:pointer;
position:fixed;
bottom:40px;
right:40px;
display:block;
width:50px;
height:50px;
border-radius:50px;
text-indent:-9999px;
background:#fff url(https://lh3.googleusercontent.com/-evFtor-f_w8/W4pfajfP17I/AAAAAAAAE9E/f7H52hrT5UoY4ZqdkxSGh2ZftYrH8fiDwCLcBGAs/s300/Whatsapp.png) no-repeat center center;
background-size:50% auto;
box-shadow:0 20px 25px rgba(0,0,0,.05);
transition:.2s;
}
.whatsapp-btn:active {
bottom:35px;
}
#whatsapp {
position:fixed;
z-index:+100;
bottom:0px;
right:0px;
display:block;
background:#fff;
box-shadow:0 20px 25px rgba(0,0,0,.05);
max-width:300px;
font-family:Helvetica, sans-serif;
font-size:90%;
border-radius:4px;
visibility:hidden;
opacity:0;
transition:.3s;
}
#whatsapp.toggle {
bottom:110px;
right:40px;
visibility:visible;
opacity:1;
}
@media(max-width:320px) {
.whatsapp-btn {
bottom:10px;
right:10px;
}
#whatsapp.toggle {
bottom:80px;
right:10px;
visibility:visible;
opacity:1;
}
}
#whatsapp label,
#whatsapp a {
display:block;
margin:15px;
text-decoration:none;
}
#whatsapp input,
#whatsapp textarea {
display:block;
border:1px solid #eee;
box-shadow:inset 0 2px 5px #eee;
width:100%;
padding:15px;
border-radius:2px;
}
#whatsapp input.nama {
text-transform:capitalize;
}
#whatsapp input:focus,
#whatsapp textarea:focus {
border:1px solid #ddd;
}
#whatsapp textarea {
min-height:80px;
resize: none;
}
#whatsapp a {
cursor:pointer;
display:block;
padding:10px;
font-weight:bold;
text-align:center;
background:#25D366;
color:white;
border-radius:2px;
}
#whatsapp a:hover {
background:#20b558;
}
</style> - Terakhir! simpan kode jQuery dibawah ini tepat di atas tag </body>
<script type="text/javascript">
$('.whatsapp-btn').click(function(){
$('#whatsapp').toggleClass('toggle');
});
// Onclick Whatsapp Sent!
$('#whatsapp .submit').click(WhatsApp);$("#whatsapp input, #whatsapp textarea").keypress(function() {
if (event.which == 13) 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>Catatan: Kode jQuery akan berfungsi jika anda menginstall jQuery Library, Jika anda belum menginstall kode jQuery Library, silahkan copy-paste kode dibawah ini tepat sebelum tag </head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Sekian postingan tentang Cara Membuat Widget Contact Form WhatsApp, jika ada pertanyaan silahkan tuliskan melalui kotak Komentar dibawah ini.
#contact #contact form #custom #field #form #whatsapp
