Membuat Form yang Terhubung dengan whatsapp

Post Views: 7,346

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

Kemudian integrasikan dengan fonnte untuk menggunakan api.

Skrip dibawah ini hanya mengirimkan pesan kepada pengguna.

<?php

if (isset($_POST["submit"])) {
    $nama = $_POST["nama"];
    $alamat = $_POST["alamat"];
    $whatsapp = $_POST["whatsapp"];

    $curl = curl_init();

    curl_setopt_array($curl, array(
        CURLOPT_URL => 'https://api.fonnte.com/send',
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_ENCODING => '',
        CURLOPT_MAXREDIRS => 10,
        CURLOPT_TIMEOUT => 0,
        CURLOPT_FOLLOWLOCATION => true,
        CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
        CURLOPT_CUSTOMREQUEST => 'POST',
        CURLOPT_POSTFIELDS => array(
            'target' => $whatsapp,
            'message' => "Terimakasih $nama sudah mengisi form.",
            'countryCode' => '62', //optional
        ),
        CURLOPT_HTTPHEADER => array(
            'Authorization: TOKEN' //change TOKEN to your actual token
        ),
    ));

    $response = curl_exec($curl);

    curl_close($curl);
}

?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <?php if (isset($response)) {
        $result = json_decode($response, true);
        $alert = $result["status"] ? $result["detail"] : $result["reason"]; ?>
        <script>
            alert("<?= $alert ?>")
        </script>
    <?php }
    ?>

    <div style="width: 100%;max-width: 600px;margin: auto;border-radius: 10px;box-shadow: 0px 0px 10px -7px;padding: 20px;">
        <h2 style="
    text-align: center;
">Form</h2>
        <form action="" method="POST">
            <div style="
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
">
                <label for="nama" style="
    margin-bottom: 5px;
">Nama</label>
                <input type="text" name="nama" style="
    border: none;
    border-bottom: 2px groove;
    padding: 8px;
">
            </div>
            <div style="
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
">
                <label for="alamat" style="
    margin-bottom: 5px;
">Alamat</label>
                <textarea name="alamat" rows="5" style="
    border: none;
    border-bottom: 2px groove;
    padding: 8px;
"></textarea>
            </div>
            <div style="width: 100%;display: flex;flex-direction: column;margin-bottom: 20px;">
                <label for="whatsapp" style="
    margin-bottom: 5px;
">Whatsapp</label>
                <input type="text" name="whatsapp" style="
    border: none;
    border-bottom: 2px groove;
    padding: 8px;
">
            </div>
            <div style="
    display: flex;
    justify-content: end;
"><button type="submit" name="submit" style="
    background: lightseagreen;
    padding: 12px 48px;
    border: none;
    color: white;
    border-radius: 10px;
    cursor: pointer;
    margin: 20px 0;
">Submit</button></div>
        </form>
    </div>
</body>

</html>

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

Integrasi dengan WordPress

Demikian cara membuat form yang terhubung dengan whatsapp dari fonnte.

Bagi yang menggunakan CMS wordpress, bisa menggunakan plugin contact form whatsapp.

Plugin ini terintegrasi dengan contact form 7 untuk memudahkan membuat form.

12 thoughts on “Membuat Form yang Terhubung dengan whatsapp”

    • bisa banget mas andre. tinggal di tangkap aja mas isi dari formnya. alurnya gini mas :

      mas buat koneksi ke database, buat kueri ke database, masukin ke database. disitu isi dari formnya sudah ditangkap pakai variabel $nomer, $nama, $pesan. jadi tinggal diinsert aja mas

      Reply

Leave a Comment