
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>Konfirmasi Pesanan via WhatsApp</title>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'>
document.addEventListener("keyup", function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode == 44) {
stopPrntScr();
}
});
function stopPrntScr() {
var inpFld = document.createElement("input");
inpFld.setAttribute("value", ".");
inpFld.setAttribute("width", "0");
inpFld.style.height = "0px";
inpFld.style.width = "0px";
inpFld.style.border = "0px";
document.body.appendChild(inpFld);
inpFld.select();
document.execCommand("copy");
inpFld.remove(inpFld);
}
function AccessClipboardData() {
try {
window.clipboardData.setData('text', "Access Restricted");
} catch (err) {}
}
setInterval("AccessClipboardData()", 300);
</script>
<style>
:root {
--primary-color: rgb(11, 78, 179)
}
*,
*::before,
*::after {
box-sizing: border-box
}
/* body {
font-family: Montserrat, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
display: grid;
place-items: center;
min-height: 100vh;
background-color: #0b4eb3
} */
body {
font-family: Montserrat, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
/* margin: 0; */
/* display: grid; */
/* place-items: center; */
/* min-height: 100vh; */
background-color: transparent;
}
label {
display: block;
margin-bottom: 0.5rem
}
input {
display: block;
width: 100%;
padding: 0.75rem;
border: 1px solid #ccc;
border-radius: 0.25rem;
height: 50px
}
textarea {
display: block;
width: 100%;
padding: 0.75rem;
border: 1px solid #ccc;
border-radius: 0.25rem;
line-height: 1.5;
}
select#wa_select {
display: block;
width: 100%;
padding: 0.75rem;
border: 1px solid #ccc;
border-radius: 0.25rem;
height: 50px;
}
.width-50 {
width: 50%
}
.ml-auto {
margin-left: auto
}
.text-center {
text-align: center
}
.progressbar h4 {
text-align: center;
margin-bottom: 45px;
}
.form {
/* width: clamp(320px, 30%, 430px); */
/* margin: 0 auto; */
width: 94%;
margin: 0 3%;
border: none;
border-radius: 10px !important;
overflow: hidden;
background-color: transparent;
padding: 10px;
}
.step-forms {
display: none;
transform-origin: top;
animation: animate 1s
}
.step-forms-active {
display: block
}
.group-inputs {
margin: 1rem 0
}
@keyframes animate {
from {
transform: scale(1, 0);
opacity: 0
}
to {
transform: scale(1, 1);
opacity: 1
}
}
.btns-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem
}
.btn {
padding: 0.75rem;
display: block;
text-decoration: none;
background-color: var(--primary-color);
color: #f3f3f3;
text-align: center;
border-radius: 10px;
cursor: pointer;
transition: 0.3s
}
.btn:hover {
box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--primary-color)
}
.progress-step-check {
position: relative;
background-color: green !important;
transition: all 0.8s
}
.progress-step-check::before {
position: absolute;
content: '\2713';
width: 100%;
height: 100%;
top: 8px;
left: 13px;
font-size: 12px
}
.group-inputs {
position: relative
}
.group-inputs label {
font-size: 13px;
position: absolute;
height: 19px;
padding: 4px 7px;
top: -14px;
left: 10px;
color: #a2a2a2;
background-color: #fff;
border-radius: 5px;
}
.welcome {
height: 450px;
width: 350px;
background-color: #fff;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center
}
.welcome .content {
display: flex;
align-items: center;
flex-direction: column
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: #7ac142;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
}
.checkmark {
width: 56px;
height: 56px;
border-radius: 50%;
display: block;
stroke-width: 2;
stroke: #fff;
stroke-miterlimit: 10;
margin: 10% auto;
box-shadow: inset 0px 0px 0px #7ac142;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards
}
@keyframes stroke {
100% {
stroke-dashoffset: 0
}
}
@keyframes scale {
0%,
100% {
transform: none
}
50% {
transform: scale3d(1.1, 1.1, 1)
}
}
@keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #7ac142
}
}
.text-muted {
text-align: center !important;
display: block;
font-size: 12px;
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
margin-top: 10px;
padding: 10px;
border-radius: 5px;
}
.text-danger {
text-align: center !important;
display: block;
font-size: 12px;
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
margin-top: 10px;
padding: 10px;
border-radius: 5px;
}
.alert-info {
text-align: center !important;
display: block;
font-size: 12px;
color: #0c5460;
background-color: #d1ecf1;
border-color: #bee5eb;
margin-top: 10px;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body class='snippet-body'>
<script>
$(document).on('click', '.send_form', function() {
var input_blanter = document.getElementById('wa_email');
/* Whatsapp Settings */
var walink = 'https://api.whatsapp.com/send',
phone = '6281248803652',
walink2 = 'Halo saya ingin mengonfirmasi pesanan saya. Berikut data-datanya: ',
text_yes = 'Pesanan Anda berhasil dikonfirmasi.',
text_no = 'Isi semua bidang lalu klik Kirim.';
/* Smartphone Support */
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var walink = 'whatsapp://send';
}
if ("" != input_blanter.value) {
/* Call Input Form */
var input_select1 = $("#wa_select :selected").text(),
input_name1 = $("#wa_name").val(),
input_email1 = $("#wa_email").val(),
input_number1 = $("#wa_number").val(),
input_url1 = $("#wa_url").val(),
input_alamat1 = $("#wa_alamat").val(),
input_textarea1 = $("#wa_textarea").val();
/* Final Whatsapp URL */
var blanter_whatsapp = walink + '?phone=' + phone + '&text=' + walink2 + '%0A%0A' + '*Nama Lengkap*: ' + input_name1 + '%0A' + '*Email*: ' + input_email1 + '%0A' + '*Produk*: ' + input_select1 + '%0A' + '*Nomor WA*: ' + input_number1 + '%0A' + '*Alamat Lengkap*: ' + input_alamat1 + '%0A' + '*Website*: ' + input_url1 + '%0A' + '*Deskripsi Pesanan*: ' + input_textarea1 + '%0A';
/* Whatsapp Window Open */
window.open(blanter_whatsapp, '_blank');
document.getElementById("text-info").innerHTML = '<span class="yes text-muted">' + text_yes + '</span>';
} else {
document.getElementById("text-info").innerHTML = '<span class="no text-danger">' + text_no + '</span>';
}
});
</script>
<form action="#" class="form whatsapp-form" id="forms" onsubmit="event.preventDefault()">
<div class="progressbar">
<h4>Konfirmasi Pembayaran</h4>
</div>
<div class="step-forms step-forms-active">
<div class="group-inputs datainput">
<label for="username">Nama lengkap</label>
<span class="highlight"></span>
<span class="bar"></span>
<input class="validate" id="wa_name" name="name" required type="text" value='' />
</div>
<div class="group-inputs datainput">
<label for="email">Email</label>
<span class="highlight"></span>
<span class="bar"></span>
<input class="validate" id="wa_email" name="email" required type="email" value='' />
</div>
<div class="group-inputs datainput">
<label>Nomor Whatsapp</label>
<span class="highlight"></span>
<span class="bar"></span>
<input class="validate" id="wa_number" name="count" required type="number" value='' />
</div>
<div class="group-inputs datainput">
<label>Alamat Lengkap</label>
<span class="highlight"></span>
<span class="bar"></span>
<input class="validate" id="wa_alamat" name="count" required type="alamat" value='' />
</div>
<div class="group-inputs datainput">
<label>URL/Link</label>
<span class="highlight"></span>
<span class="bar"></span>
<input class="validate" id="wa_url" name="url" required type="url" value='' />
<p class="alert-info">Link web Anda, gunakan http:// atau https://</p>
</div>
<div class="group-inputs datainput">
<label for="produk">Produk</label>
<select name="produk" id="wa_select">
<option hidden='hidden' selected='selected' value='default'>Pilih</option>
<option value="1">Pilihan 1</option>
<option value="2">Pilihan 2</option>
<option value="3">Pilihan 3</option>
<option value="4">Pilihan 4</option>
</select>
</div>
<div class="group-inputs datainput">
<label for="pesan">Pesan</label>
<span class="highlight"></span>
<span class="bar"></span>
<textarea id='wa_textarea' placeholder='' maxlength='5000' rows="2" required></textarea>
</div>
<div class="">
<a class="send_form btn btn-next width-50 ml-auto" href="javascript:void" type="submit" title="Send to Whatsapp">Kirim</a>
<div id="text-info"></div>
</div>
</div>
</form>
</body>
</html>
Catatan:
- Untuk mengubah nomor HP admin, silakan temukan baris kode ini
phone = '6281248803652',
- Anda juga dapat menyesuaikan kalimat yang digunakan pada bagian-bagian di bawah ini
walink2 = 'Halo saya ingin mengonfirmasi pesanan saya. Berikut data-datanya: ',
text_yes = 'Pesanan Anda berhasil dikonfirmasi.',
text_no = 'Isi semua bidang lalu klik Kirim.';
- Untuk text yang ditebalkan, silakan ubah pada baris kode di bawah ini
var blanter_whatsapp = walink + '?phone=' + phone + '&text=' + walink2 + '%0A%0A' + '*Nama Lengkap*: ' + input_name1 + '%0A' + '*Email*: ' + input_email1 + '%0A' + '*Produk*: ' + input_select1 + '%0A' + '*Nomor WA*: ' + input_number1 + '%0A' + '*Alamat Lengkap*: ' + input_alamat1 + '%0A' + '*Website*: ' + input_url1 + '%0A' + '*Deskripsi Pesanan*: ' + input_textarea1 + '%0A';
- Data-data yang lain dapat disesuaikan dengan kebutuhan