BLANTERVIO103
Home› Tutorial› Membuat Form Checkout Whatsapp Dengan HTML

Membuat Form Checkout Whatsapp Dengan HTML

Membuat Form Checkout Whatsapp Dengan HTML
Friday, October 9, 2020
Form Checkout Whatsapp Dengan HTML

Arenapublik.com -  Membuat formulir online untuk checkout barang atau orderan menggunakan whatsapp untuk saat ini sedang dicari-cari, terutama bagi mereka pelaku bisnis. Form ini juga membantu para penjual untuk melakukan rekap dari data calon customer, sehingga mereka tidak perlu repot-repot lagi melakukan copy paste format yang sudah ada, melainkan calon pelanggan diminta untuk langsung mengisi formulir dan kirim formulir yang sudah dibuat. Sehingga admin penjual pun bisa dengan mudah merekap seluruh data pembelian. 

Pada kesempatan ini, kami ingin membahas sedikit mengenai pembuatan form checkout whatsapp dengan HTML. Mungkin di luar sana sudah banyak bertebaran tutorial nya, tetapi pada artikel yang kami buat akan cukup berbeda, dikarenakan kami ingin membahas cukup detail agar kalian bisa mengembangkan lagi form whatsapp yang sudah ada. 

Untuk artikel ini pun kami tidak seluruhnya membuat sendiri, karena ada dari referensi lain yang kami coba edit agar mudah penyampaian kepada pembaca setia arenapublik. Sudah jelas, kami ingin memberikan edukasi terbaik kepada para pembaca sehingga bisa menjadi pengunjung setia kami. 

Membuat Form Checkout Whatsapp

Sebelumnya, kami berasumsi kalian sudah mengerti sedikit sedikit terkait bahasa HTML dan CSS, dikarenakan untuk mempercantik tampilan kita memerlukan beberapa definisi sript dari CSS juga. Dan ada tambahan javascript sebaga action dari form tersebut. 

Silahkan kalian buka notepad atau sejenisnya yang bisa digunakan untuk save file menjadi ekstensi HTML, lalu copy dan paste seluruh script yang ada di bawah box ini.

<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;
}
.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: #29c9ff;
}
.wrap-contact100 {
width: 500px;
background: #fff;
border-radius: 10px;
overflow: hidden;
padding: 42px 55px 45px 55px;
}
.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;
}
.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%;
}
.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: #29c9ff;
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);
}
@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">
Form WhatsApp
</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="Masukkan nomor 

HP">
</label>
<span class="focus-input100"></span>
</div>

<div class="wrap-input100">
<span class="label-input100">Jumlah Order</span>
<label>
<input class="input100 jumlahorder" type="text" placeholder="Jumlah order 

produk">
</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"></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("085xxxxxxx");
$('.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 .jumlahorder').val() == '') { // Cek Whatsapp
ph = $('#whatsapp .jumlahorder').attr('placeholder');
alert('Silahkan tulis ' + ph);
$('#whatsapp .jumlahorder').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(),
                                        jumlahorder = $('#whatsapp .jumlahorder').val(), 
alamat = $('#whatsapp .alamat').val();
$(this).attr('href', url_wa + '?phone=62 ' + tujuan + '&text=Nama: ' + nama + ' %0ANo. 

Whatsapp: ' + nowhatsapp + '%0AJumlah: ' + jumlahorder + '%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>

Jika sudah dicopy dan paste, silahkan save dengan filename sesuai keingnan kalian masing-masing, jika berhasil maka akan muncul tampilan seperti di bawah ini. 

form checkout wa html


Penjelasan Koding

Untuk mempermudah proses edit agar kalian bisa menyesuaikan sesuai kebutuhan masing-masing, kami akan menjelaskan beberapa step penting atau bagian penting yang bisa digunakan untuk menambah atau mengurangi form checkout tersebut.
  • Pada warna merah: Terdapat penjelasan nomor admin, pada nomor yang sudah diberikan contohnya tersebut, silahkan kalian ganti dengan nomor whatsapp kalian masing-masing ya. Agar seluruh form order yang telah diisi akan terkirim menuju whatsapp kalian.
  • Warna orange: Fitur yang digunakan untuk menambahkan atau mengurangi form secara tampilan, jadi kalau kalian ingin menambahkan form silahkan kalian copy dan paste kode yang berwarna orange, dan tulis form sesuai kebutuhan kalian masing-masing. Contohnya bisa menambahkan ukuran baju, sepatu, ataupun yang lainnya. 
  • Warna biru: Adalah kode javascript yang mendefinisikan tambahan dari kode warna orange sebelumnya, usahakan kalian sesuaikan definisi nya ya. Jika ingin menambahkan ukuran, usahakan definisi tambahan keseluruhan menjadi ukuran semua. 
  • Warna ungu: Penjelasan kode dari javascript juga yang menangkap perintah dari form order tersebut, jadi misalnya kita menulis jumlah order sebanyak "3 buah" maka hasil yang ditampilkan juga berupa 3 buah. Karena difungsikan untuk menangkap kode yang telah diinputkan.
  • Warna hijau: Terakhir adalah warna hijau, yang digunakan untuk menampilkan form yang telah ditulis ke room chat whatsapp sesuai nomor tujuan yang sudah kita setting sebelumnya pada warna merah. 
Harus diingat, setiap kode saling berkaitan. Jika kalian belum memahami kode tersebut secara menyeluruh, ada baiknya kalian langsung copy paste dan menjalankan script tersebut untuk memahami lebih dalam dan melakukan eksperimen untuk membuat form checkout whatsapp dengan HTML lebih baik.

Sekian dulu artikel sederhana yang dapat kami berikan, semoga membuat form checkout whatsapp dengan HTML dapat kalian pahami dengan baik dan menjadi manfaat bagi kalian yang sedang mencari tutorialnya. Jangan lupa untuk share artikel ini agar orang lain bisa belajar juga mengenai kode HTML, terimakasih.

Share This Article :
Arenapublik

TAMBAHKAN KOMENTAR

avatar
Rudi Chandra October 9, 2020 at 7:24 PM

Tutorial yang sangat bermanfaat nih Mas.
Terima kasih buat ilmunya ya Mas.
Jadi bisa nambah-nambah pengetahuan juga.

Balas
avatar
Rey - reyneraea.com October 20, 2020 at 9:01 PM

Menarik nih, wajib di save nih, ini bermanfaat banget buat marketing ya :)

Balas
9127155806442794821