Integrasi dengan Contact Form 7

Dengan integrasi ini, setiap kali ada yang mengisi form Contact Form 7 di situs Kamu, WatZap otomatis mengirim pesan WhatsApp ke nomor yang mereka isi. Kamu juga bisa menerima notifikasi ke nomor WhatsApp Kamu sendiri.

Ringkasan alur (sekitar 15 menit):

1. Pasang WatZap dan hubungkan akun. Ini cukup sekali untuk semua integrasi.

2. Buat form di Contact Form 7.

3. Pasang form di halaman situs.

4. Hubungkan form itu di WatZap.

5. Tulis pesan WhatsApp-nya.

6. Uji coba.

Untuk gambaran umum, Kamu bisa cek video berikut. Tampilan di video masih memakai plugin versi lama, jadi ikuti langkah tertulis di bawah untuk plugin versi terbaru.

Panduan ini untuk plugin WatZap.id dari direktori plugin WordPress. Jika di halaman Plugins nama plugin Kamu masih WatZap (tanpa ".id"), berarti Kamu masih memakai plugin lama dari file zip. Ikuti Pindah dari plugin lama versi zip terlebih dahulu.

Bahasa plugin mengikuti bahasa WordPress Kamu. Panduan ini memakai label Bahasa Indonesia, dengan padanan bahasa Inggrisnya dalam kurung.

Istilah yang akan Kamu temui

• API Key: kode 16 digit dari akun WatZap Kamu. Fungsinya seperti kunci supaya plugin di WordPress boleh mengirim pesan lewat akun WatZap Kamu.

• Nomor pengirim dan Rotasi: nomor WhatsApp yang sudah Kamu hubungkan di aplikasi WatZap. Yang tombol Rotasi-nya menyala dipakai bergantian untuk mengirim pesan.

• Kanal Regular dan Official (WABA): Regular mengirim teks bebas dari nomor WhatsApp biasa. Official mengirim template resmi lewat WhatsApp Business API. Pemula cukup memakai Regular.

• Variabel: kode seperti {your-name} yang otomatis diganti dengan isian pengunjung, misalnya namanya.

Langkah 1: Pasang WatZap dan hubungkan akun

Jika Kamu sudah pernah menghubungkan WatZap di situs ini, misalnya untuk WooCommerce, lewati ke Langkah 2.

1a. Pasang plugin WatZap

1. Di dashboard WordPress, buka Plugins » Add New Plugin.

2. Ketik WatZap.id di kolom pencarian.

3. Pada kartu plugin WatZap.id, klik Install Now, lalu Activate.

4. Setelah aktif, muncul menu WatZap di sidebar WordPress.

Plugin ini butuh WordPress 6.8 ke atas. Kalau hosting Kamu tidak mengizinkan pemasangan plugin dari dashboard, lihat cara lainnya di Memasang Plugin WatZap di WordPress.

1b. Hubungkan API Key

1. Ambil API Key Kamu dengan mengikuti Mendapatkan API Key di Member Area.

2. Buka WatZap » WhatsApp Numbers. Di pojok kanan atas ada tombol bertuliskan Belum terhubung. Klik tombol itu.

3. Isi kolom API Key, lalu klik Hubungkan (Connect).

Jika berhasil, panelnya berubah menjadi seperti ini: ada tanda Terhubung ke akun WatZap dan nama paket Kamu.

Panel Koneksi akun setelah API Key berhasil dihubungkan

1c. Pastikan ada nomor pengirim

Masih di halaman WhatsApp Numbers, lihat tab WhatsApp Unofficial. Harus ada minimal satu nomor berstatus Tersambung dengan tombol Rotasi menyala. Nomor inilah yang akan mengirim pesan ke pengisi form.

Halaman WhatsApp Numbers dengan nomor Tersambung dan Rotasi menyala

Kalau daftarnya kosong, hubungkan nomor dulu lewat Menambahkan Nomor WA untuk API, lalu kembali ke halaman ini dan klik Sinkronkan (Sync).

1d. Pasang Contact Form 7

Buka Plugins » Add New Plugin, cari Contact Form 7, klik Install Now, lalu Activate. Setelah aktif, muncul menu Contact di sidebar WordPress.

Langkah 2: Buat form di Contact Form 7

1. Buka Contact » Add New dan beri nama form, misalnya "Form Konsultasi".

2. Di tab Form ada kotak berisi kode form. Tambahkan kolom nomor WhatsApp dengan menempel baris berikut di bawah kolom nama:

<label> Nomor WhatsApp
    [tel* nomor-whatsapp placeholder "08xxxxxxxxxx"] </label>

Hasilnya kurang lebih seperti ini. Perhatikan nomor-whatsapp di dalam kurung siku, itu nama field yang nanti dikenali WatZap.

Editor Contact Form 7: kode form dengan field nomor-whatsapp dan shortcode di bagian atas

1. Klik Save. Di bagian atas muncul shortcode berwarna biru, misalnya [contact-form-7 id="123" title="Form Konsultasi"]. Salin shortcode itu, Kamu butuh di Langkah 3.

Pakai nama field yang mengandung kata whatsapp, wa, atau phone supaya WatZap otomatis memilihnya sebagai kolom nomor WhatsApp di Langkah 4. Nama field lain seperti your-name nanti bisa dipakai sebagai variabel di isi pesan.

Langkah 3: Pasang form di halaman

1. Buka Pages » Add New dan beri judul halaman, misalnya "Hubungi Kami".

2. Tambahkan blok Shortcode, lalu tempel shortcode Contact Form 7 tadi. Jika situs Kamu memakai editor klasik, tempel shortcode langsung ke kotak teks.

3. Klik Publish, lalu salin alamat halaman itu dari address bar browser. Alamat ini dibutuhkan di Langkah 4.

Di halaman situs, form-nya akan tampil kurang lebih seperti ini. Pemilih bendera pada kolom nomor baru muncul setelah opsi kode negara diaktifkan di Langkah 5.

Tampilan form Contact Form 7 di halaman situs

Gunakan halaman yang hanya berisi satu form, dan pastikan halaman bisa dibuka tanpa login. WatZap akan membaca halaman itu untuk mencari form-nya, dan form lain di halaman yang sama bisa membuat form CF7 tidak terdeteksi.

Langkah 4: Hubungkan form di WatZap

1. Buka WatZap » Custom Form, lalu klik Add New Form.

Halaman Custom Form berisi daftar integrasi dan tombol Add New Form

1. Panel Tambah Form Baru (Add New Form) terbuka pada Langkah 1 dari 2 · Pilih plugin form. Pilih Contact Form 7. Jika tertulis Not installed, berarti Contact Form 7 belum aktif. Kembali ke Langkah 1d.

2. Klik Lanjut (Continue).

Langkah 1 dari 2: memilih plugin form

1. Di Langkah 2 dari 2 · Susun pesannya, tempel alamat halaman form ke kolom URL halaman form (Landing page URL), lalu klik Pindai (Scan).

2. WatZap membaca halaman itu dan menampilkan hasil pindai: Page, Form (.wpcf7-form), dan daftar Fields yang ditemukan. Field yang diawali _wpcf7 adalah field internal Contact Form 7, abaikan saja. Jika muncul There's no form detected on this landing page, cek lagi alamatnya dan pastikan form tampil di halaman itu.

3. Pastikan dropdown Kolom nomor WhatsApp (WhatsApp number field) menunjuk ke {nomor-whatsapp}.

4. Isi Nama integrasi (Integration name), misalnya "Form Konsultasi". Nama ini hanya untuk Kamu sendiri.

Hasil pindai halaman Contact Form 7: form .wpcf7-form beserta daftar field dan kolom nomor WhatsApp

Integrasi Contact Form 7 memantau semua form Contact Form 7 di situs Kamu, bukan hanya form di halaman yang dipindai. Jika Kamu punya beberapa form CF7, pakai nama field nomor WhatsApp yang sama di semuanya, misalnya nomor-whatsapp.

Pesan WhatsApp dikirim begitu form lolos validasi Contact Form 7, yaitu tidak ada field wajib yang kosong dan kiriman tidak ditandai spam. Email dari Contact Form 7 yang gagal terkirim tidak menghalangi pesan WhatsApp.

Langkah 5: Tulis pesan

Pesan untuk pengirim

Bagian Pesan untuk pengirim (Message to the sender) adalah pesan yang diterima pengunjung setelah mengisi form. Biarkan kanal pada pilihan Regular.

1. Tulis pesan di kolom teks. Tombol B, I, dan S memberi format tebal, miring, dan coret seperti di WhatsApp.

2. Untuk menyapa dengan nama, klik Variabel (Variables) lalu pilih {your-name}. Kode itu otomatis diganti dengan nama pengunjung saat dikirim.

3. Jika ingin menyertakan gambar atau file, klik Media, lalu pilih Unggah berkas (Upload file) atau Dari URL (From URL). Format yang didukung: PDF, DOC, PNG, JPG, dan GIF.

Pesan untuk pengirim pada kanal Regular dengan variabel form

Opsional: kirim lewat kanal Official (WABA)

Kanal Official memakai nomor WhatsApp Business API dan hanya bisa mengirim template yang sudah disetujui Meta. Syaratnya: nomor WABA sudah terhubung dan ada template yang disetujui.

Klik Official (WABA), pilih template dari daftar Approved template, lalu isi tiap variabel template dengan field form yang sesuai lewat dropdown select a field. Pratinjau template tampil di bawahnya.

Pesan untuk pengirim pada kanal Official (WABA) dengan template terpilih

Kode negara dan halaman terima kasih

• Nyalakan Tambahkan kode negara pada nomor dari form ini (Add a country code to numbers from this form) jika pengunjung biasanya mengisi nomor lokal seperti 0812xxxxxxx. Biarkan kode negaranya +62 untuk Indonesia. Dengan opsi ini, kolom nomor di form Kamu menampilkan pemilih bendera, dan angka 0 di depan otomatis diganti 62.

• Nyalakan Alihkan setelah form dikirim (Redirect after the form is submitted) jika Kamu ingin pengunjung diarahkan ke halaman terima kasih. Isi alamat lengkapnya, misalnya https://situskamu.com/terima-kasih.

Opsi kode negara dan pengalihan setelah form dikirim

Notifikasi ke nomor Kamu sendiri

Nyalakan Beri tahu admin juga (Also notify an admin) jika Kamu ingin tahu setiap ada yang mengisi form.

1. Isi Nomor WhatsApp admin (Admin WhatsApp number) dengan satu nomor, tanpa angka 0 di depan, misalnya 81234567890.

2. Tulis Pesan untuk admin (Message to admin). Pakai variabel {your-name} dan {nomor-whatsapp} supaya Kamu langsung tahu siapa yang mengisi.

Kartu Beri tahu admin juga dengan nomor dan pesan admin

Simpan

Klik Simpan integrasi (Save integration). Halaman dimuat ulang dan muncul notifikasi Integrasi disimpan. Integrasi baru langsung aktif dan tampil di daftar Custom Form.

Untuk mengubah atau menghapus integrasi nanti, klik menu titik tiga di ujung baris, lalu pilih Ubah integrasi (Edit integration) atau Hapus (Delete). Untuk berhenti mengirim sementara, matikan saja toggle Status.

Menu titik tiga di baris integrasi: Ubah integrasi dan Hapus

Langkah 6: Uji coba

1. Buka halaman form di situs Kamu lewat browser, seperti pengunjung biasa.

2. Isi form dengan nomor WhatsApp Kamu sendiri, lalu klik tombol kirim. Tunggu sampai Contact Form 7 menampilkan pesan bahwa form sudah terkirim.

3. Dalam beberapa detik, pesan yang Kamu tulis di Langkah 5 masuk ke WhatsApp Kamu. Jika notifikasi admin dinyalakan, nomor admin juga menerima pesan.

Kalau pesan tidak masuk, cek satu per satu:

• Contact Form 7 tidak menampilkan galat validasi, misalnya field wajib kosong atau kiriman ditandai spam.

• Di WatZap » WhatsApp Numbers, nomor pengirim berstatus Tersambung dan Rotasi menyala.

• Jika situs Kamu memakai plugin cache, bersihkan cache halaman lalu coba lagi.

• Masih gagal? Lihat Solusi Kendala Kirim Pesan via API.

Lihat juga: Integrasi dengan WPForms dan Integrasi dengan KIRIM.EMAIL.