Cara Membuat Material WhatsApp Contact Form

Cara Membuat Material WhatsApp Contact Form

Material WhatsApp Form

Halo sobat code pelajar dimanapun kamu berada. Selamat datang kembali di tutorial saya pada kali ini yang sebelumnya sempat menulis tutorial tentang Cara Memasang Script Lazyload, Pada kesempatan kali ini saya akan berbagi tutorial menarik update dari tutorial yang ada. Tutorial kali ini adalah cara membuat Material Design WhatsApp Contact Form.

Formulir kontak ini biasanya dipakai untuk menghubungi langsung pemilik/admin situs dengan mengirim pesan singkat Whatsapp melalui formulir yang ada. Biasanya owner web membuatnya dengan memunculkan popup atau modal form dengan mengklik icon whatsapp. Seperti blog yang sedang kalian buka ini menggunakannya dengan Floating Widget Contact WhatsApp yang sebelumnya saya buat tutorialnya disini.

Mungkin tinggal anggap saja ini tutorial pembaruan dari tutorial cara membuat contact whatsapp yang sebelumnya. Karena dari caranya juga masih sama namun yang berbeda desain formulirnya saja dengan gaya Material Design. Jadi bagi yang sebelumnya kamu pernah menggunakan tutorial dari saya. Kamu hanya tinggal menggantinya saja dengan yang ini. Karena pada Material Whatsapp Form ini juga menggunakan Framework CSS Materialize CSS. Bagi yang belum tau apa itu Materialize CSS silahkan klik disini.


Sebelum Memasang Contact Form WhatsApp.

Saya tekankan disini sebelum sobat menerapkan widget ini, alangkah baiknya sobat kenal dulu dengan Materialize CSS dan cara memakainya bisa kamu lihat pada dokumentasi berikut ini. Selanjutnya, pastikan situsmu sudah terpasang JQuery dalam templatenya. Jika tidak tahu cara memasangnya bisa lihat tutorial saya disini, atau bisa langsung copas kode berikut dan simpan sebelum tag </head>.


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


Memasang Contact Form WhatsApp.

Pertama, kita masukan dahulu plugin librari Materialize CSS dan Material Iconnya taruh sebelum </head> dibawah Jquery seperti berikut ini.

<!-- JQUERY -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- Materialize CSS dan Material Icon -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Selanjutnya kita perlu memasukan beberapa css tambahan dibawah ini.


<style>
/** CSS TAMBAHAN | CODEPELAJAR.COM **/
* {
 box-sizing: border-box !important;
}
.modal {
 max-height: 90% !important;
}
.modal-header {
    padding: 10px 24px;
    font-size: 18px;
    background: #2ecc71;
    color: #fff;
    font-weight: bold;
}
</style>

Pasang Juga Javascript berikut ini taruh saja sebelum tag </body>. Perhatikan setiap kodenya jangan sampai salah ketik atau simpan!

<script type="text/javascript">//<![CDATA[//
/** FORMULIR KONTAK WHATSAPP | CODEPELAJAR.COM **/
// Hanya Nomor pada input Nomor HP
function numberOnly(e) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
        // Allow: Ctrl/cmd+A
        (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
        // Allow: Ctrl/cmd+C
        (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
        // Allow: Ctrl/cmd+X
        (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
        // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
        // let it happen, don't do anything
        return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
}
// WhatsApp
function WhatsApp() {
 var no_tujuan = "0895334904784"; //nomor hp tujuan
 var nama = document.getElementById('nama').value;
 var nomor_hp = document.getElementById('nomor_hp').value;
 var email = document.getElementById('email').value;
 var pesan = document.getElementById('pesan').value;
 var url_situs = location.host;
 var url_asal_chat = location.href;
 var url_wa = 'https://web.whatsapp.com/send';
 
 if (nama == "" || nomor_hp == "" || email == "" || pesan == "") {
  alert("Harap Isi Semua Form!")
  return false;
 } else {
  if (!confirm("Sudah menginstall WhatsApp?")) {
   window.open("https://www.whatsapp.com/download/");
  } else {
   if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
       url_wa = 'whatsapp://send/';
   }
   //Pesan : Semua rangkaian pesan ada pada baris kode dibawah ini. Ubah sesuai kebutuhan.
   $(this).attr('href', url_wa + '?phone=62 ' + no_tujuan + '&text=Hai admin ' + url_situs + ', perkenalkan saya%0ANama: *' + nama + '* %0AHp: *' + nomor_hp + '* %0AEmail: *' + email + '*%0A%0A' + pesan +'%0A%0AChat ini dikirim melalui tautan dibawah:%0A'+url_asal_chat + '%0AWhatsapp contact form by *codepelajar.com*'+);
   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;
  }
 }
}
$(document).ready(function () {
 //auto init materialize lihat dokumentasinya disini   
 M.AutoInit();
 $('.kirim-pesan').click(function () {
     WhatsApp()
 })
 $("#nomor_hp").keydown(numberOnly);
})
//]]>//</script>

Perhatikan variabel no_tujuan, silahkan ganti dengan nomor yang ingin sobat gunakan sebagai nomor tujuan kontaknya. perhatikan juga kode //Pesan, kamu bisa custom juga pesan yang ini jika kamu paham caranya. Kalau tidak biarkan seperti itu saja.


Setelah itu masukan kode html berikut ini, usahakan taruh di baris paling bawah sebelum baris kode script Javascript.

<!-- FORMULIR KONTAK WHATSAPP | CODEPELAJAR.COM -->
<form id="pesanWA" class="modal">
    <div class="modal-header">
        <span class="title">Pesan via Whatsapp</span>
    </div>
    <div class="modal-content">
        <div class="row">
            <div class="input-field col s12 m6 l6 xl6">
                <i class="material-icons prefix">account_circle</i>
                <input id="nama" type="text" name="" class="validate wa_input" required="" />
                <label>Nama</label>
        <span class='helper-text' data-error='Harap diisi dengan benar!' data-success='Oke!'></span>

            </div>
            <div class="input-field col s12 m6 l6 xl6">
                <i class="material-icons prefix">phone</i>
                <input id="nomor_hp" type="text" name="" class="validate wa_input" required="" />
                <label>Nomor HP</label>
        <span class='helper-text' data-error='Harap diisi dengan benar!' data-success='Oke!'></span>
            </div>
            <div class="input-field col s12">
                <i class="material-icons prefix">mail</i>
                <input id="email" type="email" name="" class="validate wa_input" required="" />
                <label>Email</label>
        <span class='helper-text' data-error='Harap diisi dengan benar!' data-success='Oke!'></span>
            </div>
            <div class="input-field col s12">
                <i class="material-icons prefix">message</i>
                <textarea id="pesan" class="materialize-textarea validate" required=""></textarea>
                <label>Pesan Singkat</label>
        <span class='helper-text' data-error='Harap diisi dengan benar!' data-success='Oke!'>Jelaskan rinciannya jika perlu</span>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#!" class="modal-close waves-effect waves-green btn-flat">Batal</a>
        <a href="#!" class="waves-effect waves-green btn-flat kirim-pesan"><i class="material-icons right">send</i>Order</a>
    </div>
</form>

Perhatikan atribut id="pesanWA" pada tag form diatas. Pemberian ID ini sangat penting untuk triggering dari Materialize JS untuk fungsi menampilkan modal/popup kontak whatsapp ini. ID tersebut akan dugunakan pada tombol pemicunya seperti berikut ini:

<a class="waves-effect waves-light btn-floating btn-large green modal-trigger" href="#pesanWA"><i class="material-icons">chat</i></a>

Pada tombol pemicu terdapat kelas modal-trigger juga atribut href dengan nilai yang mengarah langsung ke id formulir kontak whatsapp tadi (href="#pesanWA"). kedua nilai dan atribut ini penting untuk memanggil fungsi modal pada Materialize CSS untuk Contact Form Whatsapp kali ini. Sobat bisa memodifikasinya sesuai keinginan untuk tombol pemicunya.


Semua itu tidak ada gunanya kan kalo tanpa demonstrasi. Baiklah berikut ini demo dari tutorial yang saya jelaskan ini. silahkan klik tautan berikut ini.


Itulah cara pasang Formulir Kontak WhatsApp dengan Gaya Material Desain. Agak rumit sih, tapi semoga kamu paham, kalau tak paham coba bertanya di komentar.


Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel