Pick a time for your demo. You'll get a calendar invite right away.
``` - `noindex` hält sie aus den Suchergebnissen. Niemand sollte von Google dort landen, und eine Dankeseite als Einstiegsseite in deinen Analytics ist ein Zeichen, dass etwas darauf verlinkt. - Neuladen ist sicher. Weil Ikiform mit `303` geantwortet hat, hat der Browser diese Seite per GET geladen, und Neuladen sendet nichts erneut. - Zählst du Conversions auf dieser Seite, zähle einmal pro Sitzung. Neuladen oder ein Lesezeichen lädt sie erneut, und das Dashboard von Ikiform ist die echte Zahl. ## Auf eine andere Site weiterleiten Angenommen, du willst deine eigene Seite überspringen und Leute direkt zu einem Buchungstool auf einer anderen Domain schicken, etwa `cal.example.com` oder der Domain eines Terminplanungsdienstes. Mit `_redirect` müsste diese Domain in **Allowed domains** stehen, und diese Liste hat eine zweite Aufgabe: Sie entscheidet, welche Sites an das Formular senden dürfen. Die Domain eines Terminplanungsdienstes hinzuzufügen heißt, dass auch Seiten auf dieser Domain an dein Formular senden könnten. Nutze stattdessen **Redirect after submit** in den Einstellungen des Formulars. Es akzeptiert jede URL, weil nur dein Workspace es setzen kann, und **Allowed domains** listet weiterhin nur deine eigenen Sites. > Ikiform leitet genau auf die angegebene URL weiter. Es hängt weder die Einsendungs-ID noch Feldwerte an, also kann eine Buchungsseite nicht über die Weiterleitung vorausgefüllt werden. Frag dort erneut nach der E-Mail oder verlinke die Buchungsseite von deiner eigenen Dankeseite. ## Verschiedene Seiten für verschiedene Formulare Die Dashboard-Einstellung ist eine URL pro Formular. Erscheint ein Formular auf mehreren Seiten, die unterschiedliche Dankeseiten brauchen, lass die Einstellung leer und gib jeder Seite ihr eigenes `_redirect`. Eine deutsche Seite schickt Besucher auf die deutsche Dankeseite: `de/demo.html`: ```html ``` ### Einen Wert an die Weiterleitung anhängen Query-Strings in `_redirect` bleiben erhalten, also kannst du die Wahl des Besuchers an die Dankeseite übergeben. Setze den Wert in einem Submit-Listener, der nach der Validierung des Browsers und vor dem Kodieren des Formulars läuft: `demo.js`: ```js const form = document.querySelector("form"); const redirect = form.elements.namedItem("_redirect"); form.addEventListener("submit", () => { const size = form.elements.namedItem("team_size").value; const next = new URL("https://example.com/demo/next-step"); next.searchParams.set("size", size); redirect.value = next.href; }); ``` Der Besucher kommt auf `/demo/next-step?size=11-50` an, und die Seite kann den passenden Buchungslink für diese Teamgröße zeigen. Beschränke dich auf nicht personenbezogene Werte: Query-Strings landen im Browserverlauf, in Server-Logs und in Analytics. ## Nach einem fetch-Absenden weiterleiten Ein `fetch`-Aufruf bekommt JSON, keine Weiterleitung, also gelten Ikiforms Weiterleitungsregeln nicht. Navigiere selbst, wenn die Antwort `ok` ist: `Weiterleitung aus einem Skript`: ```js const response = await fetch(form.action, { method: "POST", headers: { Accept: "application/json" }, body: new FormData(form), }); const result = await response.json(); if (result.ok) location.assign("/demo/next-step"); ``` Nutze `location.assign` statt `location.replace`, wenn der Zurück-Button zum Formular führen soll. Die [Anleitung ohne Neuladen](https://ikiform.com/de/guides/html-form-submission/without-page-reload.md) enthält den vollständigen Handler mit Fehlern und Ladezustand. ## Prüfen, ob es funktioniert 1. Füge unter **Allowed domains** des Formulars die Domain deiner Site hinzu, plus `localhost`, während du entwickelst. Lass das Feld leer, um Posts von überall anzunehmen. 2. Sende das Formular von deiner Live-Seite ab. Die Adresszeile zeigt deine Dankeseite, und das Network-Panel zeigt den Post mit `303` beantwortet. 3. Lade die Dankeseite neu. Der Browser fragt nicht nach erneutem Senden, und das Dashboard zeigt weiterhin eine Einsendung. 4. Ändere `_redirect` auf eine Adresse auf einer nicht erlaubten Domain und sende ab. Du landest stattdessen auf der gehosteten Dankeseite von Ikiform, ohne Fehler. 5. Öffne **Submissions** im Dashboard. Die neue Einsendung ist da, mit jedem Feld, das du gesendet hast. ## Stolperfallen | Problem | Ursache und Lösung | | --- | --- | | `_redirect` wird ignoriert, obwohl die Domain erlaubt ist | **Redirect after submit** ist in den Einstellungen des Formulars gesetzt und gewinnt immer. Leere es, um Weiterleitungen pro Seite zu nutzen | | Funktioniert in Produktion, aber nicht auf `localhost` | `_redirect` muss `https:` ohne Port sein, also besteht `http://localhost:3000/thanks` nie. Teste auf einem Preview-Deploy oder nimm lokal die gehostete Seite hin | | Die gehostete Dankeseite hat keinen Link zurück zu deiner Site | Sie verlinkt nur zurück, wenn der Post von einer `https:`-Seite auf einer der erlaubten Domains des Formulars kam. Füge die Domain hinzu oder leite auf deine eigene Seite weiter | | Der Browser landet auf der Dankeseite von Ikiform statt auf deiner | `_redirect` wird ignoriert, außer seine Domain steht unter **Allowed domains** und es ist eine `https:`-URL. Füge die Domain hinzu oder setze stattdessen **Redirect after submit** in den Einstellungen des Formulars. | | Die Dankeseite erscheint in Suchergebnissen | Füge ihr `` hinzu und verlinke sie nicht aus deiner Navigation | Die genauen Regeln, mit Beispielen für URLs, die bestehen und scheitern, stehen in [HTML-Formulare](https://ikiform.com/de/docs/html.md#redirect-rules). Die [Übersicht](https://ikiform.com/de/guides/html-form-submission.md#response) erklärt, warum die Antwort ein `303` ist und kein `302` oder `200`. ## Fragen ### Wie leite ich nach dem Absenden eines HTML-Formulars auf eine andere Seite weiter? Der Server, der das Formular empfängt, antwortet mit einer 303-Weiterleitung auf die Seite. Setze bei Ikiform Redirect after submit in den Einstellungen des Formulars oder füge einen versteckten _redirect-Input mit einer https-URL auf einer der erlaubten Domains des Formulars hinzu. ### Warum wird mein _redirect ignoriert? Entweder ist die Einstellung Redirect after submit des Formulars gesetzt, die immer gewinnt, oder die URL erfüllt die Regeln nicht: Sie muss https sein, auf einer erlaubten Domain oder einer ihrer Subdomains, ohne Port, Benutzername oder Passwort. Formulare ohne erlaubte Domains ignorieren _redirect. ### Kann ich nach dem Absenden auf eine andere Website weiterleiten? Ja. Trag die URL in die Einstellung Redirect after submit des Formulars ein, die jede http- oder https-URL akzeptiert. Mit _redirect müsstest du diese Site zu deinen erlaubten Domains hinzufügen, wodurch sie auch an dein Formular senden dürfte. ### Kann die Dankeseite zeigen, was der Besucher eingesendet hat? Nicht über die Weiterleitung von Ikiform, die die URL genau wie angegeben nutzt. Du kannst in einem Submit-Listener nicht personenbezogene Werte an die _redirect-URL anhängen oder nach einem fetch-Absenden eine Meldung aus deinem eigenen Skript zeigen. ## Weitere Anleitungen - [Absenden von HTML-Formularen](https://ikiform.com/de/guides/html-form-submission.md): Was ein Browser beim Absenden eines Formulars tut: welche Felder er sendet, wie er sie kodiert, was der Server antworten sollte und wie Ikiform antwortet. - [Ohne Neuladen der Seite](https://ikiform.com/de/guides/html-form-submission/without-page-reload.md): Sende ein Formular mit fetch und FormData, damit der Besucher auf der Seite bleibt, mit Feldfehlern, Ladezustand, Wiederholungen und einem Fallback, wenn Skripte versagen. - [Das action-Attribut](https://ikiform.com/de/guides/html-form-submission/action-attribute.md): Was das action-Attribut eines Formulars tut, wie relative und leere Werte aufgelöst werden, wie formaction ein Formular an zwei Ziele schickt und warum statische Hosts mit 405 antworten. - [Formularvalidierung](https://ikiform.com/de/guides/html-form-submission/validation.md): Validiere ein Formular mit required, type, pattern und min, gestalte Fehler mit :user-invalid und setze dieselben Regeln mit Felddefinitionen auf dem Server durch.