Cara Membuat Formulir Pesanan Via WhatsApp

Formulir pesanan atau orderan biasanya sudah tersedia pada template yang digunakam, baik itu menggunakan blogger atau wordpress.
calondesain.com
Bagi anda pengguma wp atau wordpress, tentu sangatlah mudah untuk memasang formulir pemesanan dengan plugin yang sudah disediakan para developer baik itu yang gratis dan berbayar.

Pada tutorial kali ini, saya akan berbagi informasi tentang Cara Membuat Formulir Pemesanan Via WhatsApp dengan code atau script yang sebelumnya sudah saya coba di media offline.

Langsung saja, sebelum memulai alangkah baiknya anda download dan instal terlebih dahulu aplikasi anWritter Free di google playstore gratis.

Setelah itu, buka aplikasi tersebut di ponsel anda. Buat struktur HTML seperti dibawah ini:

<html>
<head>

<title></title>

</head>

<body>

</body>

</html>
Silahkan copy kode CSS dibawah ini dan tempelkan tepat diatas kode </head>.

<style>
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 CSS by www.idblanter.com */
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;
}
.whatsapp-form{
  width:100%;
  max-width:700px;
  margin:0 auto;
  box-sizing:border-box;
}
</style>

Lalu anda salin juga code HTML dibawah ini dan pastekan tepat diatas kode </body> atau setelah kode <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>Nama Lengkap</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 Anda</label>
</div>
<div class="datainput">
<select id="wa_select">
  <option hidden='hidden' selected='selected' value='default'>Pilih Domain</option>
  <option value="1">.COM</option>
  <option value="2">.ID</option>
  <option value="3">.NET</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>Nomor WhatsApp</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>Nama Domain</label>
<p>Contoh: sundaku.com / calondesain.com / .id / .net<br/>Jika nama domain anda tidak tersedia, kami akan infokan kepada anda segera.</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>Alamat Lengkap Anda</label>
<p>Silahkan anda isi lengkap alamat lengkap anda, beserta RT/RW dan Kode POS.</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>

Setelah itu, salin kode JS dibawah ini dan letakan tepat diataa kode </body>


<script type="text/javascript">
$(document).on('click','.send_form', function(){
var input_blanter = document.getElementById('wa_email');

/* Whatsapp Settings */
var walink = 'https://web.whatsapp.com/send',
    phone = '6281585398339',
    walink2 = 'Halo saya ingin ',
    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 Lengkap* : ' + input_name1 + '%0A' +
    '*Email Anda* : ' + input_email1 + '%0A' +
    '*Pilih Domain* : ' + input_select1 + '%0A' +
    '*Nomor WhatsApp* : ' + input_number1 + '%0A' +
    '*Nama Domain* : ' + input_url1 + '%0A' +
    '*Alamat Lengkap* : ' + 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>

Anda copy juga code Jquery dibawah ini dan letakan tepat diatas kode </head>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

dan Letakan juga link ini tepat dibawah kode <head>

<link href='https://fonts.googleapis.com/css?family=Roboto&amp;display=swap'
rel='stylesheet' type='text/css'>

Setelah itu, anda lihat dengan mengetuk tombol yang ada disebelah kanan bawah. Lihat gambar dibawah ini:
Maka akan terlihat seperti gambar dibawah ini:
 Gambar dibawah ini adalah sambungannya.
Bagaimana hasilnya? Jika memang kurang puas atau tidak sesuai, silahkan anda rubah pada kode html nya sesuai dengan form yang ingin anda buat dan jangan lupa untuk mengganti no tlpon pada kode Jquery diatas yang saya blok warna kuning dan untuk bagian tag title, silahkan anda sesuaikan sendiri ya.

Jika memang sudah sesuai, silahkan anda aplikasikan pada website atau blog anda.

Nantikan post selanjutnya, yaitu Membuat Halaman Orderan Di Blogger.

Semoga bisa bermanfaat dan jangan lupa berbagi informasi ya.

Terima kasih.