<html>
<head>
<title>Order Form To WhatsApp</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="col-lg-6 col-lg-offset-3">
<h4>Make Order Form To WhatsApp</h4>
<div class="panel panel-success">
<div class="panel-heading">
Send To WhatsApp
</div>
<div class="panel-body">
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Name" id="name">
</div>
<div class="form-group">
<label>E-mail</label>
<input type="email" name="email" class="form-control" placeholder="E-mail" id="email">
</div>
<div class="form-group">
<label>No. WhatsApp</label>
<input type="text" name="phone" class="form-control" placeholder="No. WhatsApp" id="phone">
</div>
<div class="form-group">
<label>Choose Product</label>
<select name="product" class="form-control" id="product">
<option value="">-- Choose Package --</option>
<option value="produk_1">Package 1</option>
<option value="produk_2">Package 2</option>
<option value="produk_3">Package 3</option>
<option value="produk_4">Package 4</option>
</select>
</div>
<div class="form-group">
<label>Additional Note </label>
<textarea name="description" class="form-control" rows="3" id="description"></textarea>
</div>
<div class="form-group">
<button class="btn btn-success send">Send Form Via WhatsApp</button>
</div>
<div id="text-info"></div>
</div>
</div>
</div>
</div>
</body>
</html>body {
background-image: url("https://partner.kliendk.my.id/wp-content/uploads/2017/07/blog-cute-ty.jpg");
background-color: #f2f2f2;
background-size:cover;
}
.panel-heading {
background-color: #f2f2f2;
}$(document).on('click','.send', function(){
/* Form Input */
var input_name = $("#name").val(),
input_email = $("#email").val(),
input_phone = $("#phone").val(),
input_product = $("#product").val(),
input_description = $("#description").val();
/* Whatsapp Setting */
var walink = 'https://web.whatsapp.com/send',
phone = '6289605552515',
text = 'Hello I want to make website',
text_yes = 'Your order was successfully sent.',
text_no = 'Fill this form to order.';
/* Smartphone Support */
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var walink = 'whatsapp://send';
}
if(input_name != "" && input_phone != "" && input_product != ""){
/* Whatsapp URL */
var checkout_whatsapp = walink + '?phone=' + phone + '&text=' + text + '%0A%0A' +
'*Nama* : ' + input_name + '%0A' +
'*Email* : ' + input_email + '%0A' +
'*No. Whatsapp* : ' + input_phone + '%0A' +
'*Product* : ' + input_product + '%0A' +
'*Additional Note* : ' + input_description + '%0A';
/* Whatsapp Window Open */
window.open(checkout_whatsapp,'_blank');
document.getElementById("text-info").innerHTML = '<div class="alert alert-success">'+text_yes+'</div>';
} else {
document.getElementById("text-info").innerHTML = '<div class="alert alert-danger">'+text_no+'</div>';
}
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.
