# Cara menambahkan formulir daftar tunggu ke situs Webflow

> Arahkan Form Block Webflow ke Ikiform, tandai pendaftaran menurut sumbernya dengan field tersembunyi, dan pertahankan success state Webflow dengan skrip singkat untuk setiap formulir.

Terbit 2026-10-25 · https://ikiform.com/id/guides/waitlist/webflow

Pertahankan Form Block yang Anda desain di Webflow dan ubah action-nya ke endpoint Ikiform Anda dengan metode POST. Tambahkan input tersembunyi `ref` dan honeypot di Code Embed, lalu tempel satu skrip untuk seluruh situs yang mengirim setiap formulir daftar tunggu dengan `fetch`, mengisi `ref` dari tautan, dan menampilkan blok sukses milik Webflow sendiri beserta email orang tersebut.

Webflow unggul untuk halaman dan cukup baik untuk formulir. Penanganan formulir bawaannya menyimpan kiriman dan mengirimi Anda email, tetapi jumlah yang disimpan dibatasi menurut paket situs, dan tidak bisa menandai pendaftaran dengan kampanye asalnya. Custom action memperbaiki keduanya tanpa keluar dari Designer.

## Apa yang berbeda di Webflow

- **Custom action mengambil alih formulir dari Webflow.** Browser mengirim langsung ke Ikiform, jadi Webflow tidak pernah melihat pendaftarannya: pendaftaran tidak ada di kiriman formulir Webflow, Webflow tidak mengirim email, dan kuota formulir paket Anda tidak terpakai sama sekali.
- **Blok sukses dan error Webflow berhenti berfungsi.** Blok itu hanya muncul jika Webflow yang menangani kiriman. Tanpa skrip, pengunjung mendarat di halaman terima kasih Ikiform atau URL **Redirect after submit** Anda.
- **Tidak ada elemen input tersembunyi.** Field tersembunyi dan honeypot dimasukkan ke **Code Embed** di dalam formulir, yang memerlukan paket situs berbayar, sama seperti custom code.
- **Tidak ada yang berjalan di Designer.** Custom action dan skrip hanya berfungsi di situs yang sudah dipublikasikan, jadi uji di domain staging `webflow.io` Anda.

Diagram: Formulir daftar tunggu Webflow sebelum dan sesudah custom action

1. Secara default, Form Block mengirim ke Webflow, yang menyimpan pendaftaran dengan memakai kuota paket Anda dan menampilkan blok sukses.
2. Dengan custom action, Form Block yang sama mengarah ke Ikiform.
3. Skrip menghentikan kiriman biasa, mengisi field ref dari tautan, dan mengirim dengan fetch.
4. Ikiform menyimpan pendaftaran, mengirimi Anda email, dan mengirim webhook, lalu menjawab 201.
5. Skrip menyembunyikan formulir dan menampilkan blok sukses Webflow beserta email orang tersebut.

Desainnya tetap di Webflow. Hanya tujuan datanya yang berubah.

## Siapkan Form Block

1. Pilih formulir dan buka **Settings**. Hapus **Webflow** dan **Email notifications** di bawah **Send to**, lalu tambahkan **Custom action**, masukkan `https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx`, pilih **POST**, dan simpan.
2. Pilih input email dan atur **Name**-nya ke `email`. Webflow mengisi nama dari label, jadi jika tidak, Anda akan mendapat `Email` atau `Email 2`, yang dianggap Ikiform sebagai field berbeda.
3. Hapus elemen reCAPTCHA apa pun. Ikiform tidak memverifikasinya, dan jika ada definisi field, nilai `g-recaptcha-response`-nya ditolak sebagai field yang tidak dikenal.
4. Seret **Code Embed** ke dalam formulir, di sebelah tombol, dan tempel dua input di bawah ini.
5. Atur **Redirect after submit** di pengaturan formulir Ikiform ke halaman terima kasih yang sudah Anda publikasikan di Webflow. Ke sanalah orang mendarat jika skrip tidak berjalan.

`Code Embed di dalam formulir`:

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

Tambahkan definisi field di tab **Fields** Ikiform dengan `email` wajib dan `ref` sebagai field `text` opsional dengan `max_length` 40. Nama lain yang dikirim, seperti input `Name` yang tertinggal, lalu mendapat `422`, sehingga input yang salah label langsung terlihat pada uji pertama.

## Skrip untuk seluruh situs

Tempel ini di **Site settings** › **Custom code** › **Footer code**, agar mencakup formulir hero, formulir footer, dan halaman apa pun yang Anda tambahkan nanti. Skrip ini hanya menyentuh formulir yang action-nya diawali `https://ikiform.com/f/`.

`Footer code`:

```html
<script>
  const params = new URLSearchParams(location.search);
  const ref = (params.get("ref") || params.get("utm_source") || "").toLowerCase().replace(/[^a-z0-9_-]/g, "").slice(0, 40);
  const key = crypto.randomUUID();

  document.querySelectorAll('form[action^="https://ikiform.com/f/"]').forEach((form, index) => {
    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"]');
    const source = form.querySelector('[name="ref"]');
    if (source && ref) source.value = ref;

    form.addEventListener("submit", async (event) => {
      event.preventDefault();
      const label = button.value;
      button.disabled = true;
      button.value = button.dataset.wait || "Joining";
      fail.style.display = "none";
      try {
        const response = await fetch(form.action, {
          method: "POST",
          headers: { Accept: "application/json", "Idempotency-Key": `${key}-${index}` },
          body: new FormData(form),
        });
        const result = await response.json();
        if (result.ok) {
          const email = form.querySelector('[name="email"]').value;
          const line = done.querySelector("div") ?? done;
          line.textContent = `You're on the list. We'll write to ${email} on launch day.`;
          form.style.display = "none";
          done.style.display = "block";
          return;
        }
        const wait = response.headers.get("Retry-After");
        const message = wait ? `Lots of signups right now. Try again in ${wait} seconds.` : result.error.fields?.email?.[0] ?? result.error.message;
        (fail.querySelector("div") ?? fail).textContent = message;
      } catch {
        (fail.querySelector("div") ?? fail).textContent = "Couldn't reach the server. Try again.";
      }
      fail.style.display = "block";
      button.disabled = false;
      button.value = label;
    });
  });
</script>
```

- `?ref=` atau `?utm_source=` di tautan mengisi setiap input tersembunyi `ref` di halaman. Tanpa keduanya, nilai yang diatur di embed dipertahankan, jadi atur per formulir, misalnya `hero` dan `footer`, untuk melihat mana yang paling banyak menghasilkan pendaftaran.
- Idempotency key dibuat sekali per pemuatan halaman dan diberi akhiran per formulir. Klik ganda menyimpan satu pendaftaran; pendaftaran kedua dari formulir lain di halaman itu tetap dihitung.
- Blok sukses Webflow mendapat satu baris berisi email orang tersebut, yang membantu menangkap salah ketik: orang menyadari `gmial.com` saat ditampilkan kembali kepada mereka.
- Tombol menampilkan teks **Loading** yang Anda atur di Designer selama kiriman sedang diproses.
- `429` menampilkan berapa lama harus menunggu, dari header `Retry-After` Ikiform, alih-alih pesan gagal yang umum.

> Skrip mengirim dengan `fetch`, jadi biarkan pemeriksaan spam formulir nonaktif. Jika pemeriksaan aktif, Ikiform menjawab `403 challenge_required` dan blok error muncul. Jika Anda butuh pemeriksaan itu, lewati skripnya; kiriman biasa menjalankannya tanpa kode.

### Domain yang diizinkan

| Tempat formulir berjalan | Tambahkan ke Allowed domains |
| --- | --- |
| Staging | `your-site.webflow.io` |
| Domain kustom Anda | `example.com`, yang mencakup `www.example.com` |
| Designer | Tidak ada. Designer tidak pernah mengirim dari sana |

Jangan pernah menambahkan `webflow.io` saja; semua situs Webflow akan cocok. [Panduan Webflow di dokumentasi](https://ikiform.com/id/docs/guides/webflow.md) membahas pengaturan yang sama untuk formulir kontak, dan [panduan utama](https://ikiform.com/id/guides/waitlist.md#confirm) menunjukkan cara meneruskan pendaftaran ke alat email Anda.

## Pastikan berfungsi

1. Publikasikan ke domain staging `webflow.io` Anda.
2. Di **Allowed domains** formulir, tambahkan domain situs Anda, ditambah `localhost` selama pengembangan. Biarkan kosong untuk menerima kiriman dari mana saja.
3. Buka halaman dengan `?ref=test` dan mendaftar. Blok sukses Webflow menampilkan email Anda, dan kiriman di Ikiform memiliki `ref` bernilai `test`.
4. Daftar lagi dari formulir footer tanpa query string. `ref` membaca nilai dari embed formulir itu.
5. Matikan JavaScript dan kirim. Anda mendarat di halaman terima kasih Webflow Anda.
6. Periksa inbox setiap penerima notifikasi. Masing-masing mendapat email berisi field-field tersebut, dan **Reply** ditujukan ke pengirim jika formulir punya field `email`.
7. Kirim dengan honeypot terisi, `_gotcha=bot`. Kiriman tetap mendapat jawaban sukses, tetapi disimpan sebagai spam dan tidak memicu email atau webhook.

## Jebakan

| Masalah | Yang harus dilakukan |
| --- | --- |
| `404 not_found` setelah kirim | **Method** diatur ke GET, jadi browser membuka endpoint seperti tautan. Ubah ke POST dan publikasikan lagi. |
| `422` dengan Unknown field `Email` atau `g-recaptcha-response` | **Name** sebuah input tidak cocok dengan definisi, atau elemen reCAPTCHA masih tertinggal di formulir. Ganti nama input menjadi `email` atau hapus elemennya. |
| Skrip tidak melakukan apa-apa | Anda sedang di Designer, situs tidak punya paket berbayar, atau **Action** mengandung spasi. Uji di situs yang sudah dipublikasikan. |
| `403 challenge_required` | Spam check formulir diatur ke **Ikiform** dan kiriman `fetch` tidak menyertakan token. Ambil token dengan `challenge(formId)` dari `@ikiform/sdk` sebelum setiap pengiriman, atau matikan pemeriksaannya. |
| `403 origin_not_allowed`, atau setiap kiriman masuk ke spam | Domain halaman tidak ada di **Allowed domains** formulir. Tambahkan, ditambah `localhost` untuk tes lokal. Subdomain dari domain yang tercantum diizinkan. |

## Pertanyaan

### Apakah pendaftaran daftar tunggu yang dikirim ke Ikiform dihitung dalam batas kiriman formulir Webflow?

Tidak. Dengan custom action, browser mengirim langsung ke Ikiform, jadi Webflow tidak pernah menerima kirimannya. Kiriman tidak muncul di kiriman formulir Webflow dan tidak memakai kuota paket Anda.

### Bagaimana cara menambahkan field tersembunyi ke formulir Webflow?

Webflow tidak punya elemen input tersembunyi. Letakkan Code Embed di dalam formulir dengan input bertipe hidden. Code Embed memerlukan paket Site berbayar atau Workspace Core, Growth, Agency, atau Freelancer.

### Bisakah saya mempertahankan pesan sukses Webflow dengan custom action?

Bisa, dengan skrip. Webflow hanya menampilkan blok suksesnya jika Webflow yang menangani kiriman, jadi skrip mengirim dengan fetch dan menampilkan blok itu sendiri, seperti pada contoh di atas.

### Bisakah Ikiform mengirim email ke orang yang mengirim formulir?

Tidak. Ikiform mengirim email ke Anda dan tim Anda, bukan ke pengirim, jadi tidak ada autoresponder atau email konfirmasi. Kirim webhook ke tool email Anda dan kirim konfirmasinya dari sana.

## Panduan lainnya

- [Daftar tunggu untuk SaaS baru](https://ikiform.com/id/guides/waitlist.md): Bangun daftar tunggu pra-peluncuran di landing page Anda sendiri: formulir, perlindungan spam, duplikat, email konfirmasi, dan ekspor rapi di hari peluncuran.
- [Daftar tunggu di Framer](https://ikiform.com/id/guides/waitlist/framer.md): Dua cara mengumpulkan pendaftaran daftar tunggu di Framer: formulir Framer dengan webhook ke Ikiform, atau code component yang mempertahankan batas per pengunjung dan pemeriksaan spam.
- [Daftar tunggu di Carrd](https://ikiform.com/id/guides/waitlist/carrd.md): Kumpulkan pendaftaran daftar tunggu di halaman Carrd: formulir Send to URL di Pro Plus dengan pelacakan UTM, atau formulir HTML yang di-embed dengan honeypot di Pro Standard.
- [Daftar tunggu dengan HTML biasa](https://ikiform.com/id/guides/waitlist/html.md): Halaman daftar tunggu lengkap tanpa build dengan HTML biasa yang tetap berfungsi saat JavaScript mati, menampilkan ucapan terima kasih inline saat skrip dimuat, dan punya fallback bila perlu.
- [Daftar peluncuran Product Hunt](https://ikiform.com/id/guides/waitlist/product-hunt.md): Kumpulkan daftar peluncuran berminggu-minggu sebelum Product Hunt, tandai setiap pendaftaran per channel, dan kirim email hari-H dalam dua gelombang mengikuti reset waktu Pasifik.
- [Pendaftaran beta dengan penyaringan](https://ikiform.com/id/guides/waitlist/beta-signup.md): Formulir lamaran beta dengan pertanyaan penyaringan yang ditegakkan server, dan skrip yang menilai pelamar serta memilih setiap kohort dari daftar.