> 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-wpforms.md).

# Integrasi dengan WPForms

Dengan integrasi ini, setiap kali ada yang mengisi form WPForms 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 WPForms.
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="<https://www.youtube.com/watch?v=v9Bzvg0vQD4>" %}

{% hint style="info" %}
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](/help/integrations/memasang-plugin-watzap-di-wordpress.md#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.
{% 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 `{wpforms-12-field_1}` 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](/help/integrations/memasang-plugin-watzap-di-wordpress.md#langkah-1-pasang-plugin-watzap).

### 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 WPForms Lite

Buka **Plugins » Add New Plugin**, cari **WPForms**, klik **Install Now** pada **WPForms Lite**, lalu **Activate**. Versi gratisnya sudah cukup.

## Langkah 2: Buat form di WPForms

1. Buka **WPForms » Add New**, beri nama form, lalu pilih template. Contoh di sini memakai **Simple Contact Form**.
2. Dari panel kiri **Add Fields**, seret field **Numbers** atau **Single Line Text** ke dalam form.
3. Klik field yang baru ditambahkan. Di panel **Field Options**, ubah **Label** menjadi **Nomor WhatsApp** dan nyalakan **Required** supaya wajib diisi.

![Form builder WPForms: field Nomor WhatsApp dengan Required menyala](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FN24ZXOt7p4sYwL8M5xPB%2Fwpforms-builder-nomor-whatsapp-v2.png?alt=media)

4. Buka **Settings** di sisi kiri, lalu di bagian **General** buka **Advanced** dan pastikan **Enable AJAX form submission** menyala. Ini penting supaya isian tetap tersimpan di WPForms saat WatZap membaca form.

![Pengaturan WPForms: Enable AJAX form submission menyala](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FPyvofuWbLTWp2KbdxNd9%2Fwpforms-settings-ajax-v2.png?alt=media)

5. Klik **Save**, lalu tutup builder dengan tombol **X** di pojok kanan atas.

{% hint style="info" %}
Beri label yang mengandung kata **WhatsApp** atau **Nomor**. WatZap akan otomatis mengenali field itu sebagai kolom nomor WhatsApp di Langkah 4.
{% endhint %}

## Langkah 3: Pasang form di halaman

1. Buka **Pages » Add New** dan beri judul halaman, misalnya "Hubungi Kami".
2. Tambahkan blok **WPForms**, lalu pilih form yang baru Kamu buat. Jika situs Kamu memakai editor klasik, klik tombol **Add Form** di atas kotak teks, atau tempel shortcode `[wpforms id="123"]` dengan angka sesuai ID form Kamu.
3. Klik **Publish**.

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 WPForms di halaman situs](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FRLsz6at2B4txWLdqDiRM%2Fwpforms-tampilan-halaman-v2.png?alt=media)

## 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 **WPForms**. Jika tertulis **Not installed**, berarti WPForms Lite 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**, pilih form Kamu pada dropdown **Form**.
5. Pastikan dropdown **Kolom nomor WhatsApp** (WhatsApp number field) menunjuk ke field Nomor WhatsApp. Biasanya sudah terpilih otomatis.
6. Isi **Nama integrasi** (Integration name), misalnya "Form Hubungi Kami". Nama ini hanya untuk Kamu sendiri.

![Langkah 2 dari 2 untuk WPForms: form dan kolom nomor WhatsApp sudah terpilih](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FtMGsIVJSJhLGa3Sy59OF%2Fcustom-form-wpforms-langkah-2-v2.png?alt=media)

## 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 field nama. Kode variabel akan muncul di pesan dan 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)

<details>

<summary>Opsional: kirim lewat kanal Official (WABA)</summary>

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)

</details>

### 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 nama dan nomor pengunjung 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.
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:

* Di **WatZap » WhatsApp Numbers**, nomor pengirim berstatus **Tersambung** dan **Rotasi** menyala.
* Di pengaturan form WPForms, **Enable AJAX form submission** 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 Contact Form 7](/help/integrations/integrasi-dengan-contact-form-7.md) dan [Integrasi dengan KIRIM.EMAIL](/help/integrations/integrasi-dengan-kirim.email.md).