Nach dem Absenden auf eine Dankeseite weiterleiten

Ein Formular kann sich nicht selbst weiterleiten; der Server, der den Post empfängt, antwortet mit 303 See Other und einem Location-Header, und der Browser lädt diese 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 Allowed domains des Formulars hinzu. Ohne beides landen Besucher auf der gehosteten Dankeseite von Ikiform.

Das Beispiel ist ein Formular für Demo-Anfragen, dessen Dankeseite eigentlich ein nächster Schritt ist: Sie bittet den Besucher, einen Termin zu wählen. Dadurch ist das Weiterleitungsziel wichtiger als sonst, und es wirft die Frage auf, um die es auf dieser Seite hauptsächlich geht: Wer darf entscheiden, wohin ein Formular Leute schickt?

Was hier anders ist

HTML hat kein Attribut für „nach dem Absenden hierhin“. Die action ist das Ziel der Daten, und die Seite danach ist, was der Server antwortet. Die Weiterleitung ist also immer die Entscheidung des empfangenden Servers. Ist dieser Server Ikiform, gibt es genau zwei Wege, sie zu beeinflussen, und sie genießen nicht dasselbe Vertrauen.

Die strengen Regeln für _redirect gibt es, weil sein Wert mit dem Post ankommt. Ohne sie könnte jeder die URL deines Formulars in einen Link packen, der sendet und Besucher dann auf eine Phishing-Seite umleitet, und genau das ist ein Open Redirect.

Das Formular

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <label for="email">Work email</label>
  <input id="email" name="email" type="email" autocomplete="email" required />

  <label for="company">Company</label>
  <input id="company" name="company" autocomplete="organization" required />

  <label for="team_size">Team size</label>
  <select id="team_size" name="team_size">
    <option value="1-10">1 to 10</option>
    <option value="11-50">11 to 50</option>
    <option value="51+">51 or more</option>
  </select>

  <input type="hidden" name="_redirect" value="https://example.com/demo/next-step" />
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Request a demo</button>
</form>

Füge example.com unter den Allowed domains des Formulars hinzu, und das hier sendet, bekommt ein 303 und landet auf /demo/next-step. Die Dankeseite ist normales HTML auf deiner Site:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="robots" content="noindex" />
    <title>Thanks, pick a time</title>
  </head>
  <body>
    <h1>Thanks. One more step.</h1>
    <p>Pick a time for your demo. You'll get a calendar invite right away.</p>
    <p><a href="https://cal.example.com/acme/demo">Choose a time</a></p>
  </body>
</html>

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

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:

<input type="hidden" name="_redirect" value="https://example.com/de/demo/danke" />

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:

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:

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

Die genauen Regeln, mit Beispielen für URLs, die bestehen und scheitern, stehen in HTML-Formulare. Die Übersicht erklärt, warum die Antwort ein 303 ist und kein 302 oder 200.

Fragen