Acme is almost here
Invoices that chase themselves. Leave your email and we'll invite you first.
```
- `_redirect`는 일반 POST 후 브라우저를 `thanks.html`로 보냅니다. 폼의 **Allowed domains** 중 하나에 있는 `https:` URL일 때만 작동하므로 그곳에 도메인을 추가하세요. 폼 설정의 **Redirect after submit**을 쓰면 숨겨진 입력 없이 같은 일을 합니다.
- `_gotcha` 입력은 허니팟입니다. 사람에게는 보이지 않고, 모든 입력을 채우는 봇은 스팸으로 저장됩니다.
- `aria-live="polite"`는 포커스를 옮기지 않고 스크린 리더가 스크립트의 메시지를 읽어 주게 합니다.
- script 태그에 `defer`를 쓰므로 폼이 생긴 뒤에 실행되고 페이지 그리기를 막지 않습니다.
### 기능 개선
`waitlist.js`:
```js
const form = document.getElementById("waitlist");
const message = form.querySelector(".message");
const button = form.querySelector("button");
const key = crypto.randomUUID();
form.addEventListener("submit", async (event) => {
event.preventDefault();
button.disabled = true;
message.textContent = "Joining…";
try {
const response = await fetch(form.action, {
method: "POST",
headers: { Accept: "application/json", "Idempotency-Key": key },
body: new FormData(form),
});
const result = await response.json();
if (result.ok) {
form.replaceChildren(Object.assign(document.createElement("p"), {
textContent: "You're on the list. We'll email you on launch day.",
role: "status",
}));
return;
}
if (result.error.code === "challenge_required") {
form.submit();
return;
}
const wait = response.headers.get("Retry-After");
message.textContent = wait
? `Too many tries. Wait ${wait} seconds and try again.`
: result.error.fields?.email?.[0] ?? result.error.message;
} catch {
form.submit();
return;
}
button.disabled = false;
});
```
- `Accept: application/json`은 Ikiform이 리디렉션 대신 JSON으로 응답하게 해서, 스크립트가 결과를 제자리에 보여 줄 수 있게 합니다.
- 멱등성 키는 페이지를 불러올 때마다 한 번 만들어집니다. 더블 클릭하거나 응답이 느려 재시도해도 가입은 하나만 저장됩니다.
- `challenge_required`는 폼의 스팸 검사가 **Ikiform**으로 설정되어 있는데 `fetch`가 토큰을 보내지 않았다는 뜻입니다. `form.submit()`은 일반 방식으로 POST해 Ikiform의 확인 페이지를 보여 준 뒤 감사 페이지로 넘어갑니다. `submit` 이벤트를 다시 발생시키지 않으므로 무한 반복은 없습니다.
- 네트워크 오류도 같은 폴백을 탑니다. Ikiform에 연결할 수 없었다면 일반 POST가 브라우저 자체 오류를 보여 주는데, 멈춘 버튼보다는 여전히 솔직합니다.
- `429`가 나면 `Retry-After`를 읽어 얼마나 기다려야 하는지 알려 줍니다.
### 감사 페이지
`thanks.html`:
```html