# Webflow

> Kirim Form Block Webflow ke Ikiform dengan action kustom, pertahankan state sukses dan error Webflow dengan skrip singkat, dan izinkan situs staging webflow.io Anda.

Form Block Webflow bisa mengirim ke URL mana pun. Arahkan action-nya ke endpoint Ikiform Anda, maka formulir tetap memakai layout dan gaya yang Anda buat di Designer, sementara Ikiform memvalidasi, menyaring spam, menyimpan, mengirim email, dan mengirim webhook.

## Apa yang diubah action kustom

- Webflow hanya memproses formulir jika Webflow adalah tujuannya. Dengan action kustom, browser mengirim langsung ke Ikiform, jadi kirimannya tidak muncul di form submissions Webflow dan Webflow tidak mengirim email notifikasi.
- Tujuan bawaan Webflow tidak bisa berjalan bersamaan dengan action kustom. Hapus di bawah **Send to** sebelum Anda menambahkan Ikiform.
- Blok sukses dan error Webflow (`.w-form-done` dan `.w-form-fail`) serta pengaturan redirect formulir berhenti berfungsi, karena Webflow tidak pernah melihat hasilnya. Pengunjung mendarat di halaman terima kasih Ikiform atau di URL **Redirect after submit** Anda. [Langkah 4](#keep-success-state) mengembalikan blok-blok Webflow.

## Siapkan formulir

### Langkah 1: Arahkan formulir ke Ikiform

Pilih form di dalam Form Block dan buka panel **Settings**. Di bawah **Send to**, pilih action kustom, tempel endpoint Anda ke **Action**, dan atur **Method** ke **POST**.

`Action`:

```text
https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx
```

Membiarkan metode GET membuat browser membuka endpoint sebagai halaman, yang dijawab `404 not_found`. Ikiform hanya menerima kiriman POST.

### Langkah 2: Beri nama field

Pengaturan **Name** di setiap input menjadi nama field di Ikiform. Webflow mengisinya dari label, jadi Anda mendapat nama seperti `Name`, `Email`, dan `Field 2`. Ganti namanya menjadi ID yang ingin Anda lihat, seperti `name`, `email`, dan `message`.

- Jika Anda mendefinisikan [field](https://ikiform.com/id/docs/fields.md) di formulir Ikiform, nama-namanya harus sama persis dengan ID-nya. ID ditulis dalam snake_case huruf kecil, jadi `Email` dan `email` adalah field yang berbeda.
- Hapus elemen reCAPTCHA apa pun dari formulir. Ikiform tidak memverifikasinya, dan nilai `g-recaptcha-response`-nya akan masuk sebagai field tambahan. Gunakan [pemeriksaan spam](https://ikiform.com/id/docs/spam.md#human-check) Ikiform sebagai gantinya.

### Langkah 3: Tambahkan honeypot

Tambahkan Input ke formulir, atur **Name**-nya ke `_gotcha`, dan sembunyikan dengan **Display: none** di panel Style. Di **Custom attributes**, tambahkan `tabindex` bernilai `-1` dan `autocomplete` bernilai `off` agar keyboard dan pengelola kata sandi melewatinya. Di paket situs berbayar, Anda bisa menempel ini ke Code Embed di dalam formulir sebagai gantinya:

`Code Embed`:

```html
<input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
```

### Langkah 4: Pilih yang terjadi setelah dikirim

Pilihan paling sederhana adalah halaman terima kasih. Buat di Webflow, publikasikan, lalu tempel URL lengkapnya ke **Redirect after submit** di pengaturan formulir Ikiform.

### Pertahankan blok sukses dan error Webflow

Untuk tetap di halaman, kirim dengan `fetch` dan tampilkan atau sembunyikan blok Webflow sendiri. Tempel ini di **Page settings** > **Custom code** > **Before </body> tag**, atau di kode footer situs untuk mencakup setiap formulir. Skrip ini menampilkan pesan error Ikiform di dalam blok error dan memakai **Waiting text** tombol selama mengirim.

`Before </body> tag`:

```html
<script>
  document.querySelectorAll('form[action^="https://ikiform.com/f/"]').forEach((form) => {
    const wrapper = form.closest(".w-form");
    const done = wrapper?.querySelector(".w-form-done");
    const fail = wrapper?.querySelector(".w-form-fail");
    const button = form.querySelector('[type="submit"]');

    form.addEventListener("submit", async (event) => {
      event.preventDefault();
      const label = button?.value;
      if (button) {
        button.disabled = true;
        button.value = button.dataset.wait || label;
      }
      try {
        const response = await fetch(form.action, {
          method: "POST",
          headers: { Accept: "application/json" },
          body: new FormData(form),
        });
        const result = await response.json();
        if (result.ok) {
          form.style.display = "none";
          if (fail) fail.style.display = "none";
          if (done) done.style.display = "block";
          return;
        }
        const text = fail?.querySelector("div") ?? fail;
        if (text) text.textContent = result.error.message;
        if (fail) fail.style.display = "block";
      } catch {
        if (fail) fail.style.display = "block";
      } finally {
        if (button) {
          button.disabled = false;
          button.value = label;
        }
      }
    });
  });
</script>
```

> Custom code dan elemen Code Embed butuh paket situs berbayar atau paket Workspace, dan keduanya tidak berjalan di Designer. Publikasikan untuk melihatnya bekerja.

Skrip mengirim dengan `fetch`, jadi formulir yang pemeriksaan spamnya diatur ke **Ikiform** akan menjawab `403 challenge_required` alih-alih menampilkan halaman pemeriksaan. Gunakan skrip dengan pemeriksaan mati, atau lewati skrip dan biarkan browser mengirim secara normal, yang menjalankan pemeriksaan tanpa kode tambahan.

## Domain yang diizinkan

Jika Anda mengatur domain yang diizinkan, cantumkan setiap alamat tempat formulir dipublikasikan. Subdomain dari domain yang tercantum sudah otomatis cocok.

| Tempat formulir berjalan | Tambahkan ke Domain yang diizinkan |
| --- | --- |
| Domain kustom Anda | `example.com`, yang juga mencakup `www.example.com` |
| Staging Webflow | `your-site.webflow.io` |
| Kanvas Designer | Tidak perlu. Action kustom dan custom code tidak berjalan di sana. |

- Jangan pernah menambahkan `webflow.io` saja. Setiap situs di host itu akan cocok, termasuk milik orang lain.

## Daftar periksa pengujian

1. Publikasikan ke domain staging `webflow.io` Anda. Formulir dengan action kustom hanya mengirim dari situs yang sudah dipublikasikan.
2. Kirim formulir dan buka kiriman formulir di Ikiform. Kiriman baru seharusnya tercantum sebagai diterima, bukan spam.
3. Pastikan nama field sesuai dengan yang Anda atur di langkah 2, dan honeypot tidak tercantum: nama yang diawali `_` tidak pernah disimpan.
4. Pastikan Anda mendarat di halaman terima kasih Anda, atau melihat blok sukses Webflow jika Anda menambahkan skripnya.
5. Publikasikan ke domain kustom Anda dan kirim sekali lagi dari sana.

## Pemecahan masalah

| Yang Anda lihat | Alasan | Solusi |
| --- | --- | --- |
| Halaman `404 not_found` setelah dikirim | **Method** bernilai GET, jadi browser membuka endpoint seperti tautan | Atur **Method** ke **POST** dan publikasikan lagi. |
| Halaman terima kasih Ikiform, bukan pesan sukses Webflow | Blok sukses Webflow hanya berjalan saat Webflow yang menangani formulir | Atur **Redirect after submit**, atau tambahkan skrip dari langkah 4. |
| Kiriman masuk ke filter spam dengan `origin_mismatch` | Halaman yang mengirim tidak ada di domain yang diizinkan formulir | Tambahkan host dari tabel di atas. Jika **Reject** dipilih, kiriman yang sama mendapat `403 origin_not_allowed`. |
| `422 validation_failed` yang mencantumkan field Unknown | Nama field seperti `Email` atau `g-recaptcha-response` tidak ada di definisi field formulir | Ganti nama input menjadi ID field, atau hapus elemen reCAPTCHA. |
| Skrip tidak melakukan apa-apa | Anda menguji di Designer, situs tidak punya paket berbayar, atau action tidak diawali `https://ikiform.com/f/` | Uji di situs yang sudah dipublikasikan dan pastikan **Action** tidak berisi spasi. |
| Blok error menampilkan `Complete the human check, then send the form again.` | Pemeriksaan spam diatur ke **Ikiform** dan skrip mengirim dengan `fetch` | Matikan pemeriksaan untuk formulir ini, atau hapus skripnya. |

## Terkait

- [Pembuat situs](https://ikiform.com/id/docs/guides/site-builders.md): Embed yang berfungsi di pembuat situs mana pun.
- [Formulir HTML](https://ikiform.com/id/docs/html.md): Redirect, field reserved, dan honeypot.
- [Domain yang diizinkan](https://ikiform.com/id/docs/spam.md#allowed-domains): Cara origin dicocokkan, dan apa akibat ketidakcocokan.
- [Error](https://ikiform.com/id/docs/errors.md): Setiap kode error, beserta penyebab dan solusinya.