Cara menghentikan spam formulir Webflow

reCAPTCHA, pemblokiran bot, dan filter spam Webflow hanya bekerja pada kiriman yang diterima Webflow sendiri. Jika formulir Anda memakai custom action untuk mengirim ke form backend, pengaturan itu tidak pernah melihat kirimannya, jadi perlindungannya harus terjadi di backend. Tambahkan honeypot di luar layar lewat Designer, atur domain dan rate limit di backend, lalu nyalakan pemeriksaan manusianya, yang bekerja dengan kiriman Webflow biasa tanpa kode.

Apa yang berbeda di Webflow

Webflow punya alat spam sendiri: reCAPTCHA v2, pengaturan pemblokiran bot yang menjalankan Cloudflare Turnstile, dan filter spam yang membaca isi setiap kiriman. Semuanya ada di sisi Webflow, jadi hanya bekerja pada kiriman yang sampai ke Webflow. Begitu Anda mengatur Send to formulir ke custom action, browser mengirim langsung ke URL itu. Webflow tidak pernah melihat kirimannya, jadi tidak satu pun pemeriksaannya berjalan, bagaimanapun pengaturannya.

Pengaturan Webflow sendiri, setelah beralih

Panduan Webflow di dokumentasi membahas cara mengarahkan Form Block ke Ikiform. Langkah di bawah menambahkan perlindungan spam di atasnya.

Tambahkan honeypot di Designer

Cara cepat Webflow untuk menyembunyikan input adalah Display: none. Sebagian bot melewati field yang disembunyikan dengan cara itu, jadi taruh jebakannya di wrapper di luar layar. Hanya butuh satu menit dan tidak perlu paket berbayar:

• Di dalam formulir, tambahkan Div Block dan beri class seperti hp. Di panel Style, atur Position ke Absolute, Left ke -10000px, Width dan Height ke 1px, serta Overflow ke Hidden.
• Di Custom attributes milik Div Block, tambahkan aria-hidden bernilai true, agar pembaca layar melewati semua isinya.
• Taruh Label dengan teks Leave this empty (biarkan kosong) dan sebuah Input di dalam Div Block. Atur Name Input ke _gotcha, lalu tambahkan custom attribute tabindex = -1 dan autocomplete = off.
• Jangan centang Required di situ. Field wajib yang tidak bisa dilihat siapa pun memblokir setiap kiriman yang jujur.

_gotcha yang terisi menambah 5 ke skor spam Ikiform, cukup untuk mencapai ambang 5 dengan sendirinya. Anda bisa mengganti nama field per formulir di Honeypot field jika template yang Anda pakai sudah punya jebakan dengan nama lain.

Beri nama field untuk penilaian skor

Webflow menamai setiap input sesuai labelnya, jadi Anda mendapat Name, Email, dan Field 2. Ganti namanya di pengaturan setiap input menjadi name, email, dan message. Nama itu penting untuk skor spam sekaligus untuk data Anda:

• Link di field nama, seperti name, first_name, atau subject, menambah 3. Spammer sering menaruh URL mereka di sana, dan orang sungguhan tidak pernah melakukannya.
• Alamat dengan domain email sekali pakai menambah 2, dibaca dari field mana pun yang berisi alamat email.
• Tiga link atau lebih di seluruh formulir menambah 2, dan frasa spam yang dikenal menambah 2.

Nyalakan pemeriksaan manusia

Di pengaturan formulir Ikiform, atur Spam check ke Ikiform. Tidak ada yang berubah di Webflow. Saat formulir mengirim dengan cara biasa, Ikiform menjawab dengan halaman singkat Checking you're human di ikiform.com yang menjalankan Cloudflare Turnstile dan meneruskan field-nya, lalu pengunjung mendarat di halaman Redirect after submit Anda. Tanpa akun Cloudflare, key, atau kode kustom.

Jika Anda menambahkan skrip dari dokumentasi untuk mempertahankan blok sukses dan error Webflow, skrip itu mengirim dengan fetch, dan kiriman fetch tanpa token mendapat 403 challenge_required. Versi ini menanganinya: kembali ke kiriman biasa untuk pemeriksaan manusia, dan menampilkan waktu tunggu saat pengunjung terkena rate limit.

<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"]');

    function showError(text) {
      const slot = fail?.querySelector("div") ?? fail;
      if (slot) slot.textContent = text;
      if (fail) fail.style.display = "block";
    }

    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;
        }
        if (result.error.code === "challenge_required") {
          form.submit();
          return;
        }
        showError(
          response.headers.has("Retry-After")
            ? `Too many messages. Try again in ${response.headers.get("Retry-After")} seconds.`
            : result.error.message,
        );
      } catch {
        form.submit();
      } finally {
        if (button) {
          button.disabled = false;
          button.value = label;
        }
      }
    });
  });
</script>

• form.submit() mengirim formulir tanpa memicu event submit, sehingga fallback tidak pernah berputar kembali ke skrip.
• Tempel di Page settings > Custom code > Before </body> tag, atau di kode footer situs untuk semua formulir. Kode kustom butuh paket situs berbayar dan hanya berjalan di situs yang sudah dipublikasikan.
• Skrip ini hanya menyentuh formulir yang action-nya diawali https://ikiform.com/f/, jadi formulir yang masih ditangani Webflow tidak diubah.

Domain yang diizinkan dan rate limit

Di Allowed domains formulir Ikiform, tambahkan custom domain dan alamat staging Anda, seperti your-site.webflow.io. Jangan pernah menambahkan webflow.io saja: setiap situs Webflow akan cocok, termasuk milik orang lain. Kiriman dari tempat lain disimpan sebagai spam, atau ditolak jika Anda memilih Reject.

Untuk formulir kontak, atur Rate limit ke Strict, 2 per 10 menit per pengunjung. Tidak ada orang jujur yang menulis dua kali dalam sepuluh menit. Formulir pendaftaran di hari peluncuran yang ramai lebih cocok dengan Relaxed, 20 per menit per pengunjung. Setiap formulir dimulai dengan Standard, 5 per menit.

Pastikan berfungsi

1. Publikasikan ke domain staging webflow.io Anda. Custom action hanya mengirim dari situs yang sudah dipublikasikan.
2. Kirim formulir seperti biasa. Dengan pemeriksaan manusia aktif, Anda melihat halaman pemeriksaan sebentar, lalu halaman terima kasih Anda.
3. Inspect formulir yang sudah dipublikasikan dan pastikan wrapper honeypot punya aria-hidden dan berada di luar layar.
4. Kirim dengan honeypot terisi, _gotcha=bot. Kiriman tetap mendapat jawaban sukses, tetapi disimpan sebagai spam dan tidak memicu email atau webhook.
5. Buka Submissions di dashboard. Kiriman baru ada di sana dengan setiap field yang Anda kirim.
6. Tidak ada yang masuk? Ubah filter status di dashboard ke Spam. Spam mendapat jawaban sukses yang sama dengan kiriman asli.

Hal yang sering menjebak

• Spam tetap masuk meski pengaturan Webflow aktif. Jika spam terus datang setelah Anda menyalakan alat Webflow, cek Send to formulir. Custom action melewati semuanya.
• reCAPTCHA masih terpasang. Dengan field yang didefinisikan di formulir Ikiform, g-recaptcha-response yang tersisa gagal dengan 422 validation_failed sebagai field yang tidak dikenal. Hapus elemennya.
• Formulir yang diduplikasi. Menyalin formulir ikut menyalin input honeypot, tetapi tidak selalu custom attribute-nya. Cek tabindex dan aria-hidden di setiap salinan.
• Interaction pada wrapper. Interaction Webflow yang menganimasikan setiap Div Block di formulir bisa memindahkan honeypot ke area yang terlihat. Kecualikan class-nya.

Pertanyaan