폼 제출 후 감사 페이지로 리디렉션하기

폼은 스스로 리디렉션할 수 없습니다. POST를 받는 서버가 Location 헤더와 함께 303 See Other로 응답하고 브라우저가 그 페이지를 불러옵니다. Ikiform에서는 폼 설정의 Redirect after submit을 설정하거나, 폼의 Allowed domains 중 하나에 있는 https: URL로 숨겨진 _redirect 입력을 추가하세요. 둘 다 없으면 방문자는 Ikiform의 호스팅 감사 페이지로 이동합니다.

예시는 감사 페이지가 실제로는 다음 단계인 데모 요청 폼입니다. 방문자에게 시간을 고르라고 합니다. 그래서 리디렉션 대상이 평소보다 중요해지고, 이 페이지가 주로 다루는 질문이 생깁니다. 폼이 사람들을 어디로 보낼지 누가 정할 수 있는가입니다.

이 경우가 다른 점

HTML에는 "제출 후 여기로 이동"하는 속성이 없습니다. action은 데이터가 가는 곳이고, 그다음 페이지는 서버가 응답하는 무엇이든 됩니다. 그래서 리디렉션은 항상 받는 서버가 결정합니다. 그 서버가 Ikiform이라면 영향을 줄 수 있는 방법은 정확히 두 가지이고, 둘의 신뢰 수준은 다릅니다.

_redirect에 엄격한 규칙이 있는 이유는 그 값이 POST와 함께 도착하기 때문입니다. 규칙이 없으면 누구나 내 폼 URL을 POST하는 링크에 넣고 방문자를 피싱 페이지로 보낼 수 있으며, 이것이 오픈 리디렉션입니다.

폼

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

폼의 Allowed domains에 example.com을 추가하면 이 폼은 POST하고 303을 받아 /demo/next-step으로 이동합니다. 감사 페이지는 내 사이트의 평범한 HTML입니다.

<!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는 검색 결과에 나오지 않게 합니다. Google에서 그곳으로 오는 사람은 없어야 하며, 분석 도구에서 감사 페이지가 진입 페이지로 잡힌다면 무언가가 그곳으로 링크하고 있다는 신호입니다.
• 새로고침해도 안전합니다. Ikiform이 303으로 응답했으므로 브라우저는 이 페이지를 GET으로 불러왔고, 다시 불러와도 아무것도 다시 보내지 않습니다.
• 이 페이지에서 전환을 센다면 세션당 한 번만 세세요. 새로고침이나 북마크로 다시 불러와지며, 실제 수는 Ikiform 대시보드가 기준입니다.

다른 사이트로 리디렉션하기

내 페이지를 건너뛰고 cal.example.com이나 일정 서비스의 도메인처럼 다른 도메인의 예약 도구로 바로 보내고 싶다고 해 봅시다. _redirect를 쓰면 그 도메인이 Allowed domains에 있어야 하는데, 이 목록에는 두 번째 역할이 있습니다. 어떤 사이트가 폼으로 POST할 수 있는지 정하는 것입니다. 일정 서비스의 도메인을 추가하면 그 도메인의 페이지도 내 폼으로 POST할 수 있게 됩니다.

대신 폼 설정의 Redirect after submit을 쓰세요. 내 워크스페이스만 설정할 수 있으므로 어떤 URL이든 받으며, Allowed domains에는 내 사이트만 남겨 둘 수 있습니다.

폼마다 다른 페이지

대시보드 설정은 폼당 URL 하나입니다. 한 폼이 서로 다른 감사 페이지가 필요한 여러 페이지에 있다면 설정을 비워 두고 각 페이지에 고유한 _redirect를 주세요. 독일어 페이지는 방문자를 독일어 감사 페이지로 보냅니다.

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

리디렉션에 값 추가하기

_redirect의 쿼리 문자열은 유지되므로 방문자가 고른 것을 감사 페이지로 넘길 수 있습니다. 브라우저 검증 뒤, 폼이 인코딩되기 전에 실행되는 submit 리스너에서 값을 설정하세요.

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

방문자는 /demo/next-step?size=11-50에 도착하고, 페이지는 그 팀 규모에 맞는 예약 링크를 보여 줄 수 있습니다. 개인정보가 아닌 값만 넣으세요. 쿼리 문자열은 브라우저 기록, 서버 로그, 분석 도구에 남습니다.

fetch 제출 뒤 리디렉션하기

fetch 호출은 리디렉션이 아니라 JSON을 받으므로 Ikiform의 리디렉션 규칙이 적용되지 않습니다. 응답이 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");

뒤로 가기 버튼이 폼으로 돌아가야 한다면 location.replace 대신 location.assign을 쓰세요. 새로고침 없는 제출 가이드에 오류와 로딩 상태를 포함한 전체 핸들러가 있습니다.

작동 확인하기

1. 폼의 Allowed domains에 사이트 도메인을 추가하고, 개발하는 동안에는 localhost도 추가하세요. 비워 두면 어디서든 POST를 받습니다.
2. 실제 페이지에서 폼을 제출하세요. 주소 표시줄에 감사 페이지가 보이고, Network 패널에 303으로 응답한 POST가 보입니다.
3. 감사 페이지에서 새로고침을 누르세요. 브라우저가 다시 제출할지 묻지 않고, 대시보드에는 여전히 제출 하나만 있습니다.
4. _redirect를 허용되지 않은 도메인의 주소로 바꾸고 제출하세요. 오류 없이 대신 Ikiform의 호스팅 감사 페이지로 이동합니다.
5. 대시보드에서 Submissions를 여세요. 보낸 모든 필드가 담긴 새 제출이 있습니다.

주의할 점

통과하는 URL과 실패하는 URL 예시를 포함한 정확한 규칙은 HTML 폼에 있습니다. 개요는 응답이 302나 200이 아니라 303인 이유를 설명합니다.

질문