Cara Membuat Widget Contact Form WhatsApp

Cara Membuat Widget Contact Form WhatsApp

Cara Membuat Custom Widget Contact Form WhatsApp - Kali ini saya akan membagikan sebuah tutorial yang anti mainstream seperti biasanya yaitu, tutorial membuat widget Contact Form WhatsApp dimana tutorial ini sama saja dengan Tutorial Membuat Contact Form pada umumnya. Yang membedakan disini hanya Arah Action nya saja, Jika widget Contact Form pada umumnya mengarah ke Email atau ke Fanspage Facebook, maka di tutorial ini mengarah ke WhatsApp.

Dimana keuntungan yang di dapat banyak sekali, jika Sobat mempunyai Web Bisnis, atau Web Download dan sobat hanya bisa on 24jam di WhatsApp saja maka Sobat tidak perlu bingung, widget ini sangat cocok untuk web2 yang mengedepankan komunikasi bersama visitor :3 hehe.


Cara Membuat Custom Widget Contact Form WhatsApp

  1. Buka situs sobat
  2. Masuk Ke Edit Template/Tema Sobat
  3. Jika sudah, masukkan Jquery + Font-Awesome berikut sebelum tag </head>
    Periksa Dahulu Jika sudah ada tidak usah di pasang lagi.
  4.  <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>
  5. kemudian, Masukkan CSS ini Sebelum Tag </style> atau </b:skin>
    Untuk Wordpress Menyesuaikan yaa..
  6.  /*==Custom Widget Contact form WhatsApp By Codepelajar.com ==*/
    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;
    }
    }
  7. Jika sudah, letakkan HTML berikut tepat di atas tag </body>
  8.  <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>
  9. BerikutNya, letakkan Script berikut di bawah script html tadi, atau tepatnya letakkan sebelum tag </body>
  10.  <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 + '&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>
  11. Jika sudah save template.

Itulah Tutorial Singkat tentang Cara Membuat Custom Contact Form WhatsApp, Untuk Wordpress Bisa di sesuaikan ya.. jika ada kesulitan silahkan bertanya pada kolom komentar

Reference

Saya membuat artikel ini tidak sendirian, saya juga melirik beberapa referensi untuk menambah wawasan saya dalam membuat artikel ini.

- https://www.jasa-design.web.id/info/cara-membuat-widget-contact-form-whatsapp/

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel