Webサイトのフォーム送信をメールで受け取る、実際に使える5つの方法を紹介します。mailto、フォーム送信サービス、Netlify Forms、メールAPIを使うサーバーレス関数、Google Apps Scriptです。JavaScriptの送信コードとスパム対策も載せています。
Webページは単独ではメールを送れません。フォームのデータを、メールを送れる何かに送信する必要があります。フォーム送信サービス、ホスティングのフォーム機能、メールAPIを呼び出すサーバーレス関数、Google Apps Script、または自分のサーバーです。必要な制御の度合いで選び、訪問者がページから離れないようJavaScriptで送信しましょう。
5つの方法の比較
以下の各方法には完全なコードを載せています。まず、どの方法でも使えるフォームとJavaScriptの送信処理から始め、その後でバックエンドを選びましょう。
mailto: を送信先にした場合だけです。これは訪問者自身のメールアプリを、内容が入力された状態で開きます。メールアプリを設定していない人には使えず、共有パソコンや会社のパソコンを使っている多くの人がこれに当たります。また、結果の見た目を整えたり検証したりもできません。重要な用途には他の方法を使いましょう。
たいていは、メッセージが訪問者のアドレスから送られたように装っているか、送信するサービス用のSPF、DKIM、DMARCレコードがドメインに設定されていないことが原因です。自分のドメインのアドレスから送り、訪問者を返信先に設定し、メールプロバイダーから提示されたDNSレコードを追加しましょう。
人には見えないけれど、単純なボットには見える入力項目です。人はそこを空欄のままにし、ボットは入力してしまいます。バックエンドでは、この項目に値が入っている送信をすべて破棄します。本物の訪問者に手間をかけずに、基本的なスパムの多くを防げます。
最初は不要です。まずはハニーポットと、リンクだらけのメッセージを拒否するといったサーバー側のチェックから始めましょう。それでもスパムが続く場合にだけ認証を追加し、パズルを解かせないタイプを選びましょう。
このフロントエンドはどの方法でも使えます。スクリプトが fetch でフォームを送信し、状況を示すメッセージを表示し、送信に失敗したときは入力内容を残します。
ラベルが入力欄を囲み、ブラウザーが必須項目とメールアドレスの形式をチェックし、状況を示す行はスクリーンリーダーに読み上げられます。
通常のフォーム送信を受け付ける送信先なら、どれでも動作します。送信先がJSONを求める場合は、代わりに JSON.stringify(Object.fromEntries(data)) をJSONのコンテンツタイプで送信してください。
訪問者のメールアプリを、本文に各項目が入った状態で開きます。サーバーは不要ですが、メールアプリがない人の場合は何も送信されません。
Formspree、Basin、Getform、Web3Forms などのサービスは、送信先のURLを提供し、送信内容をひとつずつ受信箱に転送してくれます。登録してフォームを作成し、そのURLを上のフォームの送信先の属性に貼り付け、fetch のスクリプトはそのまま使います。各サービスの最新の無料枠と、データの保存場所を確認しましょう。
Netlify は、専用のデータ属性が付いたフォームをデプロイ時に検出します。サイトのフォーム設定でメール通知をオンにしてください。JavaScriptでレンダリングするフォームの場合は、Netlify が見つけられるよう、ビルド後のファイルに普通のHTML版のコピーも残しておきましょう。
関数がフォームを受け取ってチェックし、サーバー上に保管した秘密鍵を使ってメールAPIを呼び出します。この例では Resend のREST APIを使っています。SendGrid、Postmark、Amazon SES も、それぞれの送信先を使って同じように動作します。
Webの Request と Response オブジェクトを使うプラットフォームで動作します。ホスティングの環境変数に RESEND_API_KEY を設定し、事前にメールプロバイダーで送信元ドメインの認証を済ませてください。
Googleアカウントからウェブアプリとしてデプロイした短いスクリプトが、送信内容をひとつずつメールで送り、スプレッドシートに記録することもできます。1日あたりのメール送信数に上限があるため、少量のフォームに向いています。
新しい Apps Script プロジェクトにこれを貼り付け、自分として実行され、誰でもアクセスできるウェブアプリとしてデプロイします。そのウェブアプリのURLをフォームの送信先に使います。
共用レンタルサーバーではPHPが動いていることがよくあります。組み込みのメール送信関数は多くのサーバーで動作しますが、PHPMailer などのSMTPライブラリと自分のドメインの実際のメールボックスを使うほうが、メールが確実に届きます。
POST以外のリクエストを拒否し、入力の前後の空白を取り除き、返信先アドレスに改行が含まれていれば拒否し（攻撃者がヘッダーを追加できてしまうため）、お礼ページにリダイレクトします。
無料で始める · クレジットカード不要