EmDashにお問い合わせフォームを付ける｜保存しないAstroページの作り方

EmDash のブログ雛形には、お問い合わせフォームが入っていません。プラグインを探す前に、Astro のページを1枚足すだけで作れます。このサイトの「お問い合わせ」は、編集部がその方法で作ったものです。

ページを1枚足す

EmDash の雛形は Astro でできていて、src/pages/ に置いたファイルがそのままページになります。編集部は src/pages/contact.astro を作りました。先頭に次の1行を書くと、送信のたびにサーバー側で処理できるページになります。

export const prerender = false;

同じページの中で、送信されたとき（POST）だけ入力を読みます。

if (Astro.request.method === "POST") {
	const form = await Astro.request.formData();
	// ここで入力を確かめて、通知を送る
}

入力された内容は、データベースにも D1 にも保存していません。確かめたあと、編集部のチャットへ通知を送るだけです。保存しないので、個人情報を預かり続けることがありません。

通知先の鍵（チャットの API トークン）は、プログラムに書かずに Cloudflare の「シークレット」に入れます。

npx wrangler secret put CHATWORK_TOKEN

ページの中では import { env } from "cloudflare:workers"; で読み出します。

公開したフォームには、機械が送ってくる営業や英文のスパムが必ず届きます。編集部は次の順で確かめています。

1と5で落としたときも、画面には「送信しました」と出します。「日本語で書いてください」と教えると、日本語を混ぜて送り直してくるからです。

さらに Cloudflare は、送ってきた人の国を request.cf.country で教えてくれます。日本以外からの送信は、捨てずに通知の件名へ [海外] と付けています。

公開前に、wrangler dev で次の3通りを送って確かめました。