Membuat Contact Form Whatsapp Responsif, Pesan Terkirim Ke Nomor Whatsapp

Membuat contact form whatsapp responsif, pesan yang terkirim langsung ke nomor whatsapp tujuan, bukan terkirim ke email. Tapi, formulir isiannya seperti contact form pada umumnya yang berisi nama, email dan isi pesan yang diisi oleh pengirim.
Hasilnya seperti gambar diatas ketika tombol whatsapp di klik
Cara ini diajarkan oleh suhu/master blogger : www.codepelajar.com dan www.jasa-design.web.id dengan sedikit perbaikan pada tag kondisional : / dan amp oleh www.persibpersija.com.

Keuntungan menggunakan widget contact form whatsapp responsif ini adalah :

  1. Memudahkan visitor (pengunjung) blog untuk berinteraksi dengan admin blog,
  2. Pesan yang terkirim realtime (instan) dan mudah diakses, baik oleh pengirim (visitors), maupun penerima (admin).
  3. Tampilannya tidak acak-acakan/mengganggu, baik saat tampil di desktop maupun mobile (smartphone) alias responsif.
  4. Di desktop/PC/Laptop, ketika anda mengklik kirim setelah menulis pesan, anda akan dibawa masuk ke whatsapp web. Anda akan diminta untuk membuka aplikasi whatsapp di smartphone, pilih titik tiga di pojok kanan atas, pilih whatsapp web, kemudian scan barcode yang muncul di web whatsapp.
  5. Sementara di smartphone, ketika anda mengklik kirim setelah menulis pesan, anda akan dibawa masuk ke aplikasi whatsapp yang ada di handphone anda (jika belum instal, instal segera whatsapp di playstore/ios/windows).
  6. Admin (penerima pesan) bisa membalas pesan dari pengirim (visitor) saat itu juga (jika sedang online di whatsapp).
  7. Sangat bermanfaat untuk pelaku bisnis yang memasarkan produk/jasa melalui website/blog
Berikut adalah cara membuat contact form whatsapp responsif :

Pertama, salin (ctrl+c) kode berikut : 

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Lalu paste (ctrl+v) di atas </head>

Kedua, salin (ctrl+c) kode berikut : 

div#pelajar { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -99; opacity: 0; transition:.5s; background: rgba(0,0,0,0.5); } div#pelajar.active{ z-index: 9999; opacity: 1; } div#whatsapp { position: fixed; top: 50%; left: 50%; max-width: 480px; width: 95%; background: #fff; transform: translate(-50%,-50%); z-index: -1; opacity: 0; border-radius: 5px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.5); transition:.5s; } div#whatsapp.active { z-index: 999999; opacity: 1; } p.wa-title { margin: 0; padding: 15px; font-size: 16px; text-align: center; font-weight: bold; background: #2ecc71; color: #fff; } .wa-body { padding: 14px; display: flex; flex-wrap: wrap; width: 100%; box-sizing: border-box; } .wa-input { border: 1px solid #ddd; border-radius: 3px; line-height: 32px; padding: 0 10px; box-shadow: inset 0 0 2px rgba(0,0,0,0.1); } .wa-input.bagi { width: 48%; margin: 1%; margin-bottom: 10px; } .wa-input.full { width: 98%; resize: none; min-height: 150px; margin: 0 1%; } a.submit { line-height: 24px; padding: 10px 15px; width: 100%; max-width: 200px; text-align: center; background: #2ecc71; margin: 14px auto 0 auto; display: block; color: #fff; border-radius: 3px; cursor: pointer; } span.wa-x { position: absolute; top: 5px; right: 5px; height: 30px; width: 30px; /* background: #222; */ border: 2px solid #fff; border-radius: 50px; corsor:pointer; } a#wa-icon { position: fixed; bottom: 30px; left: 30px; line-height: 0; border-radius: 30px; background: #2ecc71; padding: 0; height: 60px; width: 60px; color: #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* filter: invert(100%); */ z-index:99; } a#wa-icon::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } span.wa-x::before { content: ""; position: absolute; top: 50%; left: 50%; height: 3px; width: 50%; background: #fff; transform: translate(-50%,-50%); } @media (max-width: 480px){ .wa-input.bagi { width: 100%; margin: 0; margin-bottom: 10px; } a#wa-icon {bottom:10px;left:10px;} .wa-input.full { width: 100%; margin: 0; } }

Lalu paste (ctrl+v) di atas ]]></b:skin>

Ketiga, salin (ctrl+c) kode berikut :

<a class='fa fa-whatsapp fa-3x animated infinite rubberBand' href='javascript:void(0);' id='wa-icon' onclick='openModal()'></a> <div class='pelajar' id='pelajar'> </div> <div id='whatsapp'> <span class='wa-x' onclick='closeModal()'></span> <p class='wa-title'>Contact Form</p> <div class='wa-body'> <input class='tujuan' type='hidden' value='0895334904784'/> <!-- No. WhatsApp --> <input class='nama wa-input bagi' placeholder='Nama Lengkap..' type='text'/> <input class='email wa-input bagi' placeholder='Alamat E-mail..' type='email'/> <textarea class='pesan wa-input full' placeholder='Pesan..'></textarea> <a class='submit'>Kirim</a> </div> </div>

<script type='text/javascript'> function closeModal() { document.getElementById('pelajar').classList.remove('active') document.getElementById('whatsapp').classList.remove('active') } function openModal() { document.getElementById('pelajar').classList.add('active') document.getElementById('whatsapp').classList.add('active') } // Onclick Whatsapp Sent! $('#whatsapp .submit').click(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 .email').val() == '') { // Cek Email ph = $('#whatsapp .email').attr('placeholder'); alert('Silahkan tulis ' + ph); $('#whatsapp .email').focus(); return false; } else if (reg.test($('#whatsapp .email').val()) == false) { // Cek Validasi Email alert('Alamat E-mail tidak valid.'); $('#whatsapp .email').focus(); return false; } else if ($('#whatsapp .pesan').val() == '') { // Cek Pesan ph = $('#whatsapp .pesan').attr('placeholder'); alert('Silahkan tulis ' + ph); $('#whatsapp .pesan').focus(); return false; } else { if (!confirm("Sudah menginstall WhatsApp?")) { window.open("https://www.whatsapp.com/download/"); } 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 = location.href, nama = $('#whatsapp .nama').val(), email = $('#whatsapp .email').val(), pesan = $('#whatsapp .pesan').val(); $(this).attr('href', url_wa + '?phone=62 ' + tujuan + '&amp;text=Halo, saya *' + nama + '* (' + email + ').. %0A%0A' + pesan + '%0A%0Avia ' + 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>

Lalu paste (ctrl+v) di atas </body>

 Contact Form  : Bisa diganti sesuai keinginan anda
 0895334904784  : Ganti dengan nomor whatsapp anda.


Demo : Tombol whatsapp dipojok kiri ya (melayang).
Apabila kurang mengerti dengan cara saya, silakan belajar langsung (terima kasih) ke suhu/master blogger : www.codepelajar.com dan www.jasa-design.web.id 

Related Posts

17 comments

  1. Mau coba terapin di blog juga ahh, keren gan. Makasi

    ReplyDelete
  2. Mempengaruhi kinerja blog engga tuh gan?

    ReplyDelete
  3. Wah boleh juga nih tutorial, nanti ane coba terapkan di blog ane gan ... 😀 thanks artikelnya bermanfaat 👍

    ReplyDelete
    Replies
    1. Siap.. nanti kalau ada ilmu menarik lainnya saya share juga..

      Delete
  4. Ini bener2 mantap .... ini juga di gunakannoleh salah satu penyedia hostinger .. ane coba komen artikelnya eh langsung menuju whatapp .. mantap um

    ReplyDelete
    Replies
    1. Benar.. pakai di blog biar berkelas Gan blognya..

      Delete
  5. Baru tau ada contact form nya kyak whatsapp

    ReplyDelete

Post a Comment

Subscribe Our Newsletter