Codepelajar – WhatsApp Form adalah sebuah fitur yang memungkinkan pengguna untuk membuat dan mengirimkan formulir langsung melalui aplikasi WhatsApp. Dengan bantuan fitur ini, pengguna dapat merancang pertanyaan, pilihan, atau bahkan permintaan tugas kepada penerima dalam bentuk formulir yang interaktif.
Bagaimana WhatsApp Form Bekerja:
WhatsApp Form memungkinkan pengguna untuk membuat berbagai jenis pertanyaan, mulai dari pilihan ganda hingga pertanyaan singkat dan tugas. Pengguna dapat menyesuaikan tampilan formulir dengan menambahkan logo, warna, dan gaya sesuai preferensi mereka. Setelah formulir dibuat, pengguna dapat membagikannya melalui pesan langsung atau dalam grup, sehingga menerima respon dari banyak orang sekaligus.
Material WhatsApp Form gratis:
Anda dapat memasang script ini pada WordPress, Blogger, Website dengan hanya menempelkan 3 kode di bawah ini.
CSS
* {
box-sizing: border-box !important;
}
.modal-header {
padding: 10px 24px;
font-size: 18px;
background: #2ecc71;
color: #fff;
font-weight: bold;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>MATERIAL FORM WHATSAPP</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
</head>
<body>
<a class="waves-effect waves-light btn modal-trigger" href="#pesanWA">Modal</a>
<form id="pesanWA" class="modal">
<div class="modal-header">
<span class="title">Pesan via Whatsapp</span>
</div>
<div class="modal-content">
<div class="row">
<div class="input-field col s12 m6 l6 xl6">
<i class="material-icons prefix">account_circle</i>
<input id="nama" type="text" name="" class="validate wa_input" required="" />
<label>Nama</label>
<span class='helper-text' data-error='Harap diisi dengan benar!' data-success='Oke!'></span>
</div>
<div class="input-field col s12 m6 l6 xl6">
<i class="material-icons prefix">phone</i>
<input id="nomor_hp" type="text" name="" class="validate wa_input" required="" />
<label>Nomor HP</label>
<span class='helper-text' data-error='Harap diisi dengan benar!' data-success='Oke!'></span>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">mail</i>
<input id="email" type="email" name="" class="validate wa_input" required="" />
<label>Email</label>
<span class='helper-text' data-error='Harap diisi dengan benar!' data-success='Oke!'></span>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">message</i>
<textarea id="pesan" class="materialize-textarea" class="validate" required=""></textarea>
<label>Pesan Singkat</label>
<span class='helper-text' data-error='Harap diisi dengan benar!' data-success='Oke!'>Jelaskan rinciannya jika perlu</span>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Batal</a>
<a href="#!" class="waves-effect waves-green btn-flat kirim-pesan"><i class="material-icons right">send</i>Order</a>
</div>
</form>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
Javascript
// Hanya Nomor pada input Nomor HP
function numberOnly(e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl/cmd+A
(e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: Ctrl/cmd+C
(e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: Ctrl/cmd+X
(e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
}
// WhatsApp
function WhatsApp() {
var no_tujuan = "089501723931"; //nomor hp tujuan
var nama = document.getElementById('nama').value;
var nomor_hp = document.getElementById('nomor_hp').value;
var email = document.getElementById('email').value;
var pesan = document.getElementById('pesan').value;
var url_situs = location.host;
var url_asal_chat = location.href;
var url_wa = 'https://web.whatsapp.com/send';
if (nama == "" || nomor_hp == "" || email == "" || pesan == "") {
alert("Harap Isi Semua Form!")
return false;
} else {
if (!confirm("Sudah menginstall WhatsApp?")) {
window.open("https://www.whatsapp.com/download/");
} else {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
url_wa = 'whatsapp://send/';
}
$(this).attr('href', url_wa + '?phone=62 ' + no_tujuan + '&text=Hai admin ' + url_situs + ', perkenalkan saya%0ANama: *' + nama + '* %0AHp: *' + nomor_hp + '* %0AEmail: *' + email + '*%0A%0A' + pesan +'%0A%0AChat ini dikirim melalui tautan dibawah:%0A'+url_asal_chat);
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;
}
}
}
$(document).ready(function () {
M.AutoInit();
$('.kirim-pesan').click(function () {
WhatsApp()
})
$("#nomor_hp").keydown(numberOnly);
})
Demo
Anda dapat mengedit bagian yang diperlukan dan juga jangan lupa untuk mengganti nomor tujuan dengan nomor perusahaan anda atau nomor yang ingin di hubungi oleh pengunjung.
