Bagikan

Cara Membuat Widget Contact Form WhatsApp

Cara Membuat Widget Contact Form WhatsApp

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

8503x 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

  Jasa-Design.web.id

× Sudah Cek? Toko WhatsApp.
Premium Blogger Template

blogger, Contact Form WhatsApp, E-commerce, Formulir, Kontak, template, toko online, whatsapp

Toko WA! Template Toko Online WhatsApp #1 di Indonesia ( WordPress & Blogger )

Toko Online / E-commerce berbasis WordPress & Blogger yang diintegrasikan dengan Formulir Kontak WhatsApp (Instant Checkout).

toko whatsapp, toko wa, toko online whatsapp, toko online wa, toko whatsapp wordpress, toko whatsapp blogger, toko wa wordpress, toko wa blogger Template Toko Online WhatsApp #1 di Indonesia ( WordPress & Blogger )

Kang Rian

Website Designer sekaligus penulis Tutorial Blogger, dan Optimasi SEO.

kangrian, kang rian, desain web, desain website, web designer, tutorial blogger, optimasi seo Digital Creator

Jasa Desain Website & Grafis ( Web & Graphic Designer ) di Bandung - www.jasa-design.web.id

Berpengalaman sejak 2010, fokus membantu bisnis UKM agar dikenal secara global melalui website & desain yang menjual & profesional.

jasa desain bandung, jasa pembuatan website bandung, desain bandung, jasa buat website bandung, domain, web hosting, domain name, web design bandung, web designer bandung, design web bandung, desain web bandung, nama domain, daftar domain, domain cek Web & Graphic Designer Terbaik di Bandung