Rediriger vers une page de remerciement après l'envoi d'un formulaire

Un formulaire ne peut pas se rediriger lui-même ; le serveur qui reçoit l'envoi répond 303 See Other avec un en-tête Location, et le navigateur charge cette page. Avec Ikiform, définissez Redirect after submit dans les paramètres du formulaire, ou ajoutez un input masqué _redirect avec une URL https: sur l'un des Allowed domains du formulaire. Sans l'un ni l'autre, les visiteurs arrivent sur la page de remerciement hébergée par Ikiform.

L'exemple est un formulaire de demande de démo dont la page de remerciement est en réalité une étape suivante : elle demande au visiteur de choisir un créneau. La cible de la redirection compte donc plus que d'habitude, et cela soulève la question dont traite surtout cette page : qui a le droit de décider où un formulaire envoie les gens.

Ce qui change ici

Le HTML n'a pas d'attribut pour « aller ici après l'envoi ». L'action est l'endroit où vont les données, et la page suivante est ce que le serveur répond. La redirection est donc toujours la décision du serveur qui reçoit. Quand ce serveur est Ikiform, il y a exactement deux façons de l'influencer, et elles n'inspirent pas la même confiance.

Les règles strictes sur _redirect existent parce que sa valeur arrive avec l'envoi. Sans elles, n'importe qui pourrait placer l'URL de votre formulaire dans un lien qui envoie puis renvoie les visiteurs vers une page de phishing : c'est ce qu'on appelle une redirection ouverte.

Le formulaire

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

Ajoutez example.com sous les Allowed domains du formulaire et ce formulaire s'envoie, reçoit un 303 et arrive sur /demo/next-step. La page de remerciement est du HTML ordinaire sur votre 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 la garde hors des résultats de recherche. Personne ne devrait y arriver depuis Google, et une page de remerciement qui apparaît comme page d'entrée dans vos statistiques signale qu'un lien y mène.
• Le rafraîchissement est sans risque. Comme Ikiform a répondu par 303, le navigateur a chargé cette page en GET, et la recharger ne renvoie rien.
• Si vous comptez les conversions sur cette page, comptez une fois par session. Un rafraîchissement ou un favori la recharge, et le tableau de bord d'Ikiform fait foi pour le décompte.

Rediriger vers un autre site

Supposons que vous vouliez sauter votre propre page et envoyer directement les gens vers un outil de réservation sur un autre domaine, comme cal.example.com ou le domaine d'un service de prise de rendez-vous. Avec _redirect, ce domaine devrait figurer dans Allowed domains, et cette liste a un second rôle : elle décide quels sites peuvent envoyer vers le formulaire. Ajouter le domaine d'un service de prise de rendez-vous signifie que des pages de ce domaine pourraient aussi envoyer vers votre formulaire.

Utilisez plutôt Redirect after submit dans les paramètres du formulaire. Il accepte n'importe quelle URL, car seul votre espace de travail peut le définir, et il laisse Allowed domains ne lister que vos propres sites.

Des pages différentes pour des formulaires différents

Le paramètre du tableau de bord correspond à une URL par formulaire. Quand un même formulaire apparaît sur plusieurs pages qui ont besoin de pages de remerciement différentes, laissez le paramètre vide et donnez à chaque page son propre _redirect. Une page en allemand envoie les visiteurs vers la page de remerciement en allemand :

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

Ajouter une valeur à la redirection

Les paramètres d'URL de _redirect sont conservés, donc vous pouvez transmettre à la page de remerciement ce que le visiteur a choisi. Définissez la valeur dans un écouteur submit, qui s'exécute après la validation du navigateur et avant l'encodage du formulaire :

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;
});

Le visiteur arrive sur /demo/next-step?size=11-50, et la page peut afficher le bon lien de réservation pour cette taille d'équipe. Limitez-vous à des valeurs non personnelles : les paramètres d'URL finissent dans l'historique du navigateur, les journaux du serveur et les outils d'analyse.

Rediriger après un envoi avec fetch

Un appel fetch reçoit du JSON, pas une redirection, donc les règles de redirection d'Ikiform ne s'appliquent pas. Naviguez vous-même quand la réponse est ok :

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");

Utilisez location.assign plutôt que location.replace si le bouton retour doit ramener au formulaire. Le guide sans rechargement contient le gestionnaire complet avec erreurs et état de chargement.

Vérifiez que tout fonctionne

1. Dans Allowed domains du formulaire, ajoutez le domaine de votre site, plus localhost pendant le développement. Laissez vide pour accepter les envois de partout.
2. Envoyez le formulaire depuis votre page en production. La barre d'adresse affiche votre page de remerciement, et le panneau Réseau montre que l'envoi a reçu 303.
3. Rafraîchissez la page de remerciement. Le navigateur ne demande pas de renvoyer le formulaire, et le tableau de bord affiche toujours une seule soumission.
4. Remplacez _redirect par une adresse sur un domaine non autorisé et envoyez. Vous arrivez plutôt sur la page de remerciement hébergée par Ikiform, sans erreur.
5. Ouvrez Submissions dans le tableau de bord. La nouvelle soumission y est, avec tous les champs envoyés.

Pièges

Les règles exactes, avec des exemples d'URL acceptées et refusées, se trouvent dans Formulaires HTML. La vue d'ensemble explique pourquoi la réponse est un 303 et pas un 302 ou un 200.

Questions