静的サイトから、メールが送れない
Vercel・Netlify・Cloudflare Pages・GitHub Pages にはメールを送る仕組みがありません。書き方の問題ではなく、置き場所の問題です。
考えられる原因
静的な出力には、メールを送る場所がない
Next.js を静的に書き出した構成、Astro、Nuxt generate、Cloudflare Pages、GitHub Pages。どれもリクエストのたびに動くサーバーを持たないので、フォームの送信を受け取ってメールを出す主体がそもそも存在しません。フロントエンドから直接SMTPは叩けません(叩けたら、認証情報がブラウザに露出しているということです)。
Serverless Function を足しても、送信元が要る
API Route や Edge Function を1本置けば受け取りはできますが、そこから送るには結局メール送信サービスの契約とAPIキーが要ります。さらに、そのサービスで自分のドメインを認証する作業(DNSにレコードを足す)が待っています。
nodemailer + Gmail は、いま通らないことが多い
個人のGmailアカウントをSMTPとして使う書き方は、アプリパスワードの発行が要るうえ、送信数の制限があり、業務用途では止まります。2024年からの送信者要件で、認証の揃っていない差出人は受け取り側で弾かれるようになりました。
差出人を、問い合わせてきた人にしている
「From = 送信者のアドレス」にする実装は、他人のドメインを名乗ることになり、なりすまし判定を受けます。差出人は自社(または送信基盤)、Reply-To に相手のアドレス。これが正しい形です。
直し方
送信サービスを契約して、自分で組む
Resend や SendGrid などを契約し、Function を書き、ドメインを認証し、APIキーを環境変数に置く。正攻法で、細かく制御できます。ただし到達性の面倒(DNS、アラインメント、バウンスの扱い)は自分で見続けることになります。
認証済みの基盤に、送信ごと任せる
フォームの受け取りと送信を、認証を済ませた基盤に渡します。あなたの側のDNS作業はゼロ、APIキーの管理もありません。Reply-To にあなたのアドレスが入るので、返信は普段の受信箱に届きます。nintact はこの形です。
無料で試す置きたい場所にコードを1行。フレームワークは問いません。今あるフォームを作り直したくない場合は、送信先(action)を書き換えるだけでも動きます。届いた問い合わせは分類され、返信の下書きまで用意されます。
<script src="https://nintact.com/embed.js"
data-nintact="YOUR_FORM_ID" async></script>よくある質問
Vercel の Serverless Function からメールを送れないのですか?
Function 自体は動きます。足りないのは送信の経路で、SMTPの契約かメール送信APIの契約、そしてそのサービスで自分のドメインを認証する作業が別に要ります。nintact を使う場合、その部分ごと不要になります。
静的サイトのままで、フォームを動かせますか?
できます。HTMLに script タグを1行置くだけで、フォームの描画と送信の受け取りが動きます。ビルドの設定も、サーバーの追加も要りません。
自分のドメインのDNSを触る必要はありますか?
ありません。メールは認証済みの送信ドメインから出ます。SPF・DKIM・DMARC の設定も、反映待ちもありません。自社ドメインから送りたくなったときだけ、後から設定できます。
無料で使えますか?
無料プランがあります。フォームは無制限、受信・保存・通知に件数の制限はありません。AIによる仕分けと返信の下書きが月30件までです。