はじめに

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サイトでも導入しやすく、初心者でも扱いやすい点が魅力です。

今後は、自動返信メッセージの設定やバリデーション強化なども試してみると、より便利なフォームになるとかと思います！