Redirecionar para uma página de agradecimento após enviar o formulário

Um formulário não consegue se redirecionar sozinho; o servidor que recebe o envio responde 303 See Other com um header Location, e o navegador carrega essa página. Com o Ikiform, defina Redirect after submit (redirecionar após o envio) nas configurações do formulário, ou adicione um input oculto _redirect com uma URL https: em um dos Allowed domains do formulário. Sem nenhum dos dois, os visitantes chegam à página de agradecimento hospedada do Ikiform.

O exemplo é um formulário de pedido de demo cuja página de agradecimento é na verdade um próximo passo: ela pede ao visitante para escolher um horário. Isso torna o destino do redirecionamento mais importante que o normal, e levanta a pergunta de que esta página mais trata: quem pode decidir para onde um formulário manda as pessoas.

O que muda aqui

O HTML não tem atributo para "vá para cá depois de enviar". O action é para onde os dados vão, e a página seguinte é o que o servidor responder. Então o redirecionamento é sempre decisão do servidor que recebe. Quando esse servidor é o Ikiform, há exatamente duas formas de influenciá-lo, e elas não têm o mesmo nível de confiança.

As regras rígidas do _redirect existem porque o valor dele chega junto com o envio. Sem elas, qualquer um poderia colocar a URL do seu formulário num link que envia e depois joga os visitantes numa página de phishing, que é o que é um open redirect.

O formulário

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

Adicione example.com em Allowed domains do formulário e isto envia, recebe um 303 e chega a /demo/next-step. A página de agradecimento é HTML comum no seu 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 a mantém fora dos resultados de busca. Ninguém deveria chegar lá pelo Google, e uma página de agradecimento aparecendo como página de entrada nos seus analytics é sinal de que algo aponta para ela.
• O refresh é seguro. Como o Ikiform respondeu com 303, o navegador carregou esta página com GET, e recarregá-la não envia nada de novo.
• Se você conta conversões nesta página, conte uma vez por sessão. Um refresh ou um favorito a recarrega, e a contagem real é a do painel do Ikiform.

Redirecionar para outro site

Suponha que você queira pular sua própria página e mandar as pessoas direto para uma ferramenta de agendamento em outro domínio, como cal.example.com ou o domínio de um serviço de agendamento. Com _redirect, esse domínio teria que estar em Allowed domains, e essa lista tem uma segunda função: ela decide quais sites podem enviar ao formulário. Adicionar o domínio de um serviço de agendamento significa que páginas nesse domínio também poderiam enviar ao seu formulário.

Use Redirect after submit nas configurações do formulário. Ele aceita qualquer URL, porque só o seu workspace pode defini-lo, e deixa Allowed domains listando só os seus próprios sites.

Páginas diferentes para formulários diferentes

A configuração do painel é uma URL por formulário. Quando um formulário aparece em várias páginas que precisam de páginas de agradecimento diferentes, deixe a configuração vazia e dê a cada página seu próprio _redirect. Uma página em alemão manda os visitantes para a página de agradecimento em alemão:

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

Acrescentando um valor ao redirecionamento

Query strings no _redirect são mantidas, então você pode passar o que o visitante escolheu para a página de agradecimento. Defina o valor num listener de submit, que roda depois da validação do navegador e antes de o formulário ser codificado:

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

O visitante chega em /demo/next-step?size=11-50, e a página pode mostrar o link de agendamento certo para aquele tamanho de equipe. Use só valores não pessoais: query strings acabam no histórico do navegador, em logs de servidor e nos analytics.

Redirecionar depois de um envio por fetch

Uma chamada fetch recebe JSON, não um redirecionamento, então as regras de redirecionamento do Ikiform não se aplicam. Navegue você mesmo quando a resposta for 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");

Use location.assign em vez de location.replace se o botão voltar deve retornar ao formulário. O guia sem recarregar tem o handler completo com erros e estado de carregamento.

Confira se funciona

1. Em Allowed domains do formulário, adicione o domínio do seu site, mais localhost enquanto desenvolve. Deixe vazio para aceitar envios de qualquer lugar.
2. Envie o formulário pela sua página no ar. A barra de endereço mostra sua página de agradecimento, e o painel Network mostra o envio respondido com 303.
3. Aperte refresh na página de agradecimento. O navegador não pede para reenviar, e o painel continua mostrando um envio.
4. Troque o _redirect por um endereço num domínio que não é permitido e envie. Você chega à página de agradecimento hospedada do Ikiform, sem erro.
5. Abra Submissions no painel. O novo envio está lá com todos os campos que você enviou.

Pegadinhas

As regras exatas, com exemplos de URLs que passam e que falham, estão em Formulários HTML. A visão geral explica por que a resposta é um 303 e não um 302 ou 200.

Perguntas