Cara Memasang Form WhatsApp Booking di Blog



WhatsApp adalah salah satu aplikasi Messanger yang cukup banyak diminati saat ini, karena penggunaannya cukup mudah serta memiliki fitur yang sangat lengkap serta bisa digunakan disemua jaringan internet, banyak perusahan shop memanfaatkan WhatsApp sebagai Chatting dengan pelanggan.

Pengguna WhatsApp

Menurut We Are Social dan Hootsuite di tahun 2019, tercatat 83% pengguna internet di Indonesia merupakan pengguna WhatsApp, sementara untuk data Global tercatat tembus ke angka dua miliar pengguna.

Pada artikel ini saya tidak menjelaskan lagi fungsi-fungsi dari WhatsApp secara detail karena saya yakin semuanya sudah pada tahu. Disini saya akan memberikan sedikit tutorial tentang pemasangan Form dengan memanfaatkan aplikasi WhatsApp sehingga bisa dipasang pada Blog yang berbau bisnis.

Widget Form WhatsApp yang akan saya bagikan kali ini bisa dimodikafiksinya sesuai dengan keperluan, seperti Form Booking, Chatting, dan lain-lain. Untuk memodifikasinyapun sangat mudah, disamping itu gratis. Sobat bisa lihat pada Blog atau Web yang menggunakan widget ini contoh pada salah satu template goomsite.net penyedia template Blogspot di Indonesia. Jika sobat penasarannya penampakan aslinya seperti apa? sobat bisa langsung cek pada template The Rental atau bisa lihat di Blog Goomsite.net.

Tutorial Form WhatsApp

Bagaimana sobat tertarik untuk menggunakannya? Jika tertarik, mari kita lanjut pada tutorial membuat form booking WhatsApp dibawah ini:

1. Masuk ke dashboard Blogger > Theme > Edit HTML.
2. Simpan code CSS berikut di dalam <style> ... </style> atau <b:skin<![CDATA[ ... ]]></b:skin>
#whatsapp {
  padding: 10px 20px;
  display: block;
  flex-wrap: wrap;
  background: #ffffff;
  margin: 5px;
  border: 1px solid #ebebeb;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
  color: #000000;
  box-sizing: border-box;
}
.wa-input, .wa-option {
  border:none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .02), inset 1px 1px 5px rgba(0, 0, 0, .05);
  background: rgba(0, 0, 0, .02);
  outline: 0;
}
.wa-input {
  border-radius: 2px;
  line-height: 1.2em;
  padding: 10px 10px 10px 40px;
}
.wa-option {
  border-radius: 2px;
  line-height: 32px;
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
}
.wa-input.bagi {
  width: 100%;
  margin: 0;
}
.schedule {
  margin-left: 0;
  margin-right: 5px;
  display: inline;
  vertical-align: middle;
}
.mr-10 {
  margin-right: 10px !important;
  font-size: 14px;
}
.wa-label {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}
.wa-label i {
  position: absolute;
  z-index: 0;
  display: inline-block;
  vertical-align: top;
  width: 40px;
  text-align: center;
  font-size: 18px;
  height: auto;
  background: 0 0;
  box-shadow: none;
  top: 25%;
  left: 0;
  color: rgba(0, 0, 0, .26);
}
.wa-label.bagi {
  font-weight: 500;
  line-height: 1.5em;
  padding: 0;
  font-size: 14px;
  display: block;
  margin-bottom: 10px;
}
.bagil {
  display: block;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 7px;
  color: #55cd6c;
}
#whatsapp .submit, .wa-label.full {
  width: 100%;
  display: block;
  font-weight: 500;
}
#whatsapp .submit, .read-all a {
  color: #ffffff;
  text-transform: uppercase;
}
.wa-label.full {
  line-height: 32px;
  padding: 0;
  font-size: 14px;
}
.form-whatsapp {
  display: block;
  width: 100%;
  margin-bottom: 20px;
}
.box-date {
  width: 100%;
  text-align: center;
  margin: 0 0 10%;
  line-height: 1.6em;
}
.wa-input.full {
  width: 100%;
  min-height: auto;
  margin: 0;
  padding: 10px 10px 30px 40px;
}
.wa-label.full i {
  top: 12%;
}
#whatsapp .submit {
  text-align: center;
  border: 0 0;
  background: #20c63f;
  padding: 13px 20px;
  cursor: pointer;
  box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, .1);
  border-radius: 4px;
  vertical-align: middle;
  font-size: 105%;
  letter-spacing: 1px;
}
#whatsapp .submit:active {
  box-shadow: none;
}
p.wa-title {
  font-size: 17px;
  color: #ff5400;
  padding: 0 0 10px;
  border-bottom: 1px solid #f1f1f1;
  text-align: left;
  font-weight: 600;
  margin-bottom: 25px;
}
p.wa-title svg {
  width: 28px;
  vertical-align: middle;
  margin-right: 5px;
  height: auto;
}

3. Selanjutnya tempatkan code markup (HTML), dimanapun sobat inginkan

<div id='whatsapp'>
<p class='wa-title'><svg viewBox='0 0 512 512'>
<path d='M0,512l35.31-128C12.359,344.276,0,300.138,0,254.234C0,114.759,114.759,0,255.117,0  S512,114.759,512,254.234S395.476,512,255.117,512c-44.138,0-86.51-14.124-124.469-35.31L0,512z' style='fill:#EDEDED;'/>
<path d='M137.71,430.786l7.945,4.414c32.662,20.303,70.621,32.662,110.345,32.662  c115.641,0,211.862-96.221,211.862-213.628S371.641,44.138,255.117,44.138S44.138,137.71,44.138,254.234  c0,40.607,11.476,80.331,32.662,113.876l5.297,7.945l-20.303,74.152L137.71,430.786z' style='fill:#55CD6C;'/>
<path d='M187.145,135.945l-16.772-0.883c-5.297,0-10.593,1.766-14.124,5.297  c-7.945,7.062-21.186,20.303-24.717,37.959c-6.179,26.483,3.531,58.262,26.483,90.041s67.09,82.979,144.772,105.048  c24.717,7.062,44.138,2.648,60.028-7.062c12.359-7.945,20.303-20.303,22.952-33.545l2.648-12.359  c0.883-3.531-0.883-7.945-4.414-9.71l-55.614-25.6c-3.531-1.766-7.945-0.883-10.593,2.648l-22.069,28.248  c-1.766,1.766-4.414,2.648-7.062,1.766c-15.007-5.297-65.324-26.483-92.69-79.448c-0.883-2.648-0.883-5.297,0.883-7.062  l21.186-23.834c1.766-2.648,2.648-6.179,1.766-8.828l-25.6-57.379C193.324,138.593,190.676,135.945,187.145,135.945' style='fill:#FEFEFE;'/>
</svg> BOOKING</p>
<input class='tujuan' type='hidden' value='81234567890'/>
<div class='form-whatsapp'>

<label class='wa-label bagi'>Form</label>
<select class='from wa-option bagi' placeholder='Select Location' required=''>
 <option disabled='' selected='' value='Select Location'>Select Location</option>
<option data-index='0' name='from' value='Jakarta'>Jakarta</option>
<option data-index='1' name='from' value='Surabaya'>Surabaya</option>
<option data-index='2' name='from' value='Makassar'>Makassar</option>
<option data-index='3' name='from' value='Medan'>Medan</option>
<option data-index='4' name='from' value='Bandung'>Bandung</option>
<option data-index='5' name='from' value='Yogyakarta'>Yogyakarta</option>
<option data-index='6' name='from' value='Denpasar'>Denpasar</option>
<option data-index='7' name='from' value='Manado'>Manado</option>
<option data-index='8' name='from' value='Batam'>Batam</option>
<option data-index='9' name='from' value='Banjarmasin'>Banjarmasin</option>
<option data-index='10' name='from' value='Palembang'>Palembang</option>
<option data-index='11' name='from' value='Semarang'>Semarang</option>
<option data-index='12' name='from' value='Balikpapan'>Balikpapan</option>
<option data-index='13' name='from' value='Bekasi'>Bekasi</option>
<option data-index='14' name='from' value='Pekanbaru'>Pekanbaru</option>
<option data-index='15' name='from' value='Tangerang'>Tangerang</option>
<option data-index='16' name='from' value='Ambon'>Ambon</option>
<option data-index='17' name='from' value='Jayapura'>Jayapura</option>
<option data-index='18' name='from' value='Kupang'>Kupang</option>
<option data-index='19' name='from' value='Padang'>Padang</option>
<option data-index='20' name='from' value='Pontianak'>Pontianak</option>
<option data-index='20' name='from' value='Malang'>Malang</option>
</select>

<label class='wa-label bagi'>To</label>
<select class='to wa-option bagi' placeholder='Select Location' required=''>
<option disabled='' selected='' value='Select Location'>Select Location</option>
<option data-index='0' name='to' value='Jakarta'>Jakarta</option>
<option data-index='1' name='to' value='Surabaya'>Surabaya</option>
<option data-index='2' name='to' value='Makassar'>Makassar</option>
<option data-index='3' name='to' value='Medan'>Medan</option>
<option data-index='4' name='to' value='Bandung'>Bandung</option>
<option data-index='5' name='to' value='Yogyakarta'>Yogyakarta</option>
<option data-index='6' name='to' value='Denpasar'>Denpasar</option>
<option data-index='7' name='to' value='Manado'>Manado</option>
<option data-index='8' name='to' value='Batam'>Batam</option>
<option data-index='9' name='to' value='Banjarmasin'>Banjarmasin</option>
<option data-index='10' name='to' value='Palembang'>Palembang</option>
<option data-index='11' name='to' value='Semarang'>Semarang</option>
<option data-index='12' name='to' value='Balikpapan'>Balikpapan</option>
<option data-index='13' name='to' value='Bekasi'>Bekasi</option>
<option data-index='14' name='to' value='Pekanbaru'>Pekanbaru</option>
<option data-index='15' name='to' value='Tangerang'>Tangerang</option>
<option data-index='16' name='to' value='Ambon'>Ambon</option>
<option data-index='17' name='to' value='Jayapura'>Jayapura</option>
<option data-index='18' name='to' value='Kupang'>Kupang</option>
<option data-index='19' name='to' value='Padang'>Padang</option>
<option data-index='20' name='to' value='Pontianak'>Pontianak</option>
<option data-index='20' name='to' value='Malang'>Malang</option>
</select>
</div>

<div class='box-date'>
<label class='wa-label bagil'>Departure schedule</label>
  <input class='schedule' name='schedule' type='radio' value='Morning'/><span class='mr-10'>Morning</span>
  <input class='schedule' name='schedule' type='radio' value='Noon'/><span class='mr-10'>Noon</span>
  <input class='schedule' name='schedule' type='radio' value='Night'/><span class='mr-10'>Night</span>
</div>

<div class='form-whatsapp'>
<label class='wa-label bagi'><i class='fas fa-user-circle'/>
<input class='name wa-input bagi' name='name' placeholder='Your name' type='text'/>
</label>
</div>

<div class='form-whatsapp'>
<label class='wa-label bagi'><i class='far fa-calendar-alt'/>
<input class='date wa-input bagi' name='date' placeholder='Date of departure' required='' type='date'/>
</label>
</div>

<div class='form-whatsapp'>
<label class='wa-label bagi'><i class='fas fa-phone'/>
<input aria-labelledby='number-00000014-acc number-00000014-error-acc number-00000014-instr-acc' class='handphone wa-input bagi' data-role='i123-input' data-size='full' name='handphone' placeholder='Phone number' step='any' type='tel'/>
</label>
</div>

<div class='form-whatsapp'>
<label class='wa-label bagi'><i class='fas fa-users'/>
<input class='amount wa-input bagi' max='10' min='1' name='total' placeholder='Total passenger' type='number'/>
</label>
</div>

<div class='form-whatsapp'>
<label class='wa-label full'><i class='fas fa-comments'/>
<textarea class='pickup wa-input full' name='pickup' placeholder='Pick-up address'/>
</label>
</div>

<div class='form-whatsapp'>
<label class='wa-label full'><i class='fas fa-comments'/>
<textarea class='delivery wa-input full' name='delivery' placeholder='Destination address'/>
</label>
</div>

<div class='form-whatsapp'>
<a class='submit'><i class='fab fa-whatsapp'/> Order now</a> 
</div>
</div>
Keterangan:
Ganti nomor WhasApp (81234567890) dengan nomor WA aktif sobat

4. Kemudian simpan code JavaScript tepat di atas </body> atau &lt;!--</body>--&gt;&lt;/body&gt;
<script>
//<![CDATA[
// Form WhatsApp
function WhatsApp() {
 var a = "";
 if ("" == $("#whatsapp .from").val()) return a = $("#whatsapp .from").attr("name"),
 alert("Please choose a city of origin " + a),
 $("#whatsapp .name").focus(),
 !1;
 if ("" == $("#whatsapp .to").val()) return a = $("#whatsapp .to").attr("name"),
 alert("Please select a destination city " + a),
 $("#whatsapp .to").focus(),
 !1;
 if ("" == $("#whatsapp .date").val()) return a = $("#whatsapp .date").attr("name"),
 alert("Please choose a date of departure " + a),
 $("#whatsapp .date").focus(),
 !1;
 if ("" == $("#whatsapp .schedule").val()) return a = $("#whatsapp .schedule").attr("name"),
 alert("Please select a scheduled departure " + a),
 $("#whatsapp .schedule").focus(),
 !1;
 if ("" == $("#whatsapp .name").val()) return a = $("#whatsapp .name").attr("name"),
 alert("Please write " + a),
 $("#whatsapp .name").focus(),
 !1;
 if ("" == $("#whatsapp .handphone").val()) return a = $("#whatsapp .handphone").attr("name"),
 alert("Please write the active mobile number " + a),
 $("#whatsapp .handphone").focus(),
 !1;
 if ("" == $("#whatsapp .amount").val()) return a = $("#whatsapp .amount").attr("name"),
 alert("Please specify the number of passengers " + a),
 $("#whatsapp .amount").focus(),
 !1;
 if ("" == $("#whatsapp .pickup").val()) return a = $("#whatsapp .pickup").attr("name"),
 alert("Please write a complete pickup address " + a),
 $("#whatsapp .pickup").focus(),
 !1;
 if ("" == $("#whatsapp .delivery").val()) return a = $("#whatsapp .delivery").attr("name"),
 alert("Please write the complete destination address " + a),
 $("#whatsapp .delivery").focus(),
 !1;
 if (confirm("Already installed WhatsApp?")) {
  var t = "https://web.whatsapp.com/send";
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && (t = "whatsapp://send/");
  var e = 62,
  p = $("#whatsapp .tujuan").val(),
  s = location.href,
  r = $("#whatsapp .from").val(),
  h = $("#whatsapp .to").val(),
  n = $("#whatsapp .date").val(),
  o = $("#whatsapp .schedule").val(),
  i = $("#whatsapp .name").val(),
  l = $("#whatsapp .handphone").val(),
  w = $("#whatsapp .amount").val(),
  u = $("#whatsapp .pickup").val(),
  c = $("#whatsapp .delivery").val();
  $(this).attr("href", t + "?phone=" + e + p + "&text=*BOOKING ??*

*ADDRESS :* *_form_* " + r + " *_to_* " + h + " 
*DATE :* " + n + " 
*TIME :* " + o + " 
*NAME :* " + i + " 
*PHONE NUMBER :* " + l + " 
*TOTAL PASSENGER :* " + w + " 

*PICKING ADDRESS :* " + u + " 

*DESTINATION ADDRESS :* " + c + "

via " + s);
  var d = 960,
  f = 540,
  m = Number(screen.width / 2 - d / 2),
  v = Number(screen.height / 2 - f / 2),
  A = window.open(this.href, "", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=1, copyhistory=no, width=" + d + ", height=" + f + ", top=" + v + ", left=" + m);
  return A.focus(),
  !1
 }
 window.open("https://www.whatsapp.com/download/")
}
$("#whatsapp .submit").click(WhatsApp),
$("#whatsapp input, #whatsapp textarea").keypress(function () {
 13 == event.which && WhatsApp()
});
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
//]]>
</script>

Demikian Cara Memasang Form WhatsApp Booking di Blog, semoga bermanfaat. Salam Blogger!!!

Hanya Blogger Pemula yang suka menulis dan membaca

Disqus Comments