Webflow

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 mengembalikan blok-blok Webflow.

Siapkan formulir

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.

   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.

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 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 Ikiform sebagai gantinya.

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:

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

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.

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

• 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

Terkait

• Pembuat situsEmbed yang berfungsi di pembuat situs mana pun.
• Formulir HTMLRedirect, field reserved, dan honeypot.
• Domain yang diizinkanCara origin dicocokkan, dan apa akibat ketidakcocokan.
• ErrorSetiap kode error, beserta penyebab dan solusinya.