Redirigir a una página de agradecimiento tras enviar un formulario

Un formulario no puede redirigirse a sí mismo; el servidor que recibe el envío responde 303 See Other con una cabecera Location, y el navegador carga esa página. Con Ikiform, configura Redirect after submit en los ajustes del formulario, o añade un input oculto _redirect con una URL https: en uno de los Allowed domains del formulario. Sin ninguno de los dos, los visitantes llegan a la página de agradecimiento alojada de Ikiform.

El ejemplo es un formulario de solicitud de demo cuya página de agradecimiento es en realidad un siguiente paso: pide al visitante que elija una hora. Eso hace que el destino de la redirección importe más de lo normal, y plantea la pregunta de la que trata sobre todo esta página: quién puede decidir adónde manda a la gente un formulario.

Qué cambia aquí

HTML no tiene ningún atributo para "ir aquí después de enviar". El action es adonde van los datos, y la página siguiente es lo que responda el servidor. Así que la redirección siempre la decide el servidor que recibe el envío. Cuando ese servidor es Ikiform, hay exactamente dos formas de influir en ella, y no tienen la misma confianza.

Las reglas estrictas de _redirect existen porque su valor llega con el envío. Sin ellas, cualquiera podría poner la URL de tu formulario en un enlace que envía y luego redirige a los visitantes a una página de phishing, que es lo que es una redirección abierta.

El formulario

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

Añade example.com en los Allowed domains del formulario y esto envía, recibe un 303 y llega a /demo/next-step. La página de agradecimiento es HTML normal en tu sitio:

<!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 mantiene fuera de los resultados de búsqueda. Nadie debería llegar ahí desde Google, y una página de agradecimiento como entrada en tus analíticas es señal de que algo enlaza a ella.
• Recargar es seguro. Como Ikiform respondió con 303, el navegador cargó esta página con GET, y recargarla no vuelve a enviar nada.
• Si cuentas conversiones en esta página, cuenta una vez por sesión. Una recarga o un marcador la vuelven a cargar, y el panel de Ikiform es el recuento real.

Redirigir a otro sitio

Supón que quieres saltarte tu propia página y mandar a la gente directamente a una herramienta de reservas en otro dominio, como cal.example.com o el dominio de un servicio de agenda. Con _redirect, ese dominio tendría que estar en Allowed domains, y esa lista tiene un segundo trabajo: decide qué sitios pueden enviar al formulario. Añadir el dominio de un servicio de agenda significa que las páginas de ese dominio también podrían enviar a tu formulario.

Usa en su lugar Redirect after submit en los ajustes del formulario. Acepta cualquier URL, porque solo tu espacio de trabajo puede configurarlo, y deja Allowed domains con solo tus propios sitios.

Páginas distintas para formularios distintos

El ajuste del panel es una URL por formulario. Cuando un formulario aparece en varias páginas que necesitan páginas de agradecimiento distintas, deja el ajuste vacío y dale a cada página su propio _redirect. Una página en alemán manda a los visitantes a la página de agradecimiento en alemán:

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

Añadir un valor a la redirección

Las query strings de _redirect se conservan, así que puedes pasar a la página de agradecimiento lo que eligió el visitante. Pon el valor en un listener de submit, que se ejecuta después de la validación del navegador y antes de que se codifique el formulario:

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

El visitante llega a /demo/next-step?size=11-50, y la página puede mostrar el enlace de reserva adecuado para ese tamaño de equipo. Limítalo a valores no personales: las query strings acaban en el historial del navegador, los logs del servidor y las analíticas.

Redirigir tras un envío con fetch

Una llamada fetch recibe JSON, no una redirección, así que las reglas de redirección de Ikiform no se aplican. Navega tú cuando la respuesta sea 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");

Usa location.assign en lugar de location.replace si el botón atrás debe volver al formulario. La guía sin recarga tiene el manejador completo con errores y estado de carga.

Comprueba que funciona

1. En Allowed domains del formulario, añade el dominio de tu sitio, y localhost mientras desarrollas. Déjalo vacío para aceptar envíos desde cualquier lugar.
2. Envía el formulario desde tu página publicada. La barra de direcciones muestra tu página de agradecimiento, y el panel Network muestra el envío respondido con 303.
3. Pulsa recargar en la página de agradecimiento. El navegador no pide reenviar, y el panel sigue mostrando un envío.
4. Cambia _redirect a una dirección en un dominio no permitido y envía. Llegas en su lugar a la página de agradecimiento alojada de Ikiform, sin ningún error.
5. Abre Submissions en el panel. El nuevo envío está ahí con todos los campos que enviaste.

Errores comunes

Las reglas exactas, con ejemplos de URLs que pasan y que fallan, están en Formularios HTML. El resumen explica por qué la respuesta es un 303 y no un 302 o un 200.

Preguntas