Membuat Form yang Terhubung dengan whatsapp

Apa yang terjadi saat pengguna mengisi form? biasanya pengguna akan menerima email pemberitahuan dan menunggu balasan.

Kendala yang paling sering muncul adalah email tidak terkirim ke admin maupun email masuk ke spam.

Lalu sebagian pengelola website berpikir untuk menggunakan whatsapp sebagai metode pengiriman notifikasi maupun informasi suatu orderan.

Apa bisa dilakukan?

Tentu saja bisa!

Tutorial berikut akan mengarahkan cara membuat form yang terhubung dengan whatsapp dengan 2 cara.

1. Redirect

Whatsapp memiliki alamat redirect untuk mengarahkan pengguna untuk berkomunikasi dengan pengguna whatsapp lainnya.

Biasanya akan menggunakan format https://api.whatsapp.com/send?phone=NomorTeleponWhatsap&text=Teks

Jadi isi dari form tadi akan di redirect menuju whatsapp pengguna.

Langkah pertama adalah membuat html formnya

<form id="salsa" method="POST" accept-charset="utf-8">
<div class="form-group">
<div class="input Nomer"><label for="Nomer">Your Number</label><input placeholder="62812xxxx" name="nomer" type="number" class="form-control" id="nomer" required /></div>
</div>
<div class="form-group">
<div class="input nama"><label for="nama">Your Name</label><input placeholder="nama" name="nama" type="text" class="form-control" id="nama" required /></div>
</div>
<div class="form-group">
<div class="input pesan"><label for="pesan">Message</label><textarea class="form-control" rows="4" id="pesan" name="pesan" placeholder="pesan"></textarea></div>
</div>
<div class="form-group">
<div class="submit"><button type="submit" id="btn-wa" class="btn btn-primary btn-user btn-block">Send</button>
</div>
</form>

Html diatas akan membuat form default dan bisa diubah sesuai dengan kebutuhan.

Kemudian membuat skrip untuk melakukan redirect ke whatsapp.

<script type="b81031a443e8c52bbfdadb60-text/javascript">
$("#btn-wa").click(function(){
    var nomor = document.getElementById('nomer').value;
    var pesan = document.getElementById('pesan').value;
    var win = window.open('https://api.whatsapp.com/send?phone='+nomor+'&text='+pesan);
    if (win) {
        //Browser has allowed it to be opened
        win.focus();
    } else {
        //Browser has blocked it
        alert('Please allow popups for this website');
    }
return false;
});
</script>

Sudah selesai.

2. API

Yang kedua adalah menghubungkan form dengan whatsapp melalui api.

Apa bedanya dengan cara redirect?

Cara redirect menghubungkan langsung pengguna dengan admin sedangkan dengan cara api lebih digunakan untuk notifikasi.

contohnya ketika pengguna mengisi dan mengirimkan contact form, dengan redirect pengguna akan membuka aplikasi whatsapp dan dihubungkan langsung dengan admin dan menunggu respon. Sedangkan dengan api, pengguna akan menerima notifikasi terlebih dahulu sebelum admin merespon.

Untuk membuat form dengan api, diperlukan api key untuk mengirim pesan.

Silakan daftar terlebih dahulu.

Langkah berikutnya adalah membuat kerangka html untuk membuat formnya

<form id="salsa" method="POST" accept-charset="utf-8">
    <center>
    <label>Your Number</label><input placeholder="62812xxxx" name="nomer" type="number" id="nomer" required/>
	<br>
	<label>Your Name</label><input placeholder="nama" name="nama" type="text" id="nama" required/>
	<br>
    <label>Message</label><textarea rows="4" id="pesan" name="pesan" placeholder="pesan"></textarea>
    <br>
    <br>
    <button type="submit" id="btn-kirim" >Kirim</button>
    </center>
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script>
$("#btn-kirim").click(function(){
$.ajax({
    url: "proses.php",
    type: "post",
    data: $('#salsa').serialize(),
    success: function (response) {
        alert(response);
    },
    error: function(jqXHR, textStatus, errorThrown) {
       console.log(textStatus, errorThrown);
    }
});
return false;
});
</script>

Kemudian integrasikan dengan fonnte untuk menggunakan api.

Skrip dibawah ini menggunakan 2 kali pengiriman ketika melakukan submit yaitu notifikasi kepada admin dan notifikasi kepada pengguna.

<?php

function send($target, $pesan){
    $curl = curl_init();
    
    $data = [
        'phone' => $target,
        'type' => 'text',
        'delay' => 0,
        'delay_req' => 0,
        'text' => $pesan
    ];
    
    curl_setopt($curl, CURLOPT_HTTPHEADER,
        array(
            "Authorization: TOKEN MU",
        )
    );
    curl_setopt($curl, CURLOPT_CUSTOMREQUEST, "POST");
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_POSTFIELDS, http_build_query($data));
    curl_setopt($curl, CURLOPT_URL, "https://fonnte.com/api/send_message.php");
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 0);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0);
    $result = curl_exec($curl);
    curl_close($curl);
    
    return $result;
}

if (isset($_POST['nomer']) and isset($_POST['nama']) and isset($_POST['pesan'])) {
    
    $nomer = $_POST['nomer'];
    $nama = $_POST['nama'];
    $pesan = $_POST['pesan'];
    
    if ($nomer == "" or $nama == "" or $pesan == "") {
        echo "Ulangi Lagi"; exit;
    } else {
        
        if(strpos(substr($nomer,0,3), '08') !== false){
        	$awal = str_replace("08", "628", substr($nomer,0,3));
        	$nomer = $awal. substr($nomer,3);
        }
        
        $kirim = json_decode(send($nomer, "Halo ada yang mengisi form dengan data\n\nnama: ".$nama."\npesan: ".$pesan."\n\nsegera follow up!\n\n*ini pesan untuk admin"), true);
        $kirim1 = json_decode(send($nomer, "Terimakasih telah menghubungi kami. ini adalah pesan notifikasi bahwa kami telah menerima pesan anda. kami akan segera menghubungi kembali.\n\nTerimakasih\n\n*ini pesan untuk customer"), true);
        if ($kirim['status'] == true and $kirim1['status'] == true) {
            echo "Pesan telah dikirim"; exit;
        } else {
            echo "Pesan gagal dikirim"; exit;
        }
            
    }
    
} else {
    echo "Silahkan coba lagi";
}



?>

Dengan ini, pesan notifikasi akan dikirimkan setelah pengguna melakukan submit form.

Leave a Comment