Pick a time for your demo. You'll get a calendar invite right away.
``` - `noindex`는 검색 결과에 나오지 않게 합니다. Google에서 그곳으로 오는 사람은 없어야 하며, 분석 도구에서 감사 페이지가 진입 페이지로 잡힌다면 무언가가 그곳으로 링크하고 있다는 신호입니다. - 새로고침해도 안전합니다. Ikiform이 `303`으로 응답했으므로 브라우저는 이 페이지를 GET으로 불러왔고, 다시 불러와도 아무것도 다시 보내지 않습니다. - 이 페이지에서 전환을 센다면 세션당 한 번만 세세요. 새로고침이나 북마크로 다시 불러와지며, 실제 수는 Ikiform 대시보드가 기준입니다. ## 다른 사이트로 리디렉션하기 내 페이지를 건너뛰고 `cal.example.com`이나 일정 서비스의 도메인처럼 다른 도메인의 예약 도구로 바로 보내고 싶다고 해 봅시다. `_redirect`를 쓰면 그 도메인이 **Allowed domains**에 있어야 하는데, 이 목록에는 두 번째 역할이 있습니다. 어떤 사이트가 폼으로 POST할 수 있는지 정하는 것입니다. 일정 서비스의 도메인을 추가하면 그 도메인의 페이지도 내 폼으로 POST할 수 있게 됩니다. 대신 폼 설정의 **Redirect after submit**을 쓰세요. 내 워크스페이스만 설정할 수 있으므로 어떤 URL이든 받으며, **Allowed domains**에는 내 사이트만 남겨 둘 수 있습니다. > Ikiform은 주어진 URL 그대로 리디렉션합니다. 제출 id나 필드 값을 덧붙이지 않으므로 예약 페이지를 리디렉션으로 미리 채울 수는 없습니다. 그곳에서 이메일을 다시 묻거나, 직접 만든 감사 페이지에서 예약 페이지로 링크하세요. ## 폼마다 다른 페이지 대시보드 설정은 폼당 URL 하나입니다. 한 폼이 서로 다른 감사 페이지가 필요한 여러 페이지에 있다면 설정을 비워 두고 각 페이지에 고유한 `_redirect`를 주세요. 독일어 페이지는 방문자를 독일어 감사 페이지로 보냅니다. `de/demo.html`: ```html ``` ### 리디렉션에 값 추가하기 `_redirect`의 쿼리 문자열은 유지되므로 방문자가 고른 것을 감사 페이지로 넘길 수 있습니다. 브라우저 검증 뒤, 폼이 인코딩되기 전에 실행되는 submit 리스너에서 값을 설정하세요. `demo.js`: ```js 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`이면 직접 이동하세요. `스크립트에서 리디렉션`: ```js 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`을 쓰세요. [새로고침 없는 제출 가이드](https://ikiform.com/ko/guides/html-form-submission/without-page-reload.md)에 오류와 로딩 상태를 포함한 전체 핸들러가 있습니다. ## 작동 확인하기 1. 폼의 **Allowed domains**에 사이트 도메인을 추가하고, 개발하는 동안에는 `localhost`도 추가하세요. 비워 두면 어디서든 POST를 받습니다. 2. 실제 페이지에서 폼을 제출하세요. 주소 표시줄에 감사 페이지가 보이고, Network 패널에 `303`으로 응답한 POST가 보입니다. 3. 감사 페이지에서 새로고침을 누르세요. 브라우저가 다시 제출할지 묻지 않고, 대시보드에는 여전히 제출 하나만 있습니다. 4. `_redirect`를 허용되지 않은 도메인의 주소로 바꾸고 제출하세요. 오류 없이 대신 Ikiform의 호스팅 감사 페이지로 이동합니다. 5. 대시보드에서 **Submissions**를 여세요. 보낸 모든 필드가 담긴 새 제출이 있습니다. ## 주의할 점 | 문제 | 원인과 해결 | | --- | --- | | 도메인이 허용되었는데도 `_redirect`가 무시됨 | 폼 설정에 **Redirect after submit**이 설정되어 있으며 항상 우선합니다. 페이지별 리디렉션을 쓰려면 비우세요 | | 프로덕션에서는 동작하지만 `localhost`에서는 안 됨 | `_redirect`는 포트 없는 `https:`여야 하므로 `http://localhost:3000/thanks`는 절대 통과하지 않습니다. 미리보기 배포에서 테스트하거나, 로컬에서는 호스팅 페이지를 받아들이세요 | | 호스팅 감사 페이지에 내 사이트로 돌아가는 링크가 없음 | 폼의 허용 도메인 중 하나에 있는 `https:` 페이지에서 온 POST일 때만 링크가 생깁니다. 도메인을 추가하거나 직접 만든 페이지로 리디렉션하세요 | | 브라우저가 내 페이지가 아니라 Ikiform의 감사 페이지로 이동합니다 | `_redirect`는 도메인이 **Allowed domains**에 있고 `https:` URL일 때만 따릅니다. 도메인을 추가하거나, 대신 폼 설정에서 **Redirect after submit**을 설정하세요. | | 감사 페이지가 검색 결과에 나옴 | 페이지에 ``를 추가하고, 내비게이션에서 링크하지 마세요 | 통과하는 URL과 실패하는 URL 예시를 포함한 정확한 규칙은 [HTML 폼](https://ikiform.com/ko/docs/html.md#redirect-rules)에 있습니다. [개요](https://ikiform.com/ko/guides/html-form-submission.md#response)는 응답이 `302`나 `200`이 아니라 `303`인 이유를 설명합니다. ## 질문 ### HTML 폼이 제출된 뒤 다른 페이지로 리디렉션하려면 어떻게 하나요? 폼을 받는 서버가 그 페이지로 303 리디렉션을 응답합니다. Ikiform에서는 폼 설정의 Redirect after submit을 설정하거나, 폼의 허용 도메인 중 하나에 있는 https URL로 숨겨진 _redirect 입력을 추가하세요. ### _redirect가 무시되는 이유는 무엇인가요? 항상 우선하는 폼의 Redirect after submit 설정이 되어 있거나, URL이 규칙에 맞지 않기 때문입니다. https여야 하고, 허용 도메인이나 그 서브도메인에 있어야 하며, 포트, 사용자 이름, 비밀번호가 없어야 합니다. 허용 도메인이 없는 폼은 _redirect를 무시합니다. ### 폼이 제출된 뒤 다른 웹사이트로 리디렉션할 수 있나요? 네. 어떤 http 또는 https URL이든 받는 폼의 Redirect after submit 설정에 URL을 넣으세요. 대신 _redirect를 쓰면 그 사이트를 허용 도메인에 추가해야 하고, 그러면 그 사이트도 내 폼으로 POST할 수 있게 됩니다. ### 감사 페이지에 방문자가 제출한 내용을 보여 줄 수 있나요? Ikiform의 리디렉션으로는 안 됩니다. URL을 주어진 그대로 쓰기 때문입니다. submit 리스너에서 _redirect URL에 개인정보가 아닌 값을 추가하거나, fetch 제출 뒤 직접 작성한 스크립트로 메시지를 보여 줄 수 있습니다. ## 가이드 더 보기 - [HTML 폼 제출](https://ikiform.com/ko/guides/html-form-submission.md): 폼이 제출될 때 브라우저가 하는 일: 어떤 필드를 보내는지, 어떻게 인코딩하는지, 서버가 어떻게 응답해야 하는지, 그리고 Ikiform이 어떻게 응답하는지 설명합니다. - [페이지 새로고침 없이](https://ikiform.com/ko/guides/html-form-submission/without-page-reload.md): fetch와 FormData로 폼을 보내 방문자를 페이지에 머물게 하세요. 필드 오류, 로딩 상태, 재시도, 스크립트 실패 시 대체 경로까지 다룹니다. - [action 속성](https://ikiform.com/ko/guides/html-form-submission/action-attribute.md): 폼의 action 속성이 하는 일, 상대 값과 빈 값이 해석되는 방식, formaction으로 한 폼을 두 곳에 보내는 방법, 그리고 정적 호스트가 405로 응답하는 이유를 설명합니다. - [폼 검증](https://ikiform.com/ko/guides/html-form-submission/validation.md): required, type, pattern, min으로 폼을 검증하고, :user-invalid로 오류에 스타일을 입히고, 필드 정의로 서버에서 같은 규칙을 강제하세요.