HTMLで<form>を書いても、そのままではどこにも届きません。入力欄を作るのがHTMLの仕事で、受け取るのは別の役目だからです。ここでは、サーバーを用意せずに問い合わせを受け取れる無料サービス3つを、実際の書き方つきで比べます。
なぜ送信できないのか
フォームの送信ボタンを押すと、ブラウザはactionに書かれた宛先へ入力内容を届けようとします。
<form action="ここに送信先が必要">この宛先＝「受け取って、メールで知らせてくれるプログラム」が必要です。自前で用意するにはサーバーとプログラミングが要りますが、その部分だけを代行してくれるサービスを使えば、HTMLの1行を書きかえるだけで済みます。
3つの選択肢の比較
| Formspree | Netlify Forms | Googleフォーム | |
|---|---|---|---|
| 手間 | HTMLに1行 | 属性を1つ足すだけ | 埋め込みコードを貼る |
| 見た目 | 自分のデザインのまま | 自分のデザインのまま | Googleの見た目になる |
| 無料枠 | 月50件 | 月100件 | 無制限 |
| 条件 | どこで公開してもOK | Netlifyで公開している場合のみ | どこで公開してもOK |
| 受け取り方 | メール | 管理画面＋メール通知 | スプレッドシート＋メール通知 |
Formspree
actionに発行されたURLを書くだけで、送信内容がメールで届くサービス。いま作ったフォームの見た目をそのまま使えます。公開場所を選ばないので、どんな環境でも使える万能型です。
使い方は、発行されたURLをactionに貼り、method="POST"を足すだけです。
<form action="https://formspree.io/f/あなたのID" method="POST">
<label for="email">メールアドレス</label>
<input type="email" name="email" id="email" required>
<label for="message">メッセージ</label>
<textarea name="message" id="message" required></textarea>
<button type="submit">おくる</button>
</form>Netlify Forms
Netlifyでサイトを公開している場合に使える機能。フォームタグに属性を1つ足すだけで、公開時にNetlifyが自動で受け取り役を用意してくれます。
<form name="contact" method="POST" data-netlify="true">
<label for="name">おなまえ</label>
<input type="text" name="name" id="name" required>
<label for="message">メッセージ</label>
<textarea name="message" id="message" required></textarea>
<button type="submit">おくる</button>
</form>data-netlify="true"が合図です。届いた内容はNetlifyの管理画面に一覧で残り、メール通知も設定できます。
Googleフォーム
フォーム自体をGoogleで作り、できあがったものを自分のページに埋めこむ方法。回答は自動でスプレッドシートにたまります。件数制限がなく、集計まで面倒を見てくれるのが強みです。
フォームを作ったあと、送信 → < >（埋め込み）で出てくるコードをHTMLに貼ります。
<iframe src="https://docs.google.com/forms/d/e/……/viewform?embedded=true"
width="100%" height="800" frameborder="0">読み込んでいます…</iframe>引きかえに、見た目はGoogleのデザインのままになります。サイトの雰囲気にそろえたいなら、前の2つが向いています。
迷ったらこの選び方
- 自分のデザインのまま、どこで公開しても使いたい → Formspree
- Netlifyで公開している → Netlify Forms（追加の登録が不要）
- 見た目より集計を優先したい・件数が多い → Googleフォーム
設置したら必ずやること
1. 自分でテスト送信する
公開後に自分で1件送って、実際にメールが届くかを必ず確認します。届かない原因の多くは、迷惑メールフォルダに入っているか、name属性の付け忘れです。
2. 迷惑メール対策を入れる
公開したフォームには、自動プログラムからの投稿が来ます。どのサービスにも対策機能（reCAPTCHAやハニーポット）が用意されているので、管理画面で有効にしておきましょう。
3. 個人情報の扱いを一言書く
メールアドレスなどを受け取るなら、フォームの近くに何に使うかを書き添えます。むずかしい文章は不要です。
<p>いただいた内容は、お返事のためだけに使います。</p>まとめ
- HTMLのフォームは送信先（action）と受け取り役がないと届かない
- デザインを保ちたいならFormspree、Netlify利用中ならNetlify Forms、集計重視ならGoogleフォーム
- 設置したらテスト送信・迷惑メール対策・個人情報の一言の3点をセットで
問い合わせ先があるかどうかで、サイトは「見せるだけのもの」から「届くもの」に変わります。