Berikut ini adalah script form order Whatsapp yang bisa segera digunakan yaitu cukup copy lalu edit dan tempel ke halaman website.
Dengan memakai form order Whatsapp berikut, maka konsumen bisa isi form order sendiri lalu ketika klik tombol WA dibagian bawah akan mengarah ke nomor WA kita.
Form order WA yang bisa dipasang di web berikut bisa digunakan untuk website travel, karena memang di desain demikian.
Sebelum digunakan, silahkan ganti nama travel dan nomor hp dengan nomor hp travel yang bersangkutan (warnanya merah).
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Custom Form Order Whatsapp</title>
<style>
body {
font-family: ‘Roboto’, Arial, sans-serif
}
.none {
display: none
}
/* Input Field CSS */
.kolominput {
position: relative;
margin: 5px 0 20px
}
.kolominput p {
font-size: 12px;
background: #eee;
display: inline-block;
padding: 5px 15px;
border-radius: .5rem
}
.form-wa textarea {
min-height: 120px
}
.kolominput select {
padding: 12px 0;
color: #555;
font-size: 14px;
width: 100%;
border: 0;
border-bottom: 1px solid #ddd;
outline: none;
background: #fff
}
.kolominput input,
.kolominput textarea {
font-size: 15px;
padding: 15px 0;
display: block;
width: 100%;
border: none;
border-bottom: 1px solid #ddd
}
.kolominput input:focus,
.kolominput textarea:focus {
outline: none
}
.kolominput label {
color: #999;
font-size: 14px;
font-weight: 400;
position: absolute;
pointer-events: none;
left: 0;
top: 0px;
transition: .2s ease all
}
.kolominput input:focus~label,
.kolominput input:valid~label,
.kolominput textarea:focus~label,
.kolominput textarea:valid~label {
top: -10px;
font-size: 14px;
color: #21a51f
}
.bar {
position: relative;
display: block;
width: 100%
}
.bar:before,
.bar:after {
content: ”;
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #21a51f;
transition: .2s ease all
}
.bar:before {
left: 50%
}
.bar:after {
right: 50%
}
.kolominput input:focus~.bar:before,
.kolominput input:focus~.bar:after,
.kolominput textarea:focus~.bar:before,
.kolominput textarea:focus~.bar:after {
width: 50%
}
.indigox {
background: #3f51b5
}
.orangex {
background: #ff9800
}
.pinkx {
background: #e91e63
}
.bluex {
background: #2196F3
}
.purplex {
background: #9c27b0
}
.redx {
background: #F44336
}
.greenx {
background: #4CAF50
}
.highlight {
position: absolute;
height: 50%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: .5
}
.kolominput input:focus~.highlight,
.kolominput textarea:focus~.highlight {
animation: inputHighlighter .3s ease
}
.kolominput input:focus~label,
.kolominput input:valid~label,
.kolominput textarea:focus~label,
.kolominput textarea:valid~label {
top: -10px;
font-size: 13px;
color: #21a51f
}
form.form-wa {
box-shadow: 0 1px 6px rgba(32, 33, 36, .28);
border-radius: .5rem;
padding: 20px;
box-sizing: border-box;
color: #444;
font-size: 14px;
line-height: 1.5;
}
.form-wa a.send_form {
color: #fff;
background: #21a51f;
text-decoration: none;
display: inline-block;
padding: 10px 25px;
border-radius: .3rem;
font-weight: 700;
letter-spacing: .5px;
font-size: 15px;
}
#text-info span {
display: block;
padding: 10px 15px;
text-align: center;
font-weight: 700;
margin: 15px 0;
border-radius: .5rem;
}
#text-info span.yes {
background: #c6ffc5;
color: #0ea904;
}
#text-info span.no {
background: #ffc5c5;
color: #ce0404;
}
.form-wa {
width: 100%;
max-width: 700px;
margin: 0 auto;
box-sizing: border-box;
}
</style>
<script src=’https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js’></script>
</head>
<body>
<form class=”form-wa”>
<div class=”kolominput”>
<input class=”validate” id=”wa_name” name=”name” required=”” type=”text” value=” />
<span class=”highlight”></span><span class=”bar”></span>
<label>Nama Lengkap:</label>
</div>
<div class=”kolominput”>
<input class=”validate” id=”wa_email” name=”email” required=”” type=”email” value=” />
<span class=”highlight”></span><span class=”bar”></span>
<label>Alamat Email:</label>
</div>
<div class=”kolominput”>
<textarea id=’wa_address_pickup’ placeholder=” maxlength=’5000′ row=’1′ required=””></textarea>
<span class=”highlight”></span><span class=”bar”></span>
<label>Alamat Penjemputan:</label>
</div>
<div class=”kolominput”>
<textarea id=’wa_address_destination’ placeholder=” maxlength=’5000′ row=’1′ required=””></textarea>
<span class=”highlight”></span><span class=”bar”></span>
<label>Alamat Tujuan:</label>
</div>
<div class=”kolominput”>
<input class=”validate” id=”wa_datetime” name=”datetime” required=”” type=”datetime-local” value=” />
<span class=”highlight”></span><span class=”bar”></span>
<label>Tanggal & Jam Penjemputan:</label>
</div>
<div class=”kolominput”>
<input class=”validate” id=”wa_passengers” name=”passengers” required=”” type=”number” value=” />
<span class=”highlight”></span><span class=”bar”></span>
<label>Jumlah Penumpang:</label>
</div>
<div class=”kolominput”>
<input class=”validate” id=”wa_phone” name=”phone” required=”” type=”tel” value=” />
<span class=”highlight”></span><span class=”bar”></span>
<label>No. Telpon:</label>
</div>
<div class=”kolominput”>
<textarea id=’wa_items’ placeholder=” maxlength=’5000′ row=’1′ required=””></textarea>
<span class=”highlight”></span><span class=”bar”></span>
<label>Barang yang Dibawa:</label>
</div>
<a class=”send_form” href=”javascript:void” type=”submit” title=”Send to Whatsapp”>Send to Whatsapp</a>
<div id=”text-info”></div>
</form>
<script>//<![CDATA[
$(document).on(‘click’, ‘.send_form’, function () {
var input_email = document.getElementById(‘wa_email’);
// Whatsapp Settings
var walink = ‘https://wa.me’,
phone = ‘6285972737000‘,
walink2 = ‘????INFO PNP GANI TRAVEL????’,
text_yes = ‘Terkirim.’,
text_no = ‘Isi semua Formulir lalu klik Send.’;
// Smartphone Support
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
walink = ‘whatsapp://send’;
}
if (input_email.value !== “”) {
// Get input values
var input_name = $(“#wa_name”).val(),
input_email = $(“#wa_email”).val(),
input_address_pickup = $(“#wa_address_pickup”).val(),
input_address_destination = $(“#wa_address_destination”).val(),
input_datetime = $(“#wa_datetime”).val(),
input_passengers = $(“#wa_passengers”).val(),
input_phone = $(“#wa_phone”).val(),
input_items = $(“#wa_items”).val();
// Validate Date and Time
var isValidDatetime = /^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2})$/.test(input_datetime);
if (!isValidDatetime) {
alert(“Invalid Date and Time format. Please use the correct format.”);
return;
}
// Validate Number of Passengers
if (isNaN(input_passengers) || input_passengers <= 0) {
alert(“Invalid number of passengers. Please enter a valid number.”);
return;
}
// Construct Whatsapp Message
var message = `${walink2}%0A%0A*Nama* : ${input_name}%0A*Email Address* : ${input_email}%0A*Alamat Penjemputan* : ${input_address_pickup}%0A*Alamat Tujuan* : ${input_address_destination}%0A*Tanggal & Jam Penjemputan* : ${input_datetime}%0A*Jumlah Penumpang* : ${input_passengers}%0A*No Telp* : ${input_phone}%0A*Barang yang Dibawa* : ${input_items}%0A`;
// Construct Whatsapp URL
var pesan_order = walink + ‘?phone=’ + phone + ‘&text=’ + walink2 +
‘%0A%0A’ + ‘???? Nama Lengkap: ‘ + input_name +
‘%0A%0A’ + ‘???? Email Address: ‘ + input_email +
‘%0A%0A’ + ‘???? Alamat Penjemputan: ‘ + input_address_pickup +
‘%0A%0A’ + ‘???? Alamat Tujuan: ‘ + input_address_destination +
‘%0A%0A’ + ‘???? Tanggal dan Jam Penjemputan: ‘ + input_datetime +
‘%0A%0A’ + ‘???? Jumlah Pengumpang: ‘ + input_passengers +
‘%0A%0A’ + ‘☎️ No. Telp: ‘ + input_phone +
‘%0A%0A’ + ‘???? Barang Yang Dibawa: ‘ + input_items + ‘%0A’;
// Open Whatsapp Window
window.open(pesan_order, ‘_blank’);
$(“#text-info”).html(‘<span class=”yes”>’ + text_yes + ‘</span>’);
} else {
$(“#text-info”).html(‘<span class=”no”>’ + text_no + ‘</span>’);
}
});
//]]>
</script>
</body>
</html>
Cukup copy code script diatas, lalu edit nama travel dan nomor hpnya, lalu paste di website baik di halaman text maupun di elementor bebas.
Terimakasih kepada https://www.panduancode.com/2023/11/script-form-order-whatsaap.html#gsc.tab=0 yang telah membagikan kode form order WA di atas.