Cara menambahkan formulir daftar tunggu ke situs 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.

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.

<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/.

<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.

Domain yang diizinkan

Jangan pernah menambahkan webflow.io saja; semua situs Webflow akan cocok. Panduan Webflow di dokumentasi membahas pengaturan yang sama untuk formulir kontak, dan panduan utama 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

Pertanyaan