,
message: String(result.error.message),
values,
},
{ status: response.status },
);
}
export default function Report({ actionData }: Route.ComponentProps) {
const sending = useNavigation().state === "submitting";
if (actionData?.sent) return Thanks. We'll look at that page today.
;
const fields = actionData?.fields ?? {};
const values = actionData?.values;
return (
);
}
```
**SvelteKit**
既定のフォームアクションは、Ikiform のステータスとフィールドのエラーを付けて `fail()` を返します。JavaScript がなければページがそれを付けて再レンダリングされ、`use:enhance` があればその場で更新されます。`$app/env/private` から読めるよう、`src/env.ts` で `defineEnvVars` を使って `IKIFORM_SECRET_KEY` を宣言します。
`src/routes/report/+page.server.ts`:
```ts
import { fail } from "@sveltejs/kit";
import { IKIFORM_SECRET_KEY } from "$app/env/private";
import type { Actions } from "./$types";
export const actions = {
default: async ({ request, fetch, url }) => {
const form = await request.formData();
const values = {
email: String(form.get("email") ?? "").trim(),
page: String(form.get("page") ?? "").trim(),
severity: String(form.get("severity") ?? ""),
details: String(form.get("details") ?? "").trim(),
};
const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: `Bearer ${IKIFORM_SECRET_KEY}`,
Origin: request.headers.get("origin") ?? url.origin,
},
body: JSON.stringify({ ...values, _gotcha: String(form.get("_gotcha") ?? "") }),
});
const result = await response.json();
if (!result.ok) {
return fail(response.status, { values, fields: (result.error.fields ?? {}) as Record });
}
return { sent: true };
},
} satisfies Actions;
```
`src/routes/report/+page.svelte`:
```svelte
{#if form?.sent}
Thanks. We'll look at that page today.
{:else}
{/if}
```
**Nuxt**
サーバールートは `NUXT_IKIFORM_SECRET_KEY` から設定される `runtimeConfig.ikiformSecretKey` を使ってレポートを転送します。フィールドのエラーを `data` に入れて `createError` を投げ、`$fetch` がそれをクライアントに返します。
`server/api/report.post.ts`:
```ts
export default defineEventHandler(async (event) => {
const body = await readBody>(event);
const { ikiformSecretKey } = useRuntimeConfig(event);
const origin = getRequestHeader(event, "origin");
const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: `Bearer ${ikiformSecretKey}`,
...(origin ? { Origin: origin } : {}),
},
body: JSON.stringify({
email: body.email ?? "",
page: body.page ?? "",
severity: body.severity ?? "",
details: body.details ?? "",
_gotcha: body._gotcha ?? "",
}),
});
const result = await response.json();
if (!result.ok) {
throw createError({
status: response.status,
message: String(result.error.message),
data: { fields: result.error.fields ?? {} },
});
}
return { sent: true };
});
```
`app/components/ReportForm.vue`:
```vue
Thanks. We'll look at that page today.
```
**React**
シングルページアプリはブラウザーから送信するので、ここにシークレットキーはありません。**Allowed domains**（許可ドメイン）がフォームを守ります。`Accept: application/json` を付けると、リダイレクトではなく JSON の応答が返ります。
`src/ReportForm.tsx`:
```tsx
import { type FormEvent, useState } from "react";
const ENDPOINT = "https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx";
const SEVERITIES = [
["cosmetic", "Looks wrong"],
["broken", "Something doesn't work"],
["blocking", "I can't continue"],
];
export function ReportForm() {
const [sent, setSent] = useState(false);
const [sending, setSending] = useState(false);
const [fields, setFields] = useState>({});
const [problem, setProblem] = useState("");
async function onSubmit(event: FormEvent) {
event.preventDefault();
setSending(true);
setFields({});
setProblem("");
try {
const response = await fetch(ENDPOINT, {
method: "POST",
headers: { Accept: "application/json" },
body: new FormData(event.currentTarget),
});
const result = await response.json();
if (result.ok) setSent(true);
else if (result.error.fields) setFields(result.error.fields);
else setProblem(result.error.message);
} catch {
setProblem("Couldn't reach the server. Check your connection and try again.");
} finally {
setSending(false);
}
}
if (sent) return Thanks. We'll look at that page today.
;
return (
);
}
```
**Vue**
同じブラウザーからの送信を Vue コンポーネントで書いたものです。フォームには本物の `action` と `method` が残っているので、スクリプトの読み込みに失敗してもプレーンな方法で送信されます。
`src/components/ReportForm.vue`:
```vue
Thanks. We'll look at that page today.
```
> サーバー側の版はシークレットキー付きで送信するので、Ikiform は **Allowed domains** と人間確認をスキップします。その場合はすべての送信がサーバーの IP から来るため、訪問者ごとに 1 分あたり 5 件という Standard の制限が、全訪問者をまとめて数えることになります。サーバー経由で送信するフォームには Relaxed か Custom の[レート制限](https://ikiform.com/ja/docs/rate-limits.md)を選び、`IKIFORM_SECRET_KEY` はサーバー専用の環境変数に置いてください。
各サーバー版は、ブラウザーの `Origin` ヘッダーがあればそれを転送します。サーバー側の `fetch` は Origin を送らず、Ikiform はこれを使って、プランのないワークスペースでの無料の `localhost` テストを見分けるからです。
- どの版にも本物の `method` があり、Ikiform に直接送信する版には本物の `action` もあります。スクリプトがオフでもフォームは送信され、`303` を受け取ります。
- 各入力欄の `name` が、定義のフィールド `id` になります。`page` ではなく `url` のように一致しないと、`Unknown field "url"` 付きの `422` になります。
- 非表示の `_gotcha` 入力欄がハニーポットです。これを埋めたボットは、何も知らせずにスパムとして保存されます。
- JavaScript 版は、各フィールドの最初のメッセージを使って `error.fields` を各入力欄の下に表示します。プレーンな HTML 版はそれを Ikiform のエラーページに任せます。
フレームワークごとの詳細はドキュメントにあります。[Next.js](https://ikiform.com/ja/docs/guides/nextjs.md)、[Astro](https://ikiform.com/ja/docs/guides/astro.md)、[SvelteKit](https://ikiform.com/ja/docs/guides/sveltekit.md)、[Nuxt](https://ikiform.com/ja/docs/guides/nuxt.md)、[React](https://ikiform.com/ja/docs/guides/react.md)、[Vue](https://ikiform.com/ja/docs/guides/vue.md)、[サーバーから](https://ikiform.com/ja/docs/guides/server.md)を参照してください。
## 2 層のバリデーション
ブラウザーのバリデーションとサーバーのバリデーションは役割が違います。ブラウザーの制約チェック（`required`、`type="email"`、`minlength`、`pattern`）はすぐにフィードバックを返しますが、誰でも迂回できます。ボットは直接送信しますし、スクリプトはチェックを一切実行しない `form.submit()` を呼べます。ルールが本当に守られるのはサーバーだけです。
| ルール | ブラウザー側 | Ikiform のフィールド定義 |
| --- | --- | --- |
| 必須 | `required` | `"required": true` |
| メールアドレス | `type="email"` | `"type": "email"`、任意で `allowed_domains` |
| URL | `type="url"` | `"type": "url"`、任意で `https_only` |
| 長さ | `minlength`, `maxlength` | `validation.min_length`, `max_length` |
| 選択肢のみ | `