はじめに
Webサイトにお問い合わせフォームを設置するのは、ユーザーとの重要な接点になります。
しかし、サーバーを用意したりバックエンドを構築したりするのは初心者にはハードルが高いことも。個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
今回は、無料サービス「Formsubmit」を利用して、簡単にメール送信フォームを実装する方法を紹介します。
書こうと思ったきっかけ
静的なWebサイト（例：S3バケット上に配置したサイト）でメール送信機能を実装したいと思ったとき、PHPやサーバーなしで対応できる方法を探していたところ、Formsubmitが便利だったため備忘録としてまとめました。
内容の説明（フォーム構造とポイント）
以下は、実際に設置したHTMLコードの例です。
<main class="container">
<section>
<h2>お問い合わせフォーム</h2>
<form action="https://formsubmit.co/tbentian37@gmail.com" method="POST">
<!-- thanks.html がS3に存在する場合はOK。なければ index.html などに変えても可 -->
<input type="hidden" name="_next" value="thanks.html">
<!-- スパム対策 -->
<input type="text" name="_honey" style="display:none">
<input type="hidden" name="_captcha" value="false">
<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>
</section>
</main>
解説
-
<form action="https://formsubmit.co/メールアドレス" method="POST">- Formsubmitに送信するためのエンドポイント。送信先のメールアドレスを登録しておく必要があります。
-
<input type="hidden" name="_next" value="thanks.html">- フォーム送信後に遷移するページの指定。
-
スパム対策用の
_honeyフィールド- 人間には見えない入力欄で、ボットによる送信を防止します。
-
_captchaの無効化- Formsubmitのデフォルトのキャプチャ機能を無効にします。
-
入力項目（名前、メール、メッセージ）
-
required属性で必須項目に。
-
-
ボタン
- CSSでスタイリングすることで押しやすく、おしゃれな見た目にできます。
まとめ
Formsubmitを使えば、サーバー不要でシンプルなお問い合わせフォームが実現できます。
HTMLだけで実装可能なため、静的なWebサイトでも導入しやすく、初心者でも扱いやすい点が魅力です。
今後は、自動返信メッセージの設定やバリデーション強化なども試してみると、より便利なフォームになるとかと思います！