[TERBARU] 3 Cara Membuat Form Whatsapp di Blog

Siapa sih yang tidak tau WhatsApp, tidak perlu saya jelaskan lebih lanjut karena di sini saya akan membagikan sedikit tutorial. Mengenai bagaimana cara membuat form whatsapp pada blogspot, mungkin sedikit informasi mengenai manfaat penggunaan form whatsapp tersebut pada blogspot kita.

Apa saja manfaat memasang form whatsapp di blog?

1. Mempermudah pengunjung berinteraksi dengan admin blog.

Fitur chat dengan admin sangat membantu pengunjung berinteraksi dengan Admin Blog. Terlebih lagi jika blog Anda adalah blog tentang konsultasi, tutorial, dan mungkin ada beberapa tutorial yang mungkin di baca di dalam artikel masih belum jelas, maka bisa langsung menghunbungi admin blog melalui form whatsapp yang tersedia diblog.

2. Tampilan lebih ringkas dan menarik.

Tampilan blog menjadi lebih menarik atau rapi, saat terpasang form whatsapp. Dikarenakan tidak perlu tambahan-tambahan kontak-kontak yang mungkin juga menyebabkan blog menjadi berat. Dan pengunjung juga lebih mudah mencarinya.

3. Bisa menjadi basis data yang bisa dikembangkan kedepannya.

Yang dimaksud dengan poin ini adalah, Anda bisa memiliki basis data yang Anda dapatkan dari pengunjung yang melakukan chat melalui pengisian form chat tersebut, dan data ini bisa dijadikan sebagai refrensi atau hal-hal lain yang bermanfaat bagi blog. Tetapi ini tergantung lagi bagi setiap pengelola bagaimana cara dia untuk memanfaatkannya.

4. Dengan modifikasi bisa dimanfaatkan sebagai form order melalui Whatsapp.

Dengan sedikit modifikasi, form whatsapp bisa digunakan sebagai tempat untuk berjualan, terkhusus seperti yang suka atau sedang menjalankan jualan melalui internet (e-commerce). Mengunakan form whatsapp ini memurut saya bisa lebih praktis.

Demikian beberapa manfaat memasang form whatsapp di blog. Kita kembali ke topik utama. Cara membuat atau memasang form whatsapp.

Berikut Cara membuat form whatsapp pada Blog.

Untuk memasang form whatsapp  di blog ada tiga script yang harus Anda perhatikan disini, yaitu, script HTML, CSS dan JQuery.

Berikut ini adalah kode-kode yang harus Anda pasang pada blog.

1. Javascript.

Pastikan pada HTML template Anda sudah memasang jquery library versi terbaru ini di bawah kode <head>:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' type='text/javascript'/>

Selanjutnya tambahkan link script font awesome berikut ini tepat dibawah script di atas.

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css' rel='stylesheet'/>

Kemudian, tambahkan kode jquery berikut ini tepat di atas kode </body>.

<script>

//<![CDATA[

 //no wa admin

 $("#noAdmin").val("085866239094");

 $('.whatsapp-btn').click(function () {

 $('#whatsapp').toggleClass('toggle');

 });

 // Onclick Whatsapp Sent!

 $('#whatsapp .submit').click(WhatsApp);

 $("#whatsapp input, #whatsapp textarea").keypress(function () {

 if (event.which == 13) WhatsApp();

 });

 var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

 function WhatsApp() {

 var ph = '';

 if ($('#whatsapp .nama').val() == '') { // Cek Nama

 ph = $('#whatsapp .nama').attr('placeholder');

 alert('Silahkan tulis ' + ph);

 $('#whatsapp .nama').focus();

 return false;

 } else if ($('#whatsapp .emaill').val() == '') { // Cek email

 ph = $('#whatsapp .emaill').attr('placeholder');

 alert('Silahkan tulis ' + ph);

 $('#whatsapp .emaill').focus();

                 return false;

 } else if ($('#whatsapp .pesann').val() == '') { // Cek pesan

                 ph = $('#whatsapp .pesann').attr('placeholder');

                 alert('Silahkan tulis ' + ph);

                 $('#whatsapp .pesann').focus();

 return false;

 } else {

 // Check Device (Mobile/Desktop)

 var url_wa = 'https://web.whatsapp.com/send';

 if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {

 url_wa = 'whatsapp://send/';

 }

 // Get Value

 var tujuan = $('#whatsapp .tujuan').val(),

 via_url = 'https://tukangtokoonline.web.id',

 nama = $('#whatsapp .nama').val(),

 email = $('#whatsapp .emaill').val(),

 pesan = $('#whatsapp .pesann').val();

 $(this).attr('href', url_wa + '?phone=62 ' + tujuan + '&text=%2A--Halo Admin, Mohon Informasi--%2A' + '%0A%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D' + '%0A%2ANama%2A%20: ' + nama + ' %0A%2Aemail%2A%20: ' + email + ' %0A%2AIsi Pesan%2A%20: ' + pesan +  ' %0A%0A%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D ' +' %0A%2Avia%2A ' + via_url);

 var w = 960,

 h = 540,

 left = Number((screen.width / 2) - (w / 2)),

 tops = Number((screen.height / 2) - (h / 2)),

 popupWindow = window.open(this.href, '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=1, copyhistory=no, width=' + w + ', height=' + h + ', top=' + tops + ', left=' + left); popupWindow.focus(); return false; } } //]]>

</script>

Note: Text tebal isi dengan No. Whatsapp.

2. CSS

Selanjutnya, masih di HTML template, adalah memasang kode CSS. Letakkan kode CSS berikut ini setelah kode ]]></b:skin>.

<style>

  /*contact form whatsapp*/

 * {

 margin: 0px;

 padding: 0px;

 box-sizing: border-box;

 }

 body,

 html {

 height: 100%;

 font-family: Helvetica, sans-serif;

 }

 /*---------------------------------------------*/

 a {

 font-family: Helvetica, sans-serif;

 font-size: 14px;

 line-height: 1.7;

 color: #66666;

 margin: 0px;

 transition: all 0.4s;

 -webkit-transition: all 0.4s;

 -o-transition: all 0.4s;

 -moz-transition: all 0.4s;

 }

 a:focus {

 outline: none !important;

 }

 a:hover {

 text-decoration: none;

 }

 /*---------------------------------------------*/

 h1,

 h2,

 h3,

 h4,

 h5,

 h6 {

 margin: 0px;

 }

 p {

 font-family: Helvetica, sans-serif;

 font-size: 14px;

 line-height: 1.7;

 color: #666666;

 margin: 0px;

 }

 ul,

 li {

 margin: 0px;

 list-style-type: none;

 }

 /*---------------------------------------------*/

 input {

 outline: none;

 border: none;

 }

 textarea {

 outline: none;

 border: none;

 }

 textarea:focus,

 input:focus {

 border-color: transparent !important;

 }

 input:focus::-webkit-input-placeholder {

 color: transparent;

 }

 input:focus:-moz-placeholder {

 color: transparent;

 }

 input:focus::-moz-placeholder {

 color: transparent;

 }

 input:focus:-ms-input-placeholder {

 color: transparent;

 }

 textarea:focus::-webkit-input-placeholder {

 color: transparent;

 }

 textarea:focus:-moz-placeholder {

 color: transparent;

 }

 textarea:focus::-moz-placeholder {

 color: transparent;

 }

 textarea:focus:-ms-input-placeholder {

 color: transparent;

 }

 input::-webkit-input-placeholder {

 color: #adadad;

 }

 input:-moz-placeholder {

 color: #adadad;

 }

 input::-moz-placeholder {

 color: #adadad;

 }

 input:-ms-input-placeholder {

 color: #adadad;

 }

 textarea::-webkit-input-placeholder {

 color: #adadad;

 }

 textarea:-moz-placeholder {

 color: #adadad;

 }

 textarea::-moz-placeholder {

 color: #adadad;

 }

 textarea:-ms-input-placeholder {

 color: #adadad;

 }

 /*---------------------------------------------*/

 button {

 outline: none !important;

 border: none;

 background: transparent;

 }

 button:hover {

 cursor: pointer;

 }

 iframe {

 border: none !important;

 }

 /*---------------------------------------------*/

 .container {

 max-width: 1200px;

 }

 /*//////////////////////////////////////////////////////////////////

[ Contact ]*/

 .container-contact100 {

 width: 350px;

            margin:auto;

 min-height: 400px;

 display: -webkit-box;

 display: -webkit-flex;

 display: -moz-box;

 display: -ms-flexbox;

 display: flex;

 flex-wrap: wrap;

 justify-content: center;

 align-items: center;

 padding: 15px;

 background: #0ab521;

 }

 .wrap-contact100 {

 width: 350px;

 background: #fff;

 border-radius: 10px;

 overflow: hidden;

 padding: 42px 15px 45px 15px;

            max-height:400px;

            display: flex;

            flex-wrap: nowrap;

            overflow-y: auto;

 }

 /*------------------------------------------------------------------

[ Form ]*/

 .contact100-form {

 width: 100%;

            margin-top:-10px !important;

 }

 .contact100-form-title {

 display: block;

 font-family: Helvetica, sans-serif;

 font-size: 20px;

 font-weight: 700;

 color: #9f9c9c;

 line-height: 12px;

 text-align: center;

 padding-bottom: 44px;

            margin-top:10px;

 }

 /*------------------------------------------------------------------

[ Input ]*/

 .wrap-input100 {

 width: 100%;

 position: relative;

 border-bottom: 2px solid #d9d9d9;

 padding-bottom: 13px;

 margin-bottom: 27px;

 }

 .label-input100 {

 font-family: Helvetica, sans-serif;

 font-size: 13px;

 color: #666666;

 line-height: 1.5;

 padding-left: 5px;

 }

 .input100 {

 display: block;

 width: 100%;

 background: transparent;

 font-family: Helvetica, sans-serif;

 font-size: 18px;

 color: #333333;

 line-height: 1.2;

 padding: 0 5px;

 }

 .focus-input100 {

 position: absolute;

 display: block;

 width: 100%;

 height: 100%;

 top: 0;

 left: 0;

 pointer-events: none;

 }

 .focus-input100::before {

 content: &quot;&quot;;

 display: block;

 position: absolute;

 bottom: -2px;

 left: 0;

 width: 0;

 height: 2px;

 -webkit-transition: all 0.4s;

 -o-transition: all 0.4s;

 -moz-transition: all 0.4s;

 transition: all 0.4s;

 background: #7f7f7f;

 }

 /*---------------------------------------------*/

 input.input100 {

 height: 40px;

 }

 textarea.input100 {

 min-height: 110px;

 padding-top: 9px;

 padding-bottom: 13px;

 }

 .input100:focus+.focus-input100::before {

 width: 100%;

 }

 .has-val.input100+.focus-input100::before {

 width: 100%;

 }

 /*------------------------------------------------------------------

[ Button ]*/

 .container-contact100-form-btn {

 display: -webkit-box;

 display: -webkit-flex;

 display: -moz-box;

 display: -ms-flexbox;

 display: flex;

 flex-wrap: wrap;

 justify-content: center;

 padding-top: 13px;

 }

 .wrap-contact100-form-btn {

 width: 100%;

 display: block;

 position: relative;

 z-index: 1;

 border-radius: 25px;

 overflow: hidden;

 margin: 10px auto;

      height:40px;

      color:#fff;

 }

.wrap-contact100-form-btn a{

  color:#eee !important;

  text-align:center;

  width:100% !important;

    max-width:550px;

  margin:auto !important;

  height:10px;

  text-decoration:none !important;

  float:left;

  font-size:18px;

  cursor:pointer;

  top: 0px;

  position: absolute;

}

.wrap-contact100-form-btn a:visited{color:#fff !important;}

 .contact100-form-bgbtn {

 position: relative;

      margin-bottom: 10px;

 z-index: -1;

 width: 100%;

 height: 100%;

 background: #0ab521;

 top: 0;

 left: ;

      color:#fff;

 -webkit-transition: all 0.4s;

 -o-transition: all 0.4s;

 -moz-transition: all 0.4s;

 transition: all 0.4s;

 }

.contact100-form-btn .submit{width:100%;}

 .contact100-form-btn {

 display: -webkit-box;

 display: -webkit-flex;

 display: -moz-box;

 display: -ms-flexbox;

 display: flex;

 justify-content: center;

 align-items: center;

 padding: 0 20px;

 width: 100% ;

 height: 50px;

      overflow: hidden;

 font-family: Helvetica, sans-serif;

 font-size: 16px;

 font-weight: 700;

 color: #fff;

 line-height: 1.2;

      z-index:10;

      margin:auto;

 }

 .wrap-contact100-form-btn:hover .contact100-form-bgbtn {

 left: 0;

 }

 .contact100-form-btn i {

 -webkit-transition: all 0.4s;

 -o-transition: all 0.4s;

 -moz-transition: all 0.4s;

 transition: all 0.4s;

 }

 .contact100-form-btn:hover i {

 -webkit-transform: translateX(10px);

 -moz-transform: translateX(10px);

 -ms-transform: translateX(10px);

 -o-transform: translateX(10px);

 transform: translateX(10px);

 }

 /*------------------------------------------------------------------

[ Responsive ]*/

 @media (max-width: 576px) {

 .wrap-contact100 {

 padding: 72px 15px 65px 15px;

 }

 }

/*end script*/  

  </style>

Kemudian Save Template.

3. HTML

Selanjutnya memasang kode HTML nya. Agar lebih mudah, kode HTML ini dipasang di halaman statis bukan di post entry.

Buka halaman baru, kemudian tempelkan kode html berikut ini pada mode tampilan HTML (bukan tampilan menulis).

<!--Isi Form Whatsapp-->

<div class="container-contact100">

<div class="wrap-contact100">

<form class="contact100-form validate-form" id="whatsapp">

 <span class="contact100-form-title" color="green !important">

   <i class="fab fa-whatsapp" style="color: green;"></i> Hubungi Admin </span>

<hr style="margin-top: -35px;" />

<br />

<input class="tujuan" id="noAdmin" type="hidden" />

<div class="wrap-input100">

                  <span class="label-input100"><i class="fas fa-user-check"></i> Nama :</span>

<label>

            <input class="input100 nama" type="text" />

</label>

<span class="focus-input100">

</span></div>


<div class="wrap-input100">

          <span class="label-input100"><i class="fas fa-envelope"></i> e-mail Anda</span>

<label>

           <input class="input100 emaill" type="text" />

</label>

<span class="focus-input100">

</span></div>

<div class="wrap-input100">

                  <span class="label-input100"><i class="fas fa-pen"></i> Isi Pesan</span>

           <label>

            <input class="input100 pesann" type="text" />

            </label>

            <span class="focus-input100">

           </span></div>

<div class="container-contact100-form-btn">

<div class="wrap-contact100-form-btn">

<div class="contact100-form-bgbtn">

  <a class=".contact100-form-btn submit"><i class="fab fa-whatsapp"></i> Kirim </a>

</div>

</div>

</div></form>

</div>

</div>

Kemudian Save Halaman dan Publikasi.

Jika tidak ada kesalahan, maka ulangi lagi dari awal atau periksa kembali script, jangan samapai ada yang salah. 

Kemungkinan yang sering terjadi jika fitur ini tidak bisa jalan adalah karena adanya crash antar kode jquery nya. 

Apabila masih kurang jelas bisa tinggalkan komentar dibawah, kita diskusikan sama-sama.

Source:https://www.tukangtokoonline.web.id/2021/02/cara-membuat-form-whatsapp-blogspot.html

Posting Komentar

© IMAGINATOR ID. All rights reserved. Developed by Jago Desain