Cara Menghubungkan Form Website ke WhatsApp Secara Gratis

Bayangkan skenario ini: Calon pembeli mampir ke website kamu, mereka tertarik, lalu mengisi formulir pemesanan. Biasanya, data ini akan masuk ke email. Pertanyaannya, seberapa cepat kamu membuka email?

Di Indonesia, closing itu terjadinya di WhatsApp. Semakin cepat kamu membalas, semakin besar peluang mereka jadi beli. Kalau notifikasi cuma masuk ke email, seringkali tertimbun spam atau terlambat dibaca.

Solusinya? Arahkan data formulir tersebut langsung ke chat WhatsApp CS atau Admin kamu.

Banyak plugin di luar sana menawarkan fitur ini, tapi mayoritas mengharuskan kamu membayar biaya langganan tahunan yang lumayan menguras kantong (bisa sampai $59 per tahun).

Kabar baiknya, kamu bisa melakukannya secara gratis. Panduan ini akan membongkar cara mudah dan gratis untuk menghubungkan form website ke WhatsApp.

Apa Saja Yang Kamu Perlukan?

Sebelum kita mulai dengan panduannya, ada beberapa hal yang perlu kamu persiapkan:

1. Plugin Contact Form 7 (CF7)
   Kenapa CF7? Karena ini adalah plugin pembuatan form paling populer, gratis, dan sangat ringan. Kita akan pakai ini sebagai base untuk pembuatan form.
2. Plugin “WPCode”
   Kita butuh plugin ini untuk menyisipkan “Script Penghubung” antara form dengan nomor WhatsApp. Dengan plugin ini, kita tidak perlu mengedit file theme yang berisiko membuat website crash.

Sekarang, silahkan pasang dan aktifkan kedua plugin tersebut.

Setelah kamu memasang dan mengaktifkan kedua plugin di atas, kita lanjut ke langkah berikutnya.

Langkah 1: Membuat Form

Sekarang mari kita buat form-nya:

1. Klik menu Contact di sidebar kiri (kalau menu ini tidak muncul, pastikan kamu sudah memasang plugin Contact Form 7).
2. Klik Add New atau Add Contact Form.
3. Masukan “Form Pemesanan WhatsApp” atau judul lain untuk judul form.
4. Hapus semua kode bawaan yang ada di kotak editor, lalu Copy-Paste kode di bawah ini.
   <label> Nama Lengkap
   [text* nama-lengkap placeholder “Nama Kamu”] </label><label> Produk / Layanan yang Diminati
   [text* jenis-produk placeholder “Contoh: Paket A / Baju Merah”] </label><label> Pesan atau Pertanyaan Tambahan
   [textarea pesan-tambahan placeholder “Tulis detail pesanan atau pertanyaanmu di sini…”] </label>[submit “Kirim Pesan”]
5. Kamu boleh mengganti teks label dan placeholder, misalnya “Nama Lengkap” diganti jadi “Siapa Nama Kakak?”. Tapi, JANGAN ubah bagian ID (nama-lengkap, jenis-produk, dan pesan-tambahan) karena ID ini akan kita gunakan di langkah selanjutnya.
6. Klik di tab Additional Settings, kemudian masukan kode ini: skip_mail: on
7. Klik tombol Save di kanan atas.
8. Setelah disimpan, kamu akan melihat kode pendek (shortcode) dengan background biru di bagian atas, contohnya: [contact-form-7 id="1234" title="Form WA"]. Copy kode ini dan tempel (paste) di halaman (Page) di mana kamu ingin formulir itu muncul.

Langkah 2: Membuat Skrip Penghubung

Ini bagian terpentingnya. Secara bawaan, Contact Form 7 hanya bisa mengirim email. Karena itu, kita akan menyiapkan skrip yang bisa “memaksa” plugin ini untuk membuka WhatsApp setelah tombol “Kirim Pesan” ditekan. Caranya adalah sebagai berikut:

1. Di sidebar kiri WordPress, cari menu Code Snippets atau WPCode.
2. Pilih + Add Snippet.
3. Pilih Add Your Custom Code (New Snippet).
4. Beri judul, misalnya “Integrasi WA”.
5. Pada Code Type, pilih JavaScript Snippet.
6. Masukkan kode di bawah ini:document.addEventListener( ‘wpcf7mailsent’, function( event ) {// 1. Ambil data dari formulir
   var inputs = event.detail.inputs;
   var nama = inputs.find(i => i.name == ‘nama-lengkap’).value;
   var produk = inputs.find(i => i.name == ‘jenis-produk’).value;
   var pesan = inputs.find(i => i.name == ‘pesan-tambahan’).value;

   // 2. Susun kalimat pesan untuk WhatsApp.
   var teksWA = “Halo Admin, saya ” + nama + “.\n”;
   teksWA += “Saya tertarik dengan: ” + produk + “.\n”;
   teksWA += “Detail: ” + pesan;

   // 3. Masukkan Nomor WA Tujuan (Ganti dengan nomormu, awali 62)
   var nomorWA = “6281234567890”;

   // 4. Buka WhatsApp otomatis
   var link = “https://wa.me/” + nomorWA + “?text=” + encodeURIComponent(teksWA);
   window.location.href = link;

   }, false );

7. Ganti nomor WA tujuan dengan nomor WA kamu. Gunakan 62 sebagai kode negara, jangan gunakan 0 di awal nomor.
8. Selanjutnya, scroll ke bawah, di bagian Insertion, pilih Site Wide Footer.
9. Dan terakhir, ubah tombol di kanan atas dari Inactive menjadi Active, lalu klik Save Snippet.

Langkah 4: Uji coba Form

Sekarang, kita sudah selesai membuat form dan skrip penghubung antara form website dengan WhatsApp. Selanjutnya, mari kita uji coba apakah form ini berjalan sesuai dengan harapan.

1. Tempelkan shortcode yang kamu dapatkan dari plugin Contact Form 7 di halaman yang ingin kamu munculkan form-nya.
2. Isi formulir dengan data acak untuk keperluan uji coba.
3. Klik tombol “Kirim Pesan” setelah semua data diisi.

Begitu kamu klik tombol kirim:

• Browser seharusnya langsung redirect (dialihkan) ke aplikasi WhatsApp Desktop atau Web WhatsApp.
• Lihat di kolom pengetikan pesan. Apakah pesan yang tersusun sudah rapi dan berisi semua data yang kamu isi di formulir?

Contoh Pesan yang Benar:

Halo Admin, saya Budi.
Saya tertarik dengan: Paket A.
Detail: Ingin konsultasi jam 1 siang.

Jika semua data di atas muncul dengan rapi, SELAMAT! Kamu berhasil menghubungkan form website ke WhatsApp.

Masalah Umum & Solusi

Ketika mengikuti panduan cara menghubungkan form website ke WhatsApp, kamu mungkin menghadapi beberapa masalah berikut:

1. Form tidak muncul atau Contact Form 7 menampilkan “configuration error detected”
   Solusinya: Pastikan kamu menambahkan pengaturan ini “skip_mail: on” ke pengaturan Additional Settings di Contact Form 7.
2. Pesan Tidak Rapi (Berantakan)
   Solusinya: Pastikan kamu memasang skrip yang benar di WPCode. Coba hapus kode yang sudah kamu tempel dan salin lagi skrip yang Kang Opes bagikan di atas.
3. WhatsApp Tidak Terbuka
   Solusinya: Cek kembali nomor yang kamu masukan di skrip. Pastikan nomor sudah tepat dan kamu menggunakan 62 bukan 0 di awal nomor.

Perlu Bantuan Menghubungkan Form Website ke Whatsapp?

Mungkin kamu kesulitan mengikuti panduan di atas. Atau kamu ingin membuat form dengan spesifikasi khusus seperti:

1. Ada pilihan drop-down untuk pilihan produk/jasa.
2. Form dibuat lebih rapi dan profesional dengan desain yang mengikuti brand kamu.
3. Pesan yang dikirim ke WA Admin berbeda-beda tergantung pada pilihan produk yang diklik pengunjung.
4. Atau kebutuhan lainnya.

Kang Opes siap bantu kamu.

Silahkan hubungi Kang Opes dengan cara klik disini.

Pengerjaan bisa selesai sehari dengan biaya hanya Rp. 125.000.