Nirwanapedia – Halo Sobat Pedia, Pada Kesempatan Kali Ini Nirwanapedia Akan Membagikan Tutorial Cara Membuat Form Order Checkout Menuju WhatsApp Di Blogger. Seperti Namanya Form Order Seringkali Kita Jumpai Pada Saat Melakukan Checkout Pada Sebuah Website Maupun Toko Online.
Penggunaan Form Order Pada Sebuah Website Toko Online Merupakan Hal Yang Wajib Bagi Setiap Pedagang Untuk Memberikan Informasi Barang Yang Akan Di Beli Oleh Calon Pembeli Nantinya. Informasi Tersebut Dapat Berupa Nama, Alamat, No.Hp Dan Jenis Barang Itu Sendiri.
Form Order Adalah
Form Order Adalah Sebuah Formulir Yang Biasanya Sering Digunakan Dalam Transaksi Antara Penjual Dan Pembeli Yang Terjadi Secara Online.
Form Order Sering Kita Jumpai Saat Hendak Berbelanja Secara Online, Baik
Melalui E-Commerce Terkemuka, Maupun Melalui Website Dan Juga Media
Sosial.
Bagian Dari Form Order Online Biasanya Terdiri Dari Data Diri Kita
Sebagai Pembeli (Nama, Alamat, No.Hp Dan Alamat E-Mail) Serta Barang Atau
Jasa Apa Yang Ingin Kita Beli.
Order Form Atau Formulir Order Bertujuan Untuk Memberikan Informasi
Kepada Penjual Bahwa Calon Customer Tersebut Telah Setuju Untuk Membeli Suatu Barang
Atau Jasa Yang Ditawarkan.
Contoh Form Order Barang Online
Ada Berbagai Macam Contoh Order Form Barang Online Yang Bisa Sobat
Pedia Temukan Di Internet Maupun Marketplace Seperti Shopee, Tokopedia,
Lazada dll.
Namun Kali Ini Nirwanapedia Hanya Akan Membahas Beberapa Contoh Order
Form Barang Online Yang Paling Sering Digungakan Pada Sebuah Website
Online Shop.
Berikut ini Adalah Contoh Order Form Barang Online :
Dari Beberapa Contoh Order Form Barang Online Di Atas, Sobat Pedia Bisa
Memilih Salah Satu Model Yang Ingin Digunakan Dalam Website Online Shop
Kalian. Ada Berbagai Macam Metode Yang Sobat Pedia Bisa Gunakan Untuk
Membuat Order Form Online Tersebut.
Salah Satunya Adalah Menggunakan Html. Yang Dapat Dengan Mudah Sobat Pedia
Terapkan Secara Langsung Untuk Ditaruh Pada Website Kalian.
Namun Bagaimana Cara Membuat Order Form Barang Online Menggunakan Html? Sobat Pedia Tidak Perlu Khawatir Karena Pada Kesempatan Kali Ini Nirwanapedia Akan Memberikan Template Order Form Online By WhatsApp Html Gratis.
Script Code Form Order WhatsApp Html
Template Form Order Barang Online Ke WhatsApp Otomatis Ini Dapat Sobat
Pedia Terapkan Pada Website Online Shop Kalian. Seperti Namanya Template Ini
Dapat Di Gunakan Pada Perangkat PC Maupun Smartphone Tanpa Mengurangi
Kualitas Tampilannya Karena Sudah Bersifat Responsive Untuk Semua
Perangkat.
Oke Langsung Saja Berikut Ini Adalah Script Code Form Order Barang Online Otomatis Ke WhatsApp. Sobat Pedia Tinggal Copy Dan Paste Kan Saja Code Nya Pada Website Kalian.
<HTML>
<head>
<title>Whatsapp</title>
<style type="text/css">
body{font-family:'Roboto',Arial,sans-serif}.none{display:none}
/* Input Field CSS */
.datainput{position:relative;margin:5px 0 20px}.datainput p{font-size:12px;background:#eee;display:inline-block;padding:5px 15px;border-radius:.5rem}.whatsapp-form textarea{min-height:120px}.datainput select{padding:12px 0;color:#555;font-size:14px;width:100%;border:0;border-bottom:1px solid #ddd;outline:none;background:#fff}.datainput input,.datainput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.datainput input:focus,.datainput textarea:focus{outline:none}.datainput label{color:#999;font-size:14px;font-weight:400;position:absolute;pointer-events:none;left:0;top:18px;transition:.2s ease all}.datainput input:focus~label,.datainput input:valid~label,.datainput textarea:focus~label,.datainput textarea:valid~label{top:-10px;font-size:14px;color:#21a51f}#notif-license span{font-size:40px}#notif-license{display:none;position:fixed}.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%}.datainput input:focus~.bar:before,.datainput input:focus~.bar:after,.datainput textarea:focus~.bar:before,.datainput 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}.datainput input:focus~.highlight,.datainput textarea:focus~.highlight{animation:inputHighlighter .3s ease}.datainput input:focus~label,.datainput input:valid~label,.datainput textarea:focus~label,.datainput textarea:valid~label{top:-10px;font-size:13px;color:#21a51f}
/* Default Whatsapp */
form.whatsapp-form {
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;
}
.whatsapp-form 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;
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"/>
</head>
<body>
<form class="whatsapp-form">
<div class="datainput">
<input class="validate" id="wa_name" name="name" required="" type="text" value=''/>
<span class="highlight"></span><span class="bar"></span>
<label>Your Name</label>
</div>
<div class="datainput">
<input class="validate" id="wa_email" name="email" required="" type="email" value=''/>
<span class="highlight"></span><span class="bar"></span>
<label>Email Address</label>
</div>
<div class="datainput">
<select id="wa_select">
<option hidden='hidden' selected='selected' value='default'>Select Product</option>
<option value="1">YouTube Subscribers</option>
<option value="2">YouTube Watch Hours</option>
<option value="3">YouTube Channel Non Monetization</option>
<option value="4">YouTube Channel Monetization</option>
<option value="5">Google AdSense</option>
<option value="6">Instagram Followers/Like/Views</option>
<option value="7">TikTok Followers/Like/Views</option>
<option value="8">Facebook Followers/Like/Views</option>
<option value="9">RDP Ram 4GB/8GB/16GB/32GB</option>
<option value="10">Digital Content</option>
<option value="11">Canva Pro 1Bulan/1Tahun/Lifetime</option>
<option value="12">Logo, Banner, Resume, Invitations, Etc.</option>
</select>
</div>
<div class="datainput">
<input class="validate" id="wa_number" name="count" required="" type="number" value=''/>
<span class="highlight"></span><span class="bar"></span>
<label>WhatsApp Number</label>
</div>
<div class="datainput">
<input class="validate" id="wa_url" name="url" required="" type="url" value=''/>
<span class="highlight"></span><span class="bar"></span>
<label>URL/Link</label>
<p>Link : https://</p>
</div>
<div class="datainput">
<textarea id='wa_textarea' placeholder='' maxlength='5000' row='1' required=""></textarea>
<span class="highlight"></span><span class="bar"></span>
<label>Description</label>
<p>Example : I Want to Order 500 YouTube Subscriber</p>
</div>
<a class="send_form" href="javascript:void" type="submit" title="Send to Whatsapp">Send to Whatsapp</a>
<div id="text-info"></div>
</form>
<center></center>
<script type="text/javascript">
//<![CDATA[
$(document).on('click','.send_form', function(){
var input_blanter = document.getElementById('wa_email');
/* Whatsapp Settings */
var walink = 'https://web.whatsapp.com/send',
phone = '6285156804211',
walink2 = 'New Order',
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)) {
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_textarea1 = $("#wa_textarea").val();
/* Final Whatsapp URL */
var blanter_whatsapp = walink + '?phone=' + phone + '&text=' + walink2 + '%0A%0A' +
'*Name* : ' + input_name1 + '%0A' +
'*Email Address* : ' + input_email1 + '%0A' +
'*Detail Product* : ' + input_select1 + '%0A' +
'*WhatsApp Number* : ' + input_number1 + '%0A' +
'*URL/Link* : ' + input_url1 + '%0A' +
'*Description* : ' + input_textarea1 + '%0A';
/* Whatsapp Window Open */
window.open(blanter_whatsapp,'_blank');
document.getElementById("text-info").innerHTML = '<span class="yes">'+text_yes+'</span>';
} else {
document.getElementById("text-info").innerHTML = '<span class="no">'+text_no+'</span>';
}
});
//]]>
</script>
<div class='none'></div>
</body>
</HTML>
Cara Membuat Form Order WhatsApp Di Blogger
Kali Ini Nirwanapedia Akan Memberikan Contoh Bagaimana Cara Membuat Form Order WhatsApp Pada Platform Blogger. Jadi Bagi Sobat Pedia Yang
Menggunakan Blogger Dan Ingin Membuat Order Form Barang Secara Online, Bisa
Simak Langkah – Langkahnya Berikut ini.
Langkah – Langkah Cara Memasang Template Order Form Di Blogger :
- Silahkan Login Ke Dalam Akun Blogger Sobat Pedia
- Selanjutnya Pilih Menu Halaman (Page)
- Silahkan Membuat Halaman Baru
- Berikan Judul “Order Form” Atau Sesuaikan Dengan Keinginan Sobat Pedia
- Selanjutnya, Ubah Tampilannya Ke Mode Html Terlebih Dahulu
- Lalu Paste Kan Code HTML Yang Sudah Di Copy Tadi Ke Dalam Halaman Blogger
Sampai Disini Form Order Barang Online Sudah Jadi. Silahkan Ganti Nomor
WhatsApp Dan Informasi Lainnya Sesuai Dengan Yang Sobat Pedia
Inginkan.
Bagaimana Cukup Mudah Bukan? Itu Tadi Adalah Cara Membuat Form Order Barang Online Otomatis Ke WhatsApp Yang Bisa Sobat Pedia Gunakan Pada Website Kalian.
Jika Masih Mengalami Kesulitan Kalian Bisa Tinggalkan Pertanyaan di Kolom Komentar. Sekian Tutorial Kali Ini Sampai Ketemu Di Artikel Selanjutnya.