ブログ一覧

Cloudflare Pagesでお問い合わせフォーム（自動返信あり）を作る

最初に重要なお知らせです。 この記事で以前紹介していた「MailChannelsとの連携でCloudflare Pagesから無料でメール送信する方法」は、 2024年8月31日に終了しました 。当時のコード（api.mailchannels.netへの認証なしリクエスト）は現在動きません。

この記事は2023年に書いたものですが、上記の経緯を踏まえ、2026年時点でCloudflare（Pages / Workers）にお問い合わせフォームを作る方法として全面的に書き直しました。

全体の構成は変わらない

お問い合わせフォームの構成自体は当時から変わりません。

  1. クライアント側：フォームをfetchで送信
  2. サーバー側（Pages Functions / Worker）：受け取って検証
  3. 通知：管理者に知らせる（＋必要ならユーザーに自動返信）

変わったのは3の「通知手段」です。Cloudflare環境はNodemailerのようなSMTPライブラリが基本的に動かないため、ここの選択が肝になります。2026年時点の選択肢を順に紹介します。

方法1：Slackに通知する（一番ラク・おすすめ）

そもそも「お問い合わせが来たことを自分が知りたい」だけなら、メールである必要はありません。SlackのIncoming Webhookに投げるのが、認証情報の管理も含めて一番簡単です。

await fetch(env.SLACK_WEBHOOK_URL, {
	method: "POST",
	headers: { "Content-Type": "application/json" },
	body: JSON.stringify({
		text: `お問い合わせ\n名前: ${name}\n内容: ${message}`,
	}),
});

実はこのサイトのお問い合わせフォームも、最初はメール通知で作ったのですが、最終的にSlack通知に切り替えました。メール配信サービスの設定・ドメイン認証・到達性の心配が全部消えて、スマホへのプッシュも速い。個人や小規模チームならこれで十分です。Discordでもほぼ同じことができます。

方法2：Cloudflare純正のメール送信（Email Service）

「やっぱり通知はメールで受けたい」場合、現在はCloudflare純正の Email Service があります。WorkersのバインディングやREST APIから送信でき、自分のアカウントで検証済みの宛先アドレスへの送信は無料です。お問い合わせ通知を自分のメールアドレスで受ける用途にちょうどはまります。

注意点は、執筆時点でメール送信機能はベータであること、利用にはWorkers Paid（月5ドル〜）が必要なことです。

方法3：メール配信サービスのHTTP API（自動返信が必要ならこれ）

「送信してくれたユーザーへ自動返信メールを送る」要件がある場合は、外部のメール配信サービスをHTTP API経由で使います。SMTPが使えなくても、fetchでAPIを叩く分には何の問題もありません。Resend、SendGrid、Amazon SESあたりが定番です。

以下はResendの例です。どのサービスでも「APIキーを環境変数に置いて、JSONをPOSTする」という形は共通です。

await fetch("https://api.resend.com/emails", {
	method: "POST",
	headers: {
		Authorization: `Bearer ${env.RESEND_API_KEY}`,
		"Content-Type": "application/json",
	},
	body: JSON.stringify({
		from: "no-reply@example.com",
		to: ["user@example.com"],
		subject: "お問い合わせを受け付けました",
		text: "お問い合わせありがとうございます。内容を確認のうえ、改めてご連絡いたします。",
	}),
});

いずれのサービスも、送信元ドメインのDNS認証（SPF / DKIM）の設定が必要です。ここを省くと迷惑メール行きになるので、面倒でも最初にやってください。

方法4：MailChannelsを使い続ける場合

MailChannels自体が消えたわけではなく、APIキー認証の Email API として継続しています（無料枠は1日100通）。以前のコードからの移行が一番少ない選択肢なので、旧方式から引っ越す場合は検討してください。

組み合わせの実例

要件別にまとめると、こうなります。

  • 自分が気づければいい → 方法1（Slack）だけで完結
  • 通知をメールで受けたい → 方法2（Email Service）または方法3
  • ユーザーへの自動返信が必要 → 方法3（メールAPI）。管理者通知は方法1と組み合わせると見落としがない

メール送信まわりの詳しい話は Nodemailerの使い方 （通常のNode.js環境向け）や Cloudflare Pages Functionsでメールが送信できない場合の対処法 も参考にしてください。

ブログ一覧