√Cara Membuat Formulir Pemesanan Otomatis Kirim WhatsApp

Hallo sahabat blog!

Sudah lama nih udah ga post, pada kesempatan kali ini, sundaku akan berbagi informasi Cara Membuat Formulir Pemesanan Otomatis Kirim Ke WhatsApp.

Tanpa basa basi lagi, langsung saja ke tutorialnya dibawah ini:

Silahkan anda buka Text editor yang anda gunakan. Disini Genara Code menggunakan Text editor dari Sublime Text.

Jika sobat ingin menggunakannya juga, silahkan downlaod DISINI .

Kemudian setelah itu, buka text editornya dan buat file baru, seperti gambar dibawah ini:

Lalu akan kebuka jendela baru disamping kanan. Kemudian silahkan anda pilih file - save as - dan beri nama terserah anda dengan akhiran (.html) * tanpa tanda kurung* . Lalu kemudian buatlah struktur html5 seperti dibawah ini:


<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>

Pada tag title, silahkan sobat beri nama apa saja sesuai dengan selera. Kemudian sobat copy code CSS dibawah ini dan tempelkan tepat diatas tag penutup </head> .


<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 #c6ffc5}.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.sundaku.com */
form.whatsapp-form {
    box-shadow: 0 1px 6px rgba(32,33,36,.28);
    border-radius: .5rem;
    padding: 20px;
    box-sizing: border-box;
    color: #ef490a;
    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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Kemudian tempelkan code dibawah ini tepat dibawah tag pembuka <head> .

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

Kemudian langkah terakhir adalah, salin code dibawah ini dan tempelkan tepat diatas tag penutup </body> atau dibawah tag pembuka <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 /.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>

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

/* Whatsapp Settings */
var walink = 'https://web.whatsapp.com/send',
    phone = '62815853XXXXX',
    walink2 = 'Halo saya ingin Pesan!!',
    text_yes = 'Pesanan Anda Sudah 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_sundaku.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 sundaku_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(sundaku_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>';
}
});