Wix

Wix Forms menyimpan kiriman di Wix dan tidak punya pengaturan untuk URL action eksternal. Untuk memakai Ikiform, taruh formulir Anda sendiri di elemen Embed HTML. Wix menjalankan kode itu di dalam iframe sandbox yang disajikan dari host filesusr.com terpisah, dan itu memengaruhi semua hal di bawah ini.

Kenapa formulir mengirim dengan fetch

• Frame Wix mengizinkan formulir, skrip, popup, dan akses same-origin, tetapi tidak navigasi top-level. target="_top" tidak bisa memindahkan pengunjung ke halaman terima kasih.
• Kiriman formulir biasa akan memuat hasilnya di dalam frame kecil itu, dan halaman terima kasih, error, dan pemeriksaan Ikiform menolak dirender di dalam frame. Pengunjung akan melihat frame yang kosong atau ditolak.
• Mengirim dengan fetch dan Accept: application/json membuat pengunjung tetap di tempat dan menampilkan hasilnya di dalam embed.

Tambahkan embed

1. Tambahkan elemen Embed HTML

   Di Wix Editor, buka Add Elements > Embed Code > Embed HTML. Di Wix Studio, letaknya di Embed & Social. Pilih Code, bukan Website address.

2. Tempel formulir

   <form id="contact" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post" novalidate>
     <label>Email <input name="email" type="email" autocomplete="email" required /></label>
     <p class="error" data-error-for="email"></p>
     <label>Message <textarea name="message" rows="4"></textarea></label>
     <p class="error" data-error-for="message"></p>
     <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
     <button>Send</button>
     <p role="status" data-status></p>
   </form>
   
   <script>
     const form = document.querySelector("#contact");
     const button = form.querySelector("button");
     const status = form.querySelector("[data-status]");
   
     form.addEventListener("submit", async (event) => {
       event.preventDefault();
       button.disabled = true;
       status.textContent = "Sending";
       try {
         const response = await fetch(form.action, {
           method: "POST",
           headers: { Accept: "application/json" },
           body: new FormData(form),
         });
         const result = await response.json();
         const fields = result.ok ? {} : result.error.fields ?? {};
         for (const slot of form.querySelectorAll("[data-error-for]")) {
           slot.textContent = fields[slot.dataset.errorFor]?.[0] ?? "";
         }
         status.textContent = result.ok ? "Thanks, we got it." : result.error.message;
         if (result.ok) form.reset();
       } catch {
         status.textContent = "Couldn't reach the server. Try again.";
       } finally {
         button.disabled = false;
       }
     });
   </script>
   
   <style>
     body { margin: 0; font: 15px/1.5 system-ui, sans-serif; }
     form { display: grid; gap: 8px; }
     label { display: grid; gap: 4px; }
     input, textarea, button { font: inherit; padding: 8px 10px; border: 1px solid #d4d4d4; border-radius: 6px; }
     button { background: #111; color: #fff; border: 0; }
     .error { margin: 0; color: #b42318; font-size: 13px; }
   </style>

   Frame tidak mewarisi font atau warna situs Anda, jadi blok <style> mengaturnya. Ubah agar sesuai dengan situs Anda.

3. Atur ukuran dan publikasikan

   Seret elemen cukup tinggi untuk memuat error field dan baris status, lalu publikasikan. Editor hanya menampilkan placeholder untuk kode kustom, jadi uji di situs yang sudah dipublikasikan.

Pengaturan spam

Biarkan pemeriksaan spam formulir mati. Pemeriksaan manusia Ikiform butuh halaman pemeriksaannya atau frame kecil ikiform.com, dan keduanya tidak bisa berjalan dari dalam sandbox Wix. Honeypot dan penilaian spam tetap berjalan di setiap kiriman.

Domain yang diizinkan

Ikiform melihat host frame, bukan domain Wix Anda, karena kiriman dikirim dari dalam iframe. Untuk menemukannya, buka halaman yang sudah dipublikasikan, inspect embed-nya, dan baca src iframe-nya.

• Jangan pernah menambahkan filesusr.com saja. Setiap situs di host itu akan cocok, termasuk milik orang lain.
• Host frame diturunkan dari alamat situs Anda, jadi berubah jika Anda menghubungkan domain baru. Periksa lagi setelah mengganti domain.

Daftar periksa pengujian

1. Publikasikan dan buka halaman live di jendela privat.
2. Dengan field yang sudah didefinisikan, kirim dengan email kosong. Formulir punya novalidate, jadi pesan dari Ikiform seharusnya muncul di bawah field.
3. Kirim pesan sungguhan dan pastikan baris status berbunyi "Thanks, we got it." dan kirimannya tercantum di Ikiform.
4. Aktifkan domain yang diizinkan dengan host frame dan kirim lagi. Kiriman seharusnya tetap masuk sebagai diterima.

Pemecahan masalah

Terkait

• JavaScript biasafetch dengan error inline.
• Pembuat situsEmbed yang berfungsi di pembuat situs mana pun.
• Domain yang diizinkanCara origin dicocokkan, dan apa akibat ketidakcocokan.
• Perlindungan spamHoneypot, penilaian, dan pemeriksaan manusia.