Acme is almost here
Invoices that chase themselves. Leave your email and we'll invite you first.
```
- `_redirect` は、通常の送信の後にブラウザーを `thanks.html` に移動させます。フォームの **Allowed domains** にある `https:` の URL でしか機能しないので、そこにドメインを追加してください。フォーム設定の **Redirect after submit** を使えば、hidden の入力欄なしで同じことができます。
- `_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 で応答するので、スクリプトがその場に結果を表示できます。
- 冪等性キーはページの読み込みごとに 1 回作られます。ダブルクリックや、応答が遅いときのリトライでも、登録は 1 件だけ保存されます。
- `challenge_required` は、フォームのスパムチェックが **Ikiform** に設定されていて、`fetch` がトークンを送らなかったことを意味します。`form.submit()` は通常の方法で送信するので、Ikiform の確認ページ、続いてサンクスページが表示されます。`submit` イベントは再び発火しないので、ループにはなりません。
- ネットワークエラーでも同じフォールバックを使います。Ikiform に到達できなかった場合、通常の送信ではブラウザー自身のエラーが表示されますが、止まったままのボタンよりは正直です。
- `429` では `Retry-After` を読み、どれだけ待てばよいかを表示します。
### サンクスページ
`thanks.html`:
```html