サイト運用 2026.07.16 Mari

お問い合わせフォームをゼロから作った話

WordPress の Contact Form 7 から、Resend API を使ったサーバーレスなお問い合わせフォームへ。プラグインなしでメール送信する仕組みを構築しました。

プラグインがない世界

WordPress では Contact Form 7 というプラグインを入れるだけで、お問い合わせフォームが完成します。フォームの設定、メールの送信、スパム対策まで全部やってくれる。

Astro に移行して、その「全部やってくれる」がなくなりました。

フォームの HTML は書ける（WEBデザイナーかつ、コーディングもそれなりに経験ありなので）。問題は、送信ボタンを押したあとの処理。入力されたデータをメールとして送る仕組みが必要です。

Claude Code が提案してくれたのは、Resend というメール送信 API でした。

仕組みはシンプルです。

サーバーを持たなくても、API 経由でメールが送れる。これが「サーバーレス」の意味でした。

WordPress では reCAPTCHA や Akismet でスパム対策をしていましたが、今回はもっとシンプルな方法を採用しました。

ハニーポット方式です。

フォームに「人間には見えない入力欄」を追加しておきます。普通のユーザーはこの欄に何も入力しません。でも、スパムボットは全部の欄を自動入力するので、「見えない欄に入力がある＝スパム」と判定できます。

reCAPTCHA のような「私はロボットではありません」チェックを入れなくて済むので、ユーザー体験もスッキリ。

メール送信には API キーが必要ですが、コードに直接書くわけにはいきません。

環境変数として Cloudflare のダッシュボードに設定しました。

これらはコードには含まれず、サーバー（Cloudflare）側で管理されています。

フォーム送信後は /contact/thanks/ にリダイレクトする仕組みにしました。「お問い合わせありがとうございます」のページが表示されて、ユーザーは送信できたことを確認できます。

WordPress では当たり前だったこの挙動も、自分で実装する必要があります。と言っても、Claude Code に「送信後にサンクスページに飛ばしたい」と伝えるだけ。

Contact Form 7 が裏でやっていたことを分解すると、「フォーム HTML」「入力値の受け取り」「メール送信」「スパム対策」「完了画面の表示」の5つ。

どれも複雑なことではなかったけれど、プラグインが全部隠してくれていたから気づかなかっただけでした。

自分で作ったことで、「フォームの裏側で何が起きているか」が理解できるようになりました。