04 December 2019

Cara Membuat Formulir Order dengan Kirim Menuju Whatsapp

Cara Membuat Formulir Order dengan Kirim Menuju Whatsapp

Halo sobat Blanter, kali ini saya akan membagikan tutorial yang sedang populer saat ini, yaitu formulir order yang otomatis menuju Whatsapp. Tutorial ini bukan hanya untuk formulir order, namun bisa juga untuk formulir registrasi, kontak, dan lain sebagainya.

Biasanya formulir seperti ini dapat kita jumpai pada website toko online di platform Blogger/Blogspot karena lebih mudah dan praktis dalam pemesanan. Kegunaannya memang cukup beragam dan mudah di modifikasi sesuai dengan kebutuhan sobat dalam penggunaan formulir Whatsapp ini.

Pada tutorial kali ini saya tidak membagikan kode secara matang, namun sobat harus mempelajarinya agar dapat digunakan sesuai dengan kebutuhan sobat.

Contoh Hasil Formulir Whatsapp
Pastikan blog sobat sudah menggunakan jQuery seperti di bawah ini :

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

Desain formulir Whatsapp ini menggunakan Material Design, jika sobat menggunakan Style/CSS lain pada blog sobat, harap ikuti panduan ini dengan seksama.


Pertama perhatikan kode HTML berikut ini, pastikan sobat memahami id="wa_name", name="name" dan type="text".

<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>

Kegunaan :

  1. id="wa_name" digunakan untuk memanggil hasil dari formulir menuju javascript, setiap form input wajib memiliki id yang berbeda.
  2. name="name" digunakan untuk memunculkan auto fill dari browser, dapat di ubah sesuka hati seperti: name="password", name="country", name="email".
  3. type="text" digunakan untuk jenis input, dapat di ubah menjadi: type="password" dan type="number".

Sangat penting untuk bagian id="wa_name" ini adalah fungsi untuk javascript, dapat di gunakan pada kode input yang berbeda.

Selanjutnya panduan bagian form selector atau select, berbeda dengan id="wa_name" yang terdapat di dalam <input, untuk select, id dipasang pada <select.

<select id="wa_select">
  <option hidden='hidden' selected='selected' value='default'>Select Option</option>
  <option value="1">List Option 1</option>
  <option value="2">List Option 2</option>
  <option value="3">List Option 3</option>
</select>


Untuk panduan HTML sekian sampai sini, selanjutnya adalah menyusun kode HTML.

Kode di bawah ini adalah kode awal untuk menyusun formulir.

<form class="whatsapp-form">

.... Kode input dan datainput ....

<a class="send_form" href="javascript:void" type="submit" title="Send to Whatsapp">Send to Whatsapp</a>
<div id="text-info"></div>
</form>

Lihat Juga : Membuat Widget Chat Whatsapp dengan Nomor Ganda

Silahkan buat sesuai kegunaan, berikut adalah kode input dan datainput.

Input Nama


<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>


Input Email


<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>


Input Selector


<div class="datainput">
<select id="wa_select">
  <option hidden='hidden' selected='selected' value='default'>Select Option</option>
  <option value="1">List Option 1</option>
  <option value="2">List Option 2</option>
  <option value="3">List Option 3</option>
</select>
</div>


Input Number/Nomor Telepon


<div class="datainput">
<input class="validate" id="wa_number" name="count" required="" type="number" value=''/>
<span class="highlight"></span><span class="bar"></span>
<label>Input Number</label>
</div>


Input URL/Link


<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 blog Anda, gunakan http:// atau https://</p>
</div>


Tag <p>teks</p> digunakan untuk deskripsi input.

Input Textarea


<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>
</div>


Textarea digunakan untuk deskripsi yang panjang.

Silahkan gunakan CSS di bawah ini jika blog sobat tidak menggunakan CSS input bawaan.

/* 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;
}
/* 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}


Kode Warna Default : #21a51f
Warna dapat di ubah dengan kode warna yang sobat inginkan.

Lihat Juga : Template Blogger Toko Online Blanter Tokoshop dengan Checkout Whatsapp

Panduan Javascript Form Order Whatsapp.


<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 = '6281977094280', 
    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* : ' + input_name1 + '%0A' + 
    '*Email Address* : ' + input_email1 + '%0A' + 
    '*Select Option* : ' + input_select1 + '%0A' + 
    '*Input 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>


Panduan dan Kegunaan:

  1. Pada kode tebal pertama yaitu 'wa_email', digunakan sebagai id input yang wajib di isi, jika form tidak di isi maka akan memunculkan teks tidak terkirim. Silahkan ganti 'wa_email' tersebut sesuai dengan input yang wajib di isi.
  2. Untuk input select menggunakan variable yang sedikit berbeda yaitu input_select1 = $("#wa_select :selected").text() perbedaannya menggunakan :selected dan text().
  3. Untuk input normal menggunakan variabel input_name1 = $("#wa_name").val() dengan menggunakan val().
  4. Perlu diperhatikan bahwa kode terakhir /* Call Input Form */ dan /* Final Whatsapp URL */ wajib memiliki >> ; << tidak menggunakan koma.
  5. Pastikan bahwa input_select1 dan sejenisnya, tidak boleh lebih dari 1, jika lebih dari 1 silahkan ubah menjadi input_select2 dengan angka dan seterusnya.
  6. Bagian '*Name* : ' + input_name1 + '%0A' + jika sobat lihat input_name1 adalah pemanggil hasil yang kita tulis di formulir.
  7. Untuk /* Whatsapp Settings */ saya yakin sobat pasti sudah paham.


Jika sobat menggunakan input lain, dan tidak menggunakan CSS input material design, silahkan hapus kode berikut ini:

<span class="highlight"></span><span class="bar"></span>
<label>Description</label>

Selesai.

Video Tutorial



Sekian tutorial yang bisa saya bagikan kali ini, kode javascript tersebut merupakan hasil buatan saya, yang saya aplikasikan pada template Toko Online Blanter Tokoshop. Jangan lupa untuk Bookmark, Subscribe dan Komentar tentang tutorial ini.

Semoga bermanfaat, Terima kasih.
SUBSCRIBE TO OUR NEWSLETTER

Add Your Comments

bold <b></b>
italic <i></i>
underline <u></u>
HTML <code></code> use Parser

Emoticon
Parser
😊
😉
😀
😁
😎
😍
😜
😑
😇
💖
😯
😱
😭
👍
🍻