Bagikan

Cara Membuat Widget Contact Form WhatsApp

Cara Membuat Widget Contact Form WhatsApp

1 September, 2018 - 2:13 pm (WIB)

5238x dilihat
contact, contact form, custom, field, form, whatsapp,  cara membuat form whatsapp, contact form whatsapp, form website whatsapp, whatsapp open-source

Custom Widget Contact Form WhatsApp – Pada postingan ini mimin ingin berbagi sedikit source code Widget Contact Form WhatsApp yang digunakan website ini, Widget Contact Form WhatsApp ini berfungsi untuk mengarahkan pengunjung website agar menghubungi admin secara langsung melalui whatsapp dengan menggunakan Widget Contact Form WhatsApp untuk mendapatkan informasi seperti: nama, e-mail, dan pesan awal pengunjung sebelum memulai chatting..

 

Bagi anda yang penasaran, seperti apa Widget Contact Form WhatsApp ini, silahkan klik tombol Demo dibawah ini:

 

  Live Demo  JSFiddle

 

Cara membuat Widget Contact Form WhatsApp :

  1. Buat Kode HTML dengan beberapa input text & textarea untuk membuat form pengambilan informasi Nama, E-mail dan Pesan awal sebelum memulai chat.
    <i class="whatsapp-btn">WhatsApp</i>
    <div id="whatsapp">
    <input class="tujuan" type="hidden" value="089618885066"> <!-- No. WhatsApp -->
    <label>
    <input class="nama" type="text" placeholder="Nama Lengkap..">
    </label>
    <label>
    <input class="email" type="email" placeholder="Alamat E-mail..">
    </label>
    <label>
    <textarea class="pesan" placeholder="Pesan.."></textarea>
    </label>
    <a class="submit">Kirim</a>
    </div>

    *Pengaturan: Ubah No. Telepon 0896188850666 pada kode HTML di atas dengan No. Telepon WhatsApp anda.
  2. Simpan kode CSS dibawah ini tepat di atas tag </head>
    <style type="text/css">
    * {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
    outline:none;
    margin:0;
    padding:0;
    }
    .whatsapp-btn {
    cursor:pointer;
    position:fixed;
    bottom:40px;
    right:40px;
    display:block;
    width:50px;
    height:50px;
    border-radius:50px;
    text-indent:-9999px;
    background:#fff url(https://lh3.googleusercontent.com/-evFtor-f_w8/W4pfajfP17I/AAAAAAAAE9E/f7H52hrT5UoY4ZqdkxSGh2ZftYrH8fiDwCLcBGAs/s300/Whatsapp.png) no-repeat center center;
    background-size:50% auto;
    box-shadow:0 20px 25px rgba(0,0,0,.05);
    transition:.2s;
    }
    .whatsapp-btn:active {
    bottom:35px;
    }
    #whatsapp {
    position:fixed;
    z-index:+100;
    bottom:0px;
    right:0px;
    display:block;
    background:#fff;
    box-shadow:0 20px 25px rgba(0,0,0,.05);
    max-width:300px;
    font-family:Helvetica, sans-serif;
    font-size:90%;
    border-radius:4px;
    visibility:hidden;
    opacity:0;
    transition:.3s;
    }
    #whatsapp.toggle {
    bottom:110px;
    right:40px;
    visibility:visible;
    opacity:1;
    }
    @media(max-width:320px) {
    .whatsapp-btn {
    bottom:10px;
    right:10px;
    }
    #whatsapp.toggle {
    bottom:80px;
    right:10px;
    visibility:visible;
    opacity:1;
    }
    }
    #whatsapp label,
    #whatsapp a {
    display:block;
    margin:15px;
    text-decoration:none;
    }
    #whatsapp input,
    #whatsapp textarea {
    display:block;
    border:1px solid #eee;
    box-shadow:inset 0 2px 5px #eee;
    width:100%;
    padding:15px;
    border-radius:2px;
    }
    #whatsapp input.nama {
    text-transform:capitalize;
    }
    #whatsapp input:focus,
    #whatsapp textarea:focus {
    border:1px solid #ddd;
    }
    #whatsapp textarea {
    min-height:80px;
    resize: none;
    }
    #whatsapp a {
    cursor:pointer;
    display:block;
    padding:10px;
    font-weight:bold;
    text-align:center;
    background:#25D366;
    color:white;
    border-radius:2px;
    }
    #whatsapp a:hover {
    background:#20b558;
    }
    </style>
  3. Terakhir! simpan kode jQuery dibawah ini tepat di atas tag </body>
    <script type="text/javascript">
    $('.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 .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 + '&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>


    Catatan: Kode jQuery akan berfungsi jika anda menginstall jQuery Library, Jika anda belum menginstall kode jQuery Library, silahkan copy-paste kode dibawah ini tepat sebelum tag </head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Sekian postingan tentang Cara Membuat Widget Contact Form WhatsApp, jika ada pertanyaan silahkan tuliskan melalui kotak Komentar dibawah ini.


#  #  #  #  #  #

Sudah cek? Jasa Pembuatan Website di Bandung..
  Jasa-Design.web.id

Cek selengkapnya
Saya ingin,

  Kirim WhatsApp

Title - Jasa Desain Website & Grafis di Bandung

Ikuti kami..