Wix

Wix Forms behalten Einsendungen in Wix und haben keine Einstellung für eine externe Action-URL. Um Ikiform zu nutzen, setze dein eigenes Formular in ein Embed HTML-Element. Wix führt diesen Code in einem sandboxed iframe aus, der von einem separaten Host filesusr.com ausgeliefert wird, und das prägt alles Folgende.

Warum das Formular mit fetch sendet

• Der Frame von Wix erlaubt Formulare, Scripts, Popups und Same-Origin-Zugriff, aber keine Top-Level-Navigation. target="_top" kann den Besucher nicht auf eine Danke-Seite bringen.
• Ein normaler Formular-POST würde das Ergebnis im kleinen Frame laden, und die Danke-, Fehler- und Prüfseiten von Ikiform verweigern das Rendern in Frames. Besucher sähen einen leeren oder abgelehnten Frame.
• Mit fetch und Accept: application/json bleibt der Besucher auf der Seite, und das Ergebnis wird im Embed angezeigt.

Embed hinzufügen

1. Ein Embed-HTML-Element hinzufügen

   Öffne im Wix Editor Add Elements > Embed Code > Embed HTML. In Wix Studio findest du es unter Embed & Social. Wähle Code statt Website address.

2. Formular einfügen

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

   Der Frame übernimmt die Schriften und Farben deiner Site nicht, daher setzt der <style>-Block sie. Pass ihn an deine Site an.

3. Größe anpassen und veröffentlichen

   Zieh das Element hoch genug, damit die Feldfehler und die Statuszeile hineinpassen, und veröffentliche dann. Der Editor zeigt für eigenen Code nur einen Platzhalter, teste also auf der veröffentlichten Site.

Spam-Einstellungen

Lass die Spamprüfung des Formulars ausgeschaltet. Die Menschlichkeitsprüfung von Ikiform braucht entweder ihre Prüfseite oder einen kleinen ikiform.com-Frame, und beides kann nicht aus der Sandbox von Wix heraus laufen. Honeypot und Spam-Scoring laufen trotzdem bei jedem Request.

Erlaubte Domains

Ikiform sieht den Host des Frames, nicht deine Wix-Domain, weil der Request aus dem iframe heraus gesendet wird. Um ihn zu finden, öffne deine veröffentlichte Seite, untersuche das Embed und lies das src des iframes.

• Füge niemals filesusr.com allein hinzu. Jede Site auf diesem Host würde passen, auch die anderer Leute.
• Der Frame-Host wird aus deiner Site-Adresse abgeleitet und ändert sich daher, wenn du eine neue Domain verbindest. Prüfe ihn nach einem Domainwechsel erneut.

Test-Checkliste

1. Veröffentliche und öffne die Live-Seite in einem privaten Fenster.
2. Sende mit definierten Feldern ein leeres E-Mail-Feld ab. Das Formular hat novalidate, daher sollte die Meldung von Ikiform unter dem Feld erscheinen.
3. Sende eine echte Nachricht ab und prüfe, dass die Statuszeile „Thanks, we got it.“ anzeigt und die Einsendung in Ikiform gelistet ist.
4. Schalte die erlaubten Domains mit dem Frame-Host ein und sende erneut ab. Die Einsendung sollte weiterhin unter Empfangen landen.

Fehlerbehebung

Verwandte Themen

• Reines JavaScriptfetch mit Inline-Fehlern.
• Website-BaukästenDas Embed, das in jedem Builder funktioniert.
• Erlaubte DomainsWie Origins abgeglichen werden und was eine Abweichung bewirkt.
• SpamschutzHoneypot, Scoring und die Menschlichkeitsprüfung.