# Astro でニュースレター登録フォームを作る
> プリレンダーされたページのままで使える Astro のニュースレターフォームです。Astro Action が同意を確認して Ikiform に送信し、エンドポイントが読者を MailerLite に追加します。
公開日 2026-10-25 · https://ikiform.com/ja/guides/newsletter-signup/astro
Astro のページはプリレンダーのままにし、登録フォームをフッターのコンポーネントに置きます。JavaScript がなければ、Astro Action を実行するオンデマンドの `/newsletter` ページ 1 つに送信し、JavaScript があれば小さなスクリプトが同じアクションを呼ぶので、読者は記事から離れません。アクションは `astro/zod` でメールアドレスと同意を検証し、シークレットキー付きでフォームバックエンドに送信し、API エンドポイントが検証済みの登録を MailerLite に転送します。
[メインガイドの Astro タブ](https://ikiform.com/ja/guides/newsletter-signup.md#form)では、オンデマンドで描画するページで Action を使っています。Astro のサイトの多くはすべてのページがプリレンダーされたブログやドキュメントで、フッターのフォームはそのすべてに置く必要があります。このページでは、それらのページを静的なままにしつつ、登録はサーバーで処理します。キーと許可ドメインについては [Astro のドキュメントガイド](https://ikiform.com/ja/docs/guides/astro.md)にあります。
## 静的なページで変わること
Astro のドキュメントによると、フォームの `action` 属性経由でアクションを呼ぶには、ページをオンデマンドで描画する必要があります。プリレンダーされた記事には背後にサーバーがないので、その POST を処理できません。回避策は 2 つあり、この構成では両方を使います。
| 経路 | 動くとき | 読者に見えるもの |
| --- | --- | --- |
| スクリプトが `actions.subscribe()` を呼ぶ | JavaScript が読み込み済み。通常のケース | フォームの下のステータスの行が変わる。記事にとどまる |
| フォームが `/newsletter?_action=...` に送信する | JavaScript がオフか、まだ読み込まれていない | 結果かエラーを表示するオンデマンドの `/newsletter` ページ |
オンデマンドで動くのは `/newsletter` と Webhook のエンドポイントだけです。記事はすべて静的ファイルのままで、アダプターがその 2 つのルート用にサーバー関数を追加します。
図: Astro のフッターからの登録が同じアクションに届く 2 つの方法
1. JavaScript があると、フッターのスクリプトが通常の送信を止め、フォームのデータでアクションを呼びます。
2. アクションが入力を検証して Ikiform に送信し、データかエラーをスクリプトに返し、スクリプトがステータスの行を更新します。
3. JavaScript がないと、ブラウザーはクエリ文字列にアクションを付けて、オンデマンドの /newsletter ページにフォームを送信します。
4. Astro が同じアクションのハンドラーを実行し、ページが getActionResult で結果を読んで表示します。
ハンドラーは 1 つで、入り口は 2 つ。静的な記事に専用のサーバーは要りません。
## プロジェクトの準備
`プロジェクトの構成`:
```text
src/
actions/index.ts
components/SignupForm.astro
layouts/Base.astro
pages/
newsletter.astro
api/ikiform.ts
astro.config.mjs
.env
```
`astro add vercel`、`astro add netlify`、`astro add cloudflare` のいずれかでアダプターをインストールします。シークレットは `import.meta.env` で読むのではなく、`astro:env` で宣言します。変数がなければスキーマがビルドを失敗させ、同じインポートが Cloudflare のランタイムを含むどのアダプターでも動きます。
`astro.config.mjs`:
```js
import { defineConfig, envField } from "astro/config";
import vercel from "@astrojs/vercel";
export default defineConfig({
adapter: vercel(),
env: {
schema: {
IKIFORM_SECRET_KEY: envField.string({ context: "server", access: "secret" }),
IKIFORM_WEBHOOK_SECRET: envField.string({ context: "server", access: "secret" }),
MAILERLITE_API_KEY: envField.string({ context: "server", access: "secret" }),
MAILERLITE_GROUP_ID: envField.string({ context: "server", access: "secret" }),
},
},
});
```
`.env`:
```bash
IKIFORM_SECRET_KEY=ik_sk_your_secret_key
IKIFORM_WEBHOOK_SECRET=whsec_your_webhook_secret
MAILERLITE_API_KEY=your_mailerlite_token
MAILERLITE_GROUP_ID=123456789
```
**API keys** で `submissions:write` スコープのシークレットキーを作り、[ピラーのフィールド定義](https://ikiform.com/ja/guides/newsletter-signup.md#fields)をフォームの **Fields** タブに貼り付けます。
## 作ってみる
### Action
`src/actions/index.ts`:
```ts
import { ActionError, defineAction } from "astro:actions";
import { IKIFORM_SECRET_KEY } from "astro:env/server";
import { z } from "astro/zod";
export const server = {
subscribe: defineAction({
accept: "form",
input: z.object({
email: z.email({ error: "Enter an email address we can send the newsletter to." }),
first_name: z.string().trim().max(80).nullish(),
consent: z.boolean().refine((ticked) => ticked, { error: "Tick the box so we know you want the emails." }),
source: z.enum(["footer", "post", "newsletter-page"]).catch("footer"),
_gotcha: z.string().nullish(),
}),
handler: async (input, context) => {
const origin = context.request.headers.get("origin");
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 ? { Origin: origin } : {}),
},
body: JSON.stringify({
email: input.email,
first_name: input.first_name || undefined,
consent: true,
source: input.source,
_gotcha: input._gotcha ?? "",
}),
}).catch(() => null);
const result = await response?.json().catch(() => null);
if (result?.ok) return { subscribed: true };
throw new ActionError({
code: response?.status === 429 ? "TOO_MANY_REQUESTS" : "BAD_REQUEST",
message: result?.error?.fields?.email?.[0] ?? result?.error?.message ?? "We couldn't reach the list. Try again.",
});
},
}),
};
```
- `accept: "form"` で Astro が `FormData` を解析します。チェックボックスは真偽値に変換されるので、チェックありは `true`、なしは `false` になり、`refine` がそれを同意のメッセージに変えます。
- 空のテキスト入力は `null` で届くので、任意のフィールドには `optional()` ではなく `nullish()` を使います。
- `source` は一覧にない値なら `footer` にフォールバックするので、細工した送信で設置場所をでっち上げることはできません。
- Ikiform は無料の `localhost` テストをそのヘッダーで判別し、サーバーの `fetch` は Origin を送らないので、`Origin` の行でブラウザーのオリジンを引き継ぎます。
- Ikiform のエラーは `ActionError` になります。`429` は `TOO_MANY_REQUESTS` としてその意味を保ちます。
> サーバー側の版はシークレットキー付きで送信するので、Ikiform は **Allowed domains** と人間確認をスキップします。その場合はすべての送信がサーバーの IP から来るため、訪問者ごとに 1 分あたり 5 件という Standard の制限が、全訪問者をまとめて数えることになります。サーバー経由で送信するフォームには Relaxed か Custom の[レート制限](https://ikiform.com/ja/docs/rate-limits.md)を選び、`IKIFORM_SECRET_KEY` はサーバー専用の環境変数に置いてください。
### フッターのコンポーネント
`src/components/SignupForm.astro`:
```astro
---
import { actions } from "astro:actions";
interface Props {
source?: "footer" | "post" | "newsletter-page";
}
const { source = "footer" } = Astro.props;
const target = new URL("/newsletter", Astro.url);
target.search = actions.subscribe.queryString;
---
```
- `queryString` は、アクションの URL を組み立てるためのドキュメントに記載された方法です。`/newsletter` の URL に付ければ、JavaScript なしの送信は元の静的なページではなくオンデマンドのページに送られます。
- Astro はコンポーネントの `