Custom Contact Form WhatsApp

by DzikrRully

HTML

<i class="whatsapp-btn">WhatsApp</i>
<div id="whatsapp">
	<input class="tujuan" type="hidden" value="08998782745"> <!-- 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">Daftar</a>
</div>

CSS

body {
	background:#eee;
}
* {
	-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;
}

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