はじめに
AWSのS3バケットを使って静的Webサイトを構築し、FormSubmitでメールフォーム機能を実現する方法を解説します。
サーバーレスで簡単にフォームが作れるので、個人サイトや小規模な事業所のホームページにも最適です。
書こうと思ったきっかけ
実際にサーバーを持たない状態で問い合わせフォームを設置したいという相談を受けたことがきっかけです。
S3とFormSubmitの組み合わせなら簡単に実装できると感じたため、その手順を共有しようと思いました。
静的なお問い合わせフォームを手軽に実装したいときに便利なのが、FormSubmit。そして、AWSのS3バケットは静的なHTMLサイトをホスティングできる強力な選択肢です。
「S3に置いたHTMLフォームから、FormSubmitでメール通知できるの？」という疑問に対して、答えはYES！ただし、正しい設定が必要です。
この記事では、S3バケットに配置したフォームから、FormSubmitで通知を受け取るための具体的な手順と注意点を解説します。
S3バケットの作成とファイル配置
まずは、S3で静的ウェブサイトを構成しましょう。
- S3バケットを作成（例：honda-sr-office-site）
- 「パブリックアクセスを許可」に設定（公開用サイトの場合）
- HTMLファイルをアップロード（例：index.html、contact.html）
- ファイルにブラウザでアクセスできるURLを確認
静的ウェブサイトホスティングの有効化
S3でHTMLをそのままウェブサイトとして公開するには、次の設定が必要です。
- バケットの「プロパティ」タブを開く
- 「静的ウェブサイトホスティング」を有効化
- インデックスドキュメントに index.html を指定（任意）
- 表示されたURLをメモしておく（このURLが公開サイトの入口）
FormSubmitとの組み合わせ時の注意点
HTTPS対応のURLでアクセス
S3バケットのURLが http://〜 形式の場合、セキュリティの理由でFormSubmitが動作しないことがあります。
→ CloudFrontでHTTPS化することも可能ですが、テスト用途であれば formsubmit.co 側で問題なく処理されることもあります。
CORSの設定は不要
FormSubmitはフォーム送信時にクライアントから直接POSTする方式なので、JavaScriptベースのAPI通信のようなCORS設定は不要です。
HTMLコード例（S3対応）
以下のコードを contact.html に記述して、S3にアップロードするだけでOKです：
<form action="https://formsubmit.co/tbentian37@gmail.com" method="POST">
<!-- 送信後に移動するページ（任意） -->
<input type="hidden" name="_next" value="thanks.html">
<!-- スパム対策（任意） -->
<input type="text" name="_honey" style="display:none">
<input type="hidden" name="_captcha" value="false">
<!-- 入力フィールド -->
<input type="text" name="name" placeholder="お名前" required>
<input type="email" name="email" placeholder="メールアドレス" required>
<textarea name="message" placeholder="お問い合わせ内容" required></textarea>
<button type="submit">送信する</button>
</form>
まとめ
S3バケット上で静的ウェブサイトホスティングを有効にし、そこにHTMLファイルを配置すれば、FormSubmitは問題なく利用できます。
WordPressやサーバーなしでも、コードだけで実現できるお問い合わせフォームはとても手軽で便利です。
ぜひS3とFormSubmitを活用して、シンプルなフォームサイトを構築してみてください！