Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

THEME SHOP - Tukang Toko Online
Jasa Review

Cara Membuat Form Whatsapp di Blogspot

Sebelum menuju ke pembahasan mengenai cara membuat form whatsapp pada blogspot, ada baiknya kita mengetahui sedikit manfaat penggunaan form whatsapp tersebut pada blogspot kita.

Chat form whatsapp

Apa saja manfaat dipasangnya form whatsapp di blogspot kita.

  1. Mempermudah pengunjung berinteraksi dengan admin blog.
  2. Tampilan lebih ringkas dan menarik.
  3. Bisa menjadi database yang bisa dikembangkan kedepannya.
  4. Dengan modifikasi bisa dimanfaatkan sebagai form order via whatsapp.

Berikut ini adalah penjelasan lengkapnya dari beberapa poin di atas.

1. Mempermudah pengunjung berinteraksi dengan admin blog.

Ya benar, adanya fitur chat dengan admin sangat membantu pengunjung berinteraksi dengan admin blog. Terlebih lagi jika bloga Anda adalah blog tentang konsultasi, tutorial, ataupun ragam informasi lainnya, terlebih jika blog Anda adalah blog bisnis. Fitur chat ini (via whatsapp) jelas sangat dibutuhkan.

Nah dengan penambahan form chat (ke Whatsapp) bisa sangat membantu memperjelas fokus chat untuk interaksi tersebut.

2. Tampilan lebih ringkas dan menarik.

Dengan adanya form ini, tentu saja tampilan akan lebih menarik dan lebih memudahkan pengunjung untuk berinteraksi dengan admin. Proses pengunjung blog akan menjadi lebih mudah untuk berinteraksi dengan admin blog. Apalagi jika Anda bisa membuat layoutnya menjadi ringkas sedemikian rupa dengan pengaturan melalui CSS, maka akan bisa memperindah tampilan blog Anda, dan fitur chat ini akan lebih eye catching.

Jika form chat ini dipasang di halaman tersendiri, akan sangat bisa menurunkan bounce rate, yang secara SEO akan berdampak cukup baik untuk blog Anda. Bounce Rate merupakan persentase sebuah situs yang dihitung dari banyaknya pengunjung membuka halaman pada sebuah situs, bukan hanya berkunjung di satu halaman kemudian kabur. Semakin kecil rasio/persentasenya, akan semakin baik.

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 jika pintar mengelolanya akan bisa menjadi amunisi pemasaran yang sangat bagus.

Saat ini data sudah merupakan sebuah komoditi yang memiliki nilai jual yang cukup mahal. Bahkan banyak pihak yang rela mengeluarkan banyak uang untuk membeli personal data yang biasanya berisi email, nama dan nomer telphon.

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

Dengan sedikit modifikasi, form chat ini melalui whatsapp ini bisa dikembangkan menjadi form order melalui whatsapp, jika blogspot Anda difungsikan sebagai sebuah toko online, atau blog bisnis lainnya. 

Intinya anda menjual atau menawarkan barang melalui blog Anda, form whatsapp ini bisa membantu jika difungsikan sebagai form order. Dengan sedikit modifikasi coding, Anda bisa mengoptimalkan fungsi chat form ini dan langsung bisa menerapkannya ke template blogspot Anda.

Sebagai contohnya, Anda bisa melihatnya pada 2 template toko online dengan form order whatsapp disini.

Cara membuat form whatsapp pada Blogspot

Ada tiga script yang harus Anda perhatikan disini, yaitu, script HTML, CSS dan JQuery.

Untuk lebih jelasnya Anda bisa melihatnya melalui demo di bawah ini melalui Codepen yang saya sematkan.

See the Pen Form Contact Whatsapp by tukangtokoonline (@tukangtokoonline) on CodePen.

Atau Anda bisa mengujungi link DISINI untuk live demo pada blogspot.

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

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 warna merah adalah no. hp admin blog.

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 simpan template tersebut.

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 simpan halaman tersebut dan terbitkan.

Jika tidak ada kesalahan, maka hasilnya akan seperti pada live demonya di atas.

Kemungkinan yang sering terjadi jika fitur ini tidak bisa jalan adalah karena adanya crash antar kode jquery nya. Jadi sebaiknya Anda juga memperhatikan kode jquery yang sudah dipasang sebelumnya, apakah ada elemen yang sama. Jika ada, maka Anda harus menambahkan tag conditional tertentu atau merubah elemen tersebut. 


Sebagai referensi, jika Anda ingin belajar coding dari awal bisa menuju ke w3schools.com atau Anda juga bisa menuju ke stackoverflow.com untuk mencari jawaban mengenai berbagai macam topik bahasan mengenai coding.

Semoga bermanfaat.

8 komentar untuk "Cara Membuat Form Whatsapp di Blogspot"

  1. Thanks mas, artikelnya sangat membantu, jelas dan lengkap dengan demo nya.

    BalasHapus
  2. Nice. semoga menjadi situs yang bermanfaat dan memiliki artikel yang berkualitas untuk mencerdaskan semua orang.

    BalasHapus
  3. ini yang saya cari kak. makasih tutorialnya

    <a href='https://www.laiyoh.com>laiyoh</a>

    BalasHapus
  4. ini yang saya cari kak. makasih tutorialnya

    laiyoh

    BalasHapus