はじめに
企業や個人事業のWebサイトに「お問い合わせフォーム」を設置するのはとても一般的ですが、サーバーを用意せずにメール送信機能をつけたい方も多いはずです。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
この記事では、無料で使える外部サービス Formsubmit を使って、HTMLフォームの内容を特定のメールアドレス（例：info@example.com）に送信する方法をわかりやすく解説します。
Formsubmitにメールアドレスを登録する
- https://formsubmit.co にアクセスします
- 中央の入力欄に受信したいメールアドレス（例：info@example.com）を入力します
- 「Submit」ボタンを押すと、確認メールが届きます
- メール内の「Verify」ボタンをクリックして認証を完了します
HTMLフォームのコードを修正する
既存のHTMLファイルの <form> タグを以下のように修正します。
<form action="https://formsubmit.co/info@example.com" method="POST">
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_next" value="thanks.html">
<label for="name">お名前：</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">メールアドレス：</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="message">お問い合わせ内容：</label><br>
<textarea id="message" name="message" rows="5" required></textarea><br><br>
<button type="submit">送信する</button>
</form>
解説
-
actionのURLに登録したメールアドレスを含めることで、そこに送信されます -
_captchaはスパム防止機能をオフにする設定です -
_nextは送信完了後に遷移するページの指定です
完了メッセージ用のHTMLを作る（thanks.html）
フォーム送信後に「ありがとうございました」と表示したい場合は、以下のような thanks.html を作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>送信完了</title>
</head>
<body>
<h2>お問い合わせありがとうございました！</h2>
<p>内容を確認後、折り返しご連絡いたします。</p>
<a href="index.html">トップページに戻る</a>
</body>
</html>
フォーム送信をテストする
- Webページをブラウザで開き、フォームに情報を入力
- 「送信する」をクリック
- 指定したメールアドレスに通知が届いているか確認
-
thanks.htmlが表示されれば成功！
より便利なオプション（必要に応じて）
| 機能 | 入力項目例 |
|---|---|
| 自動返信 | <input type="hidden" name="_autoresponse" value="お問い合わせありがとうございます。"> |
| スパム対策無効 | <input type="hidden" name="_captcha" value="false"> |
| 完了ページ指定 | <input type="hidden" name="_next" value="thanks.html"> |
注意点
- 無料プランでは1日100通までの送信制限があります
- Gmailなどでは迷惑メールフォルダやプロモーションタブに入ることがあります
まとめ
Formsubmit を使えば、サーバーを準備しなくても、簡単にお問い合わせフォームからの内容をメールで受け取ることができます。
今回紹介した方法をそのまま使えば、ホンダ社労士事務所のお問い合わせフォームから info@example.com 宛に自動で連絡が届くようになります。