Membuat Form Order Langsung ke WhatsApp

Membuat Form Order WhatsApp Langsung ke WhatsApp

Postingan kedua! Alhamdulillah masih diberi kesehatan sehingga bisa nulis lagi. Dan, kali ini saya mau membuat form order langsung ke WhatsApp. Jadi, Form order WhatsApp ini berguna buat para pebisnis online, yang ingin mengarahkan form order konsumen mereka langsung otomatis ke WhatsApp.

Jadi, setelah bergabung dengan Kampung Marketer tahun 2017 lalu, saya mulai bermain-main dengan bisnis online. Dan, kebetulan pasar online di Indonesia ini lebih sering transaksi menggunakan WhatsApp. Maka, formulir order dengan menggunakan WhatsApp ini sepertinya lumayan banyak dicari oleh para pebisnis online di Indonesia.

Form Order WhatsApp

Data apa saja yang bisa kita kumpulkan dengan form order otomatsi WhatsApp ini? Tidak terbatas! Karena pada dasarnya kita akan benar-benar membuat form order WhatsApp ini dari nol. Saya sarankan kamu sudah sedikit paham tentang pemrograman seperti HTML, CSS dan JavaScript. Karena kita akan menggunakan ketiga bahasa itu untuk membuat formulir order WhatsApp otomatis ini.


Cara Membuat Form Order WhatsApp Otomatis

Cara Membuat Form Order WhatsApp Otomatis

Langkah pertama, kita siapkan dulu file HTML Form Order WhatsApp kita. Gunakan kode di bawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
  <div class="container-contact100">
		<div class="wrap-contact100">
			<form class="contact100-form validate-form" id="whatsapp">
				<span class="contact100-form-title">Order via WA</span>
				<input class="tujuan" type="hidden" id="noAdmin">
				<div class="wrap-input100">
					<span class="label-input100">Nama</span>
					<label>
					<input class="input100 nama" type="text" placeholder="Masukkan nama Anda">
					</label>
					<span class="focus-input100"></span>
				</div>

				<div class="wrap-input100">
					<span class="label-input100">Nomor WhatsApp</span>
					<label>
					<input class="input100 nowhatsapp" type="text" placeholder="08xxxxxxxxxx">
					</label>
					<span class="focus-input100"></span>
				</div>

				<div class="wrap-input100">
					<span class="label-input100">Alamat</span>
					<label>
					<textarea class="input100 alamat" placeholder="Masukkan alamat lengkap Anda"></textarea>
					</label>
					<span class="focus-input100"></span>
				</div>

				<div class="container-contact100-form-btn">
					<div class="wrap-contact100-form-btn">
						<div class="contact100-form-bgbtn"></div>
						<a class="contact100-form-btn submit">Kirim</a>
					</div>
				</div>
			</form>
		</div>
	</div>
</body>
</html>

Tambahkan CSS

Langkah ke dua, kita buat stylesheet untuk form order WhatsApp kita. Bisa dimasukkan ke dalam file HTML di atas. Atau, bisa dipisah dengan membuat file CSS tersendiri. Kita masukkan CSS di atas kode </head>. Berikut adalah kode CSS nya:

* {
	margin: 0px; 
	padding: 0px; 
	box-sizing: border-box;
}

body, html {
	height: 100%;
	font-family: Helvetica, sans-serif;
}

/*---------------------------------------------*/
a {
	font-family: Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.7;
	color: #666666;
	margin: 0px;
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
}

a:focus {
	outline: none !important;
}

a:hover {
	text-decoration: none;
}

/*---------------------------------------------*/
h1,h2,h3,h4,h5,h6 {
	margin: 0px;
}

p {
	font-family: Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.7;
	color: #666666;
	margin: 0px;
}

ul, li {
	margin: 0px;
	list-style-type: none;
}

/*---------------------------------------------*/
input {
	outline: none;
	border: none;
}

textarea {
  outline: none;
  border: none;
}

textarea:focus, input:focus {
  border-color: transparent !important;
}

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }

textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
textarea:focus::-moz-placeholder { color:transparent; }
textarea:focus:-ms-input-placeholder { color:transparent; }

input::-webkit-input-placeholder { color: #adadad;}
input:-moz-placeholder { color: #adadad;}
input::-moz-placeholder { color: #adadad;}
input:-ms-input-placeholder { color: #adadad;}

textarea::-webkit-input-placeholder { color: #adadad;}
textarea:-moz-placeholder { color: #adadad;}
textarea::-moz-placeholder { color: #adadad;}
textarea:-ms-input-placeholder { color: #adadad;}

/*---------------------------------------------*/
button {
	outline: none !important;
	border: none;
	background: transparent;
}

button:hover {
	cursor: pointer;
}

iframe {
	border: none !important;
}

/*---------------------------------------------*/
.container {
	max-width: 1200px;
}

/*//////////////////////////////////////////////////////////////////
[ Contact ]*/

.container-contact100 {
  width: 100%;  
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background: #a64bf4;
  background: -webkit-linear-gradient(45deg, #00dbde, #fc00ff);
  background: -o-linear-gradient(45deg, #00dbde, #fc00ff);
  background: -moz-linear-gradient(45deg, #00dbde, #fc00ff);
  background: linear-gradient(45deg, #00dbde, #fc00ff);
  
}

.wrap-contact100 {
  width: 500px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  padding: 42px 55px 45px 55px;
}

/*------------------------------------------------------------------
[ Form ]*/

.contact100-form {
  width: 100%;
}

.contact100-form-title {
  display: block;
  font-family: Helvetica, sans-serif;
  font-size: 35px;
  font-weight: 900;
  color: #333333;
  line-height: 1.2;
  text-align: center;
  padding-bottom: 44px;
}

/*------------------------------------------------------------------
[ Input ]*/

.wrap-input100 {
  width: 100%;
  position: relative;
  border-bottom: 2px solid #d9d9d9;
  padding-bottom: 13px;
  margin-bottom: 27px;
}

.label-input100 {
  font-family: Helvetica, sans-serif;
  font-size: 13px;
  color: #666666;
  line-height: 1.5;
  padding-left: 5px;
}

.input100 {
  display: block;
  width: 100%;
  background: transparent;
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: #333333;
  line-height: 1.2;
  padding: 0 5px;
}

.focus-input100 {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.focus-input100::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;

  background: #7f7f7f;
}

/*---------------------------------------------*/
input.input100 {
  height: 40px;
}


textarea.input100 {
  min-height: 110px;
  padding-top: 9px;
  padding-bottom: 13px;
}


.input100:focus + .focus-input100::before {
  width: 100%;
}

.has-val.input100 + .focus-input100::before {
  width: 100%;
}

/*------------------------------------------------------------------
[ Button ]*/
.container-contact100-form-btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 13px;
}

.wrap-contact100-form-btn {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
  border-radius: 25px;
  overflow: hidden;
  margin: 0 auto;
}

.contact100-form-bgbtn {
  position: absolute;
  z-index: -1;
  width: 300%;
  height: 100%;
  background: #a64bf4;
  background: -webkit-linear-gradient(left, #00dbde, #fc00ff, #00dbde, #fc00ff);
  background: -o-linear-gradient(left, #00dbde, #fc00ff, #00dbde, #fc00ff);
  background: -moz-linear-gradient(left, #00dbde, #fc00ff, #00dbde, #fc00ff);
  background: linear-gradient(left, #00dbde, #fc00ff, #00dbde, #fc00ff);
  top: 0;
  left: -100%;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.contact100-form-btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  width: 100%;
  height: 50px;

  font-family: Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.wrap-contact100-form-btn:hover .contact100-form-bgbtn {
  left: 0;
}

.contact100-form-btn i {
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}
.contact100-form-btn:hover i {
  -webkit-transform: translateX(10px);
  -moz-transform: translateX(10px);
  -ms-transform: translateX(10px);
  -o-transform: translateX(10px);
  transform: translateX(10px);
}

/*------------------------------------------------------------------
[ Responsive ]*/

@media (max-width: 576px) {
  .wrap-contact100 {
    padding: 72px 15px 65px 15px;
  }
}

Tambahkan JavaScript

Next, kita tinggal menambahkan kode JavaScriptnya. Atau, lebih tepatnya disini saya menggunakan jQuery. Sama halnya dengan stylesheet, kita
bisa dimasukkan ke dalam file HTML di atas. Atau, bisa dipisah dengan membuat file JS tersendiri. Di sini, kita menambahkan kode JavaScript ini di atas kode </body>. Berikut adalah kode-nya:

//no wa admin
	$("#noAdmin").val("08123456789");
	$('.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 .nowhatsapp').val() == '') { // Cek Whatsapp
			ph = $('#whatsapp .nowhatsapp').attr('placeholder');
			alert('Silahkan tulis ' + ph);
			$('#whatsapp .nowhatsapp').focus();
			return false;
		} else if ($('#whatsapp .alamat').val() == '') { // Cek Alamat
			ph = $('#whatsapp .alamat').attr('placeholder');
			alert('Silahkan tulis ' + ph);
			$('#whatsapp .alamat').focus();
			return false;
		} 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(),
				nowhatsapp = $('#whatsapp .nowhatsapp').val(),
				alamat = $('#whatsapp .alamat').val();
			$(this).attr('href', url_wa + '?phone=62 ' + tujuan + '&text=Nama: ' + nama + ' %0ANo. Whatsapp: ' + nowhatsapp + '%0AAlamat: ' + alamat + ' %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;
		}
	}

Pada kode di atas, ganti 08123456789 dengan nomor WhatsApp kita atau WhatsApp admin/CS kita.

Tambahkan jQuery

Langkah selanjutnya! Karena kita menggunakan jQuery, maka kita perlu memasukkan jQuery ke dalam kode kita. Caranya, tambahkan kode di bawah ini di atas tag </head>. Pada kasus ini, kita menggunakan file jQuery yang dihost di googleapis.com. Tentu saja, kita bisa saja mendownload file jquery.min.js tersebut lalu kita buat satu direktori dengan file html kita.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Selesai! Jika dibuat dalam satu file, maka kita akan memiliki file HTML lengkap seperti di bawah ini. Selanjutnya silakan melakukan uji coba.

<!DOCTYPE html>

<head>
	<title>Form Order WhatsApp</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		* {
			margin: 0px;
			padding: 0px;
			box-sizing: border-box;
		}

		body,
		html {
			height: 100%;
			font-family: Helvetica, sans-serif;
		}

		/*---------------------------------------------*/
		a {
			font-family: Helvetica, sans-serif;
			font-size: 14px;
			line-height: 1.7;
			color: #666666;
			margin: 0px;
			transition: all 0.4s;
			-webkit-transition: all 0.4s;
			-o-transition: all 0.4s;
			-moz-transition: all 0.4s;
		}

		a:focus {
			outline: none !important;
		}

		a:hover {
			text-decoration: none;
		}

		/*---------------------------------------------*/
		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			margin: 0px;
		}

		p {
			font-family: Helvetica, sans-serif;
			font-size: 14px;
			line-height: 1.7;
			color: #666666;
			margin: 0px;
		}

		ul,
		li {
			margin: 0px;
			list-style-type: none;
		}

		/*---------------------------------------------*/
		input {
			outline: none;
			border: none;
		}

		textarea {
			outline: none;
			border: none;
		}

		textarea:focus,
		input:focus {
			border-color: transparent !important;
		}

		input:focus::-webkit-input-placeholder {
			color: transparent;
		}

		input:focus:-moz-placeholder {
			color: transparent;
		}

		input:focus::-moz-placeholder {
			color: transparent;
		}

		input:focus:-ms-input-placeholder {
			color: transparent;
		}

		textarea:focus::-webkit-input-placeholder {
			color: transparent;
		}

		textarea:focus:-moz-placeholder {
			color: transparent;
		}

		textarea:focus::-moz-placeholder {
			color: transparent;
		}

		textarea:focus:-ms-input-placeholder {
			color: transparent;
		}

		input::-webkit-input-placeholder {
			color: #adadad;
		}

		input:-moz-placeholder {
			color: #adadad;
		}

		input::-moz-placeholder {
			color: #adadad;
		}

		input:-ms-input-placeholder {
			color: #adadad;
		}

		textarea::-webkit-input-placeholder {
			color: #adadad;
		}

		textarea:-moz-placeholder {
			color: #adadad;
		}

		textarea::-moz-placeholder {
			color: #adadad;
		}

		textarea:-ms-input-placeholder {
			color: #adadad;
		}

		/*---------------------------------------------*/
		button {
			outline: none !important;
			border: none;
			background: transparent;
		}

		button:hover {
			cursor: pointer;
		}

		iframe {
			border: none !important;
		}

		/*---------------------------------------------*/
		.container {
			max-width: 1200px;
		}

		/*//////////////////////////////////////////////////////////////////
[ Contact ]*/

		.container-contact100 {
			width: 100%;
			min-height: 100vh;
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-box;
			display: -ms-flexbox;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			padding: 15px;
			background: #a64bf4;
			background: -webkit-linear-gradient(45deg, #00dbde, #fc00ff);
			background: -o-linear-gradient(45deg, #00dbde, #fc00ff);
			background: -moz-linear-gradient(45deg, #00dbde, #fc00ff);
			background: linear-gradient(45deg, #00dbde, #fc00ff);

		}

		.wrap-contact100 {
			width: 500px;
			background: #fff;
			border-radius: 10px;
			overflow: hidden;
			padding: 42px 55px 45px 55px;
		}

		/*------------------------------------------------------------------
[ Form ]*/

		.contact100-form {
			width: 100%;
		}

		.contact100-form-title {
			display: block;
			font-family: Helvetica, sans-serif;
			font-size: 35px;
			font-weight: 900;
			color: #333333;
			line-height: 1.2;
			text-align: center;
			padding-bottom: 44px;
		}

		/*------------------------------------------------------------------
[ Input ]*/

		.wrap-input100 {
			width: 100%;
			position: relative;
			border-bottom: 2px solid #d9d9d9;
			padding-bottom: 13px;
			margin-bottom: 27px;
		}

		.label-input100 {
			font-family: Helvetica, sans-serif;
			font-size: 13px;
			color: #666666;
			line-height: 1.5;
			padding-left: 5px;
		}

		.input100 {
			display: block;
			width: 100%;
			background: transparent;
			font-family: Helvetica, sans-serif;
			font-size: 18px;
			color: #333333;
			line-height: 1.2;
			padding: 0 5px;
		}

		.focus-input100 {
			position: absolute;
			display: block;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			pointer-events: none;
		}

		.focus-input100::before {
			content: "";
			display: block;
			position: absolute;
			bottom: -2px;
			left: 0;
			width: 0;
			height: 2px;

			-webkit-transition: all 0.4s;
			-o-transition: all 0.4s;
			-moz-transition: all 0.4s;
			transition: all 0.4s;

			background: #7f7f7f;
		}

		/*---------------------------------------------*/
		input.input100 {
			height: 40px;
		}


		textarea.input100 {
			min-height: 110px;
			padding-top: 9px;
			padding-bottom: 13px;
		}


		.input100:focus+.focus-input100::before {
			width: 100%;
		}

		.has-val.input100+.focus-input100::before {
			width: 100%;
		}

		/*------------------------------------------------------------------
[ Button ]*/
		.container-contact100-form-btn {
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-box;
			display: -ms-flexbox;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			padding-top: 13px;
		}

		.wrap-contact100-form-btn {
			width: 100%;
			display: block;
			position: relative;
			z-index: 1;
			border-radius: 25px;
			overflow: hidden;
			margin: 0 auto;
		}

		.contact100-form-bgbtn {
			position: absolute;
			z-index: -1;
			width: 300%;
			height: 100%;
			background: #a64bf4;
			background: -webkit-linear-gradient(left, #00dbde, #fc00ff, #00dbde, #fc00ff);
			background: -o-linear-gradient(left, #00dbde, #fc00ff, #00dbde, #fc00ff);
			background: -moz-linear-gradient(left, #00dbde, #fc00ff, #00dbde, #fc00ff);
			background: linear-gradient(left, #00dbde, #fc00ff, #00dbde, #fc00ff);
			top: 0;
			left: -100%;

			-webkit-transition: all 0.4s;
			-o-transition: all 0.4s;
			-moz-transition: all 0.4s;
			transition: all 0.4s;
		}

		.contact100-form-btn {
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-box;
			display: -ms-flexbox;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 20px;
			width: 100%;
			height: 50px;

			font-family: Helvetica, sans-serif;
			font-size: 16px;
			font-weight: 700;
			color: #fff;
			line-height: 1.2;
		}

		.wrap-contact100-form-btn:hover .contact100-form-bgbtn {
			left: 0;
		}

		.contact100-form-btn i {
			-webkit-transition: all 0.4s;
			-o-transition: all 0.4s;
			-moz-transition: all 0.4s;
			transition: all 0.4s;
		}

		.contact100-form-btn:hover i {
			-webkit-transform: translateX(10px);
			-moz-transform: translateX(10px);
			-ms-transform: translateX(10px);
			-o-transform: translateX(10px);
			transform: translateX(10px);
		}

		/*------------------------------------------------------------------
[ Responsive ]*/

		@media (max-width: 576px) {
			.wrap-contact100 {
				padding: 72px 15px 65px 15px;
			}
		}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
	<div class="container-contact100">
		<div class="wrap-contact100">
			<form class="contact100-form validate-form" id="whatsapp">
				<span class="contact100-form-title">
					Order via WA
				</span>
				<input class="tujuan" type="hidden" id="noAdmin">
				<div class="wrap-input100">
					<span class="label-input100">Nama</span>
					<label>
						<input class="input100 nama" type="text" placeholder="Masukkan nama Anda">
					</label>
					<span class="focus-input100"></span>
				</div>

				<div class="wrap-input100">
					<span class="label-input100">Nomor WhatsApp</span>
					<label>
						<input class="input100 nowhatsapp" type="text" placeholder="08xxxxxxxxxx">
					</label>
					<span class="focus-input100"></span>
				</div>


				<div class="wrap-input100">
					<span class="label-input100">Alamat</span>
					<label>
						<textarea class="input100 alamat" placeholder="Masukkan alamat lengkap Anda"></textarea>
					</label>
					<span class="focus-input100"></span>
				</div>

				<div class="container-contact100-form-btn">
					<div class="wrap-contact100-form-btn">
						<div class="contact100-form-bgbtn"></div>
						<a class="contact100-form-btn submit">Kirim</a>
					</div>
				</div>
			</form>
		</div>
	</div>

	<script>
		//no wa admin
		$("#noAdmin").val("08123456789");
		$('.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 .nowhatsapp').val() == '') { // Cek Whatsapp
				ph = $('#whatsapp .nowhatsapp').attr('placeholder');
				alert('Silahkan tulis ' + ph);
				$('#whatsapp .nowhatsapp').focus();
				return false;
			} else if ($('#whatsapp .alamat').val() == '') { // Cek Alamat
				ph = $('#whatsapp .alamat').attr('placeholder');
				alert('Silahkan tulis ' + ph);
				$('#whatsapp .alamat').focus();
				return false;
			} 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(),
					nowhatsapp = $('#whatsapp .nowhatsapp').val(),
					alamat = $('#whatsapp .alamat').val();
				$(this).attr('href', url_wa + '?phone=62 ' + tujuan + '&text=Nama: ' + nama + ' %0ANo. Whatsapp: ' + nowhatsapp + '%0AAlamat: ' + alamat + ' %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>

</body>

</html>

Di postingan selanjutnya, saya sudah memberikan cara membuat form oder otomatis ke WhatsApp dengan nomor admin acak. Artinya, nanti ada beberapa nomor admin, lalu ketika konsumen mengisi form order, mereka akan diarahkan ke salah satu nomor WhatsApp admin secara acak. Ini berguna ketika kita memiliki lebih dari satu Customer Service.

Jadi, buat kamu yang tidak mau ketinggalan postingan saya selanjutnya, silahkan bisa bookmark situs saya ini. Sering-sering saja mampir kesini, siapa tahu kita bisa berkolaborasi buat project bareng. Semoga bermanfaat, dan saya tutup dengan quote andalan saya, “Hidup itu untuk belajar, bukan belajar untuk hidup”. Jangan lupa juga untuk mengisi alamat email kamu di formulir berlangganan di bawah agar kamu mendapat setiap update tutorial dan info menarik dari saya.

Berlangganan Email

Dapatkan tutorial dan info terbaru dari saya.

37 comments on “Membuat Form Order WhatsApp Langsung ke WhatsApp”

    1. Itu dia yang sedang saya rencanakan, cuma kebetulan sedang banyak kerjaan jadi belum sempat bikin video tutorialnya, insyaallah secepatnya..

  1. Postingan yang bagus pak…

    hanya bagaimana cara menambahkan “jumlah produk” ? terimakasih,

    di form pemesanan yang saat ini bapak posting ada “nama”, “alamat” dan No WA…
    Mohon di tambahkan kembali pak ulasan postingannya… atau jika bapak berkenan untuk berbagi via email, terima kasih
    tp secara keseluruhan biasa

    1. bisa dipelajari scriptnya lebih teliti lagi, Insyaallah kalau sudah paham alurnya, kita bisa menambahkan berapapun kolom isian sesuai keinginan kita.

    1. bisa langsung diupload saja ke hosting mas. Misal websitenya domainsaya.com, kalau langsung diuplad di public_html, nanti alamat formnya jadi domainsaya.com/form.html

  2. Terimakasih..postingannya..keren banget pas banget untuk blogspot yg sy cari….. kalau untuk wp sy ada link jualannya…

    1. bisa, tapi kita perlu nambahin script buat bikin popupnya, Insyaallah next time bikin tutorialnya, soalnya sekarang lagi sibuk kerja.

  3. Selamat pagi siang petang gan.
    Saya newbie banget nih, tp alhamdulillah setelah ngikutin semua step nya sambil nonton video nya juga akhirnya saya bisa juga bikin dgn hasil akhir sama kyk di video.

    Nah masalah nyaaa…
    Kan saya bikin web nih, pake wordpress, terus pengen masukin ke wordpress nya bagaimana yaa?

    Btw sebelum nya Terimakasih artikel nua keren banget.. Terkedjoet saya begitu masukin file css ternyata tampilan nya berubah drastis.. Bener bener magic 😀

    1. bisa dengan cara langsung masuk aja ke cpanel hostingnya, lalu ke file mananger, tinggal bikin file seperti pada tutorial ini. Atau bisa juga pake page builder kaya elementor, kita tinggal sisipkan element HTML yang ada di elementor.

  4. terkait dengan pembahasan, apakah bisa membuat form seperti ini tp kombinasi teks dan gambar??… mohon pencerahannya mas.. terima kasih sebelumnya…

  5. Makasih banyak mas ilmunya.. ini yang saya cari cari.. ditunggu untuk sharing whatsapp rotator dan yg bisa ditanam fb pixel.. sukses selalu dan salam kenal pak hartanto

  6. bermanfaat sekali codingnya, saya mencoba memodifikasi dg menambahkan input form yang lain. sy masih bingung class .whatsapp-btn yg ada pada script itu class yg mana dipanggil ? di htmlnya tidak ada class .whatsapp-btn
    mohon pencerahannya mas.
    terima kasih

  7. ini tutorial yang sedang saya cari2, terima kasih mas

    bagaimana cara agar form whatsapp ini bisa otomatis ada di setiap postingan, supaya tidak perlu repot2 lagi memasukannya kedalam postingan blog wordpress

  8. Terimakasih atas ilmunya master,
    mungkin 2 pertanyaan dari saya barang kali berkenan untuk menjawab :
    1. cara agar text area bisa di enter ke baris berikutnya untuk input text
    2. cara agar bisa memunculkan history text inputnya, supaya tiap kali input text tidak berulang – ulang ketik nya di kalimat yang sama

  9. Kak mau tanya kan saya sudah bikin form order terus berhasil nah gimana cara nya alamat forder jadi link biar bisa di share di medsos

  10. Sebelumnya terimaksih sudah share tutorial ini.
    Sangat bermanfaat n work.

    tapi saat mau edit2 dikit malah ga bisa, jadi mau tanya:
    1. Bagaimaba cara menambahkan form lagi?
    Saya sudah menambahkan form lewat HTML yg kodenya:

    Alamat

    Pikir saya, menambah kolom cukup kode itu tinggal diganti2 saja kata “ALAMAT” nya. saat saya ganti, form muncul, tapi saat di kirim, FORM TIDAK MASUK DI WA. Jadi, minta tolong bagaimana caranya menambahkan form agar bisa terkirim via wa juga?

    2. Bagaiaman menghapus link url “VIA URL”. Ada beberapa kondisi yang harus menghilangkan alamat url tersebut.

    3. Bagaimana cara mengganti warna button “KIRIM” jadi hijau warna WA, karena saat saya pasang di blogspot tombol dan warna tulisan KIRIM nya mati, tidak terlihat.

    4. Bagaiaman cara mengganti warna begraound yg biru menjadi putih saja?

    Mohon jawabannya ya, semoga dengan membalas pertanyaaan ini, aagan rejekinya semakin lancar dan sehat selalu.

    Terimakasih 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *