Membuat Form Kirim ke Whatsapp Menggunakan HTML JavaScript

Dalam posting ini, saya akan menjelaskan bagaimana kita bisa mengirimkan formulir HTML ke WhatsApp tanpa whatsapp gateway. Dengan menggunakan fungsi ini, data dari form akan dibawa ke antarmuka obrolan WhatsApp. Kita akan membuat contoh form yang ketika diisi datanya otomatis akan langsung kirim meggunakan whatsapp. Form ini hanya terdiri dari file HTML dan JavaScript saja tanpa API maupun gateway. Cocok digunakan sebagai kontak form pada sebuah website.

Langkah 1 : Membuat Kode HTML

Pertama, kita perlu mendesain form HTML dan memberikan id pada setiap kolom input karena id ini akan digunakan dalam kode JavaScript untuk mengirim data ke WhatsApp.

Kemudian di dalam form kita juga buat sebuah button submit yang jika tombol itu di klik akan mengirim semua data dikolom ke whatsapp. Berikut adalah contoh formulir sederhana untuk mengisi data kontak dan pesan.

<form action="#" class="form-group" id="whatsappForm">
        <div class="form-group mb-3">
            <input type="text" id="name" class="form-control" placeholder="Nama Depan" required>
        </div>
	<div class="form-group mb-3">
            <input type="text" id="surename" class="form-control" placeholder="Nama Belakang" required>
        </div>
        <div class="form-group mb-3">
            <input type="email" id="email" class="form-control" placeholder="Email" required>
        </div>
        <div class="form-group mb-3">
            <textarea id="message" cols="30" rows="5" class="form-control" placeholder="Pesan"></textarea>
        </div>
        <div class="text-end">
            <button type="submit" class="btn btn-primary">Kirim Whatsapp</button>
        </div>
   </form>

Langkah 2 : Membuat Fungsi JavaScript

Sekarang, Buat fungsi JavaScript bernama addEventListener fungsi ini akan dipanggil ketika seseorang mengklik tombol formulir dan dengan menggunakan fungsi ini data akan dikirim ke antarmuka WhatsApp. Jadi pertama-tama kita perlu mengambil beberapa variabel yang digunakan untuk menampung nilai kolom input.

document.getElementById("whatsappForm").addEventListener("submit", function (event) {
            event.preventDefault();

            var name		= document.getElementById("name").value;
            var surename 	= document.getElementById("surename").value;
            var email 		= document.getElementById("email").value;
            var message 	= document.getElementById("message").value;
            let contact 	= 'nomor WA kamu'; // isi dengan nomor WA (+6283811223344)

            var encodedMessage = encodeURIComponent(
                "Nama Depan	: " + name + "\n" +
                "Nama Belakang	: " + surename + "\n" +
                "Email		: " + email + "\n" +
                "Pesan		: " + message
            );

            var link;

            // Check if user is on a mobile device
            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
                link = `whatsapp://send?phone=${contact}&text=${encodedMessage}`;
            } else { // Desktop device
                link = `https://api.whatsapp.com/send?phone=${contact}&text=${encodedMessage}`;
            }

            window.open(link, '_blank');
});

Demikianlah cara membuat form kirim langsung ke whatsapp menggunakan HTML dan JavaScript. Semoga bermanfat dan salam.