Pernahkah kamu mendapati suatu formulir di website tertentu lalu kemudian user mengisinya sehingga terhubung ke Whatsapp? Ya, itu ialah web form submission yang diarahkan langsung ke whatsapp customer services. Teknik ini tergolong efektif dan agak lumayan tarifnya apabila ditetapkan rate clicknya seperti yang digunakan pad concept FB Ads.

Namun yang akan kita bahas kali ini ialah, bagaimana caranya agar suatu element *Form* tersebut bisa terhubung dengan whatsapp kemudian pesannya terkirim langsung dari situ, apakab bisa tanpa system khusus? Jawabannya bisa dan mudah. Yang anda butuhkan ialah:

1. ID nama setiap element yang terkandung pada form tersebut
2. Nomor tujuan WA (customer services -tadi contohnya)
3. Dan format pesan yg diinginkan untuk dikirim.

Seperti apa teknisnya? Yuk, kita dekati dengan 2 pendekatan.

Langkah #1 : Siapkan Web Form 💻

Anda sudah tahu tentang html kan? Maka tidak asing lagi kalau kita membongkar sebuah form element. Seperti ini misalnya:

Form ini kita pakai juga dari halaman ini. ♛

Langkah #02 : Bumbu Javascript + JQuery ✨

Yang disebut javascript disini ialah code dan JQuery ialah library pokoknya. Tentunya karena kita bermain dengan website, maka letakkan script ini di bagian head element. Apa saja yang ditulis? Ini dia…

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

<script>
 $(document).ready(function () {
    waClickSend();
});

function waClickSend() {
    const form = $("#formulir-pendaftaran");

    form.on("submit", function (event) {
        event.preventDefault();

        let nama = $("#namaLengkap").val();
        let email = $("#emailAddress").val();
        let wa = $("#noWhatsappAktif").val();
        let catatan = $("#catatan").val();
        let text = `Hello *Admin* saya butuh bantuan! Nama : ${nama} dan emailnya ${email} Begini nih... ${catatan}`;

        let pesan = encodeURIComponent(text);
        let phoneNumber = "085795569337";
        let whatsappUrl = `https://api.whatsapp.com/send?phone=${phoneNumber}&text=${pesan}`;

        window.location.href = whatsappUrl;
    });
}

 
</script>

Seperti yang bisa kita perhatikan pada code javascript diatas. Tiap elementnya tersimpan dalam variable : nama, email, wa, dan catatan. Lalu dimana ID tiap element tersebut? Tentu saja terhubung dengan:

• variable nama menarik value dari #namaLengkap (ini ID nya).
• variable email menarik value dari #emailAddress (ini juga ID nya)
• dst… sudah fahamkan? 🤗

Langkah #03 : Test Final 🎯

Dan kita bisa save document tadi. Kemudian tekan CTRL + F5 untuk siap melakukan testing pengisian dan lihat hasilnya! Tadaaaa….

Anda berhasil! 😊

OK, integrasi ini bisa digunakan diberbagai form dan juga tujuan lainnya! Kalau kamu memiliki sistem web yang serupa dan ingin untuk bersegera menerapkan flow tadi. Segera hubungi tim kami untuk penanganan konsultasi teknis langsung, ya! Good luck!⋆.˚🦋༘⋆