> For the complete documentation index, see [llms.txt](https://docs.watzap.id/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.watzap.id/help/integrations/integrasi-dengan-contact-form-7.md). # 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. {% embed url="" %} {% hint style="info" %} Panduan ini untuk plugin **WatZap.id versi 1.1.0** ke atas. Jika di plugin Kamu masih ada tab **API Key** di halaman utama WatZap, berarti plugin Kamu masih versi lama. Unduh file terbaru di Langkah 1 dan unggah ulang lewat menu **Plugins**. Bahasa plugin mengikuti bahasa WordPress Kamu. Panduan ini memakai label Bahasa Indonesia, dengan padanan bahasa Inggrisnya dalam kurung. {% endhint %} ## 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. Unduh file plugin di tautan berikut: [**watzap.zip**](https://digivospaces.b-cdn.net/WatZap/Plugins/watzap.zip). 2. Di dashboard WordPress, buka **Plugins » Add New**, lalu klik **Upload Plugin**. 3. Pilih file `watzap.zip`, klik **Install Now**, lalu **Activate**. 4. Setelah aktif, muncul menu **WatZap** di sidebar WordPress. ### 1b. Hubungkan API Key 1. Ambil API Key Kamu dengan mengikuti [Mendapatkan API Key di Member Area](/help/integrations/mendapatkan-api-key-di-member-area.md). 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](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FbikN8VhqIy8mV8cV4AJv%2Fnomor-whatsapp-koneksi-akun-v2.png?alt=media) ### 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](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FfMJR1VAwXS7RgQ62EFRB%2Fnomor-whatsapp-daftar-v2.png?alt=media) Kalau daftarnya kosong, hubungkan nomor dulu lewat [Menambahkan Nomor WA untuk API](/help/integrations/menambahkan-nomor-wa-untuk-api.md), lalu kembali ke halaman ini dan klik **Sinkronkan** (Sync). ### 1d. Pasang Contact Form 7 Buka **Plugins » Add New**, 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: ``` ``` 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](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FABrIc5uQJ4msDf1M53HK%2Fcf7-editor-form-v2.png?alt=media) 3. 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. {% hint style="info" %} 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. {% endhint %} ## 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](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FJVCfFXLDpv9zGxWEVWSj%2Fcf7-tampilan-halaman-v2.png?alt=media) {% hint style="warning" %} 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. {% endhint %} ## 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](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FAkg0qsWE8HNiUUPlQrsA%2Fcustom-form-daftar-v2.png?alt=media) 2. 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. 3. Klik **Lanjut** (Continue). ![Langkah 1 dari 2: memilih plugin form](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2Fy69EEDHJIseJk5XSOqrA%2Fcustom-form-langkah-1-v2.png?alt=media) 4. Di **Langkah 2 dari 2 · Susun pesannya**, tempel alamat halaman form ke kolom **URL halaman form** (Landing page URL), lalu klik **Pindai** (Scan). 5. 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. 6. Pastikan dropdown **Kolom nomor WhatsApp** (WhatsApp number field) menunjuk ke `{nomor-whatsapp}`. 7. 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](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FLUHu5niGOHYHpvSscdXp%2Fcustom-form-cf7-pindai-v2.png?alt=media) {% hint style="info" %} 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. {% endhint %} ## 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](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FmSP1qCflCabHVEYipHi2%2Fcustom-form-pesan-regular-v2.png?alt=media)
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](/help/waba-official/cara-connect-nomor-waba-official.md) dan [ada template yang disetujui](/help/waba-official/cara-membuat-template-waba-official.md). 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](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2F42368dZbJyjG5bTRUW85%2Fcustom-form-pesan-official-waba-v2.png?alt=media)
### 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](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FJZGSDpLZ9nsNI4tSpPTk%2Fcustom-form-kode-negara-redirect-v2.png?alt=media) ### 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](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FXxwbuSwSj6xp0YOK9JV0%2Fcustom-form-notifikasi-admin-v2.png?alt=media) ### 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](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FuJdx61Md4IKxrzJqWFcp%2Fcustom-form-menu-baris-v2.png?alt=media) ## 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](/help/integrations/solusi-kendala-kirim-pesan-via-api.md). Lihat juga: [Integrasi dengan WPForms](/help/integrations/integrasi-dengan-wpforms.md) dan [Integrasi dengan KIRIM.EMAIL](/help/integrations/integrasi-dengan-kirim.email.md).