フォームの設置
Claude Code と SSGForm を組み合わせることで、お問い合わせフォームや申し込みフォームなど、様々なフォームを簡単に設置・運用できます。
静的サイトでもサーバーレスでフォーム機能を実現できます。SSGFormを使えば、メール通知や自動返信も設定可能です。
SSGFormとは？
SSGFormは、静的サイト向けのフォーム送信サービスです。HTMLで作成するWebサイトに最適な、シンプルで使いやすいサービスです。
無料プランで月100通まで利用可能。有料プランは980円/月で1,000通まで対応
HTMLのform要素のaction属性を変更するだけで導入完了
フォーム送信時のメール通知や、自動返信メールの設定が可能
フォーム完成までの手順
フォームを生成
Claude Codeでワンページサイトを作成すると、お問い合わせフォームが自動生成されることがあります。まだフォームがない場合は、Claude Codeに以下のように依頼してください：
お問い合わせフォームを作成してください。
名前、メールアドレス、件名、お問い合わせ内容の項目を含めてください。この段階では、まだフォームは機能しません（送信先が設定されていない仮の状態）。
SSGFormでフォーム設定
- SSGFormにアクセスし、ログインまたは新規登録
- ダッシュボードで「フォームを追加」をクリック
- 以下の設定を行います：
- フォーム名: 管理用の名前（例：「お問い合わせフォーム」）
- 通知先メールアドレス: フォーム送信時の通知先
- 通知メール件名: 受信メールの件名
- 自動返信: 必要に応じて設定
設定完了後、SSGFormが自動生成したフォームURLが発行されます。このURLを次のステップで使用します。
Claude Codeに実装を依頼
生成されたフォームURLをコピーし、Claude Codeに以下のように依頼します：
このページのフォームをSSGFormを使ったフォームに変えてください。
- フォームの送信先: https://api.ssgform.com/forms/xxxxx（ここに先ほどのURL）
- name属性は、日本語にしてください
- ハニーポット + タイムベース検証 でスパム対策をしてください。
- ハニーポッドのためのフィールドは、`_gotcha` タイムベースの検証のフィールドは、 `_form_loaded_at` を使ってくださいClaude Codeが以下の作業を自動で行います：
form要素のaction属性をSSGFormのURLに変更- 各入力フィールドの
name属性を日本語に設定 - スパム対策のためのハニーポットフィールドとタイムスタンプ検証を追加
スパム対策の仕組み
ハニーポット: 人間には見えない隠しフィールドを設置。ボットがこのフィールドに入力すると送信をブロックします。
タイムベース検証: フォーム表示から送信までの時間を計測。極端に短い時間での送信（ボットの特徴）をブロックします。
テストする
まず、以下の文言を「SSGFormのフォーム設定画面」の「自動応答メール記載除外name属性」に貼り付けてください。
_gotcha
_form_loaded_at実際にフォームが正しく動作するか確認します：
- フォームに情報を入力して送信
- 設定したメールアドレスに通知が届くか確認
- 自動返信を設定している場合、送信者にメールが届くか確認
- エラーメッセージが適切に表示されるか確認
よくある質問
ありがとうページは作れますか？
はい、可能です。以下のようなプロンプトを使ってください。
フォームの送信者に対する「ありがとうページ（ thankyou.html ）」を作ってください。
ありがとうページのデザイン、スタイルは、現在のページのものを反映してください。
ありがとうページに、わかりやすく、前のページに戻るボタンを設置してください。複数のフォームを1つのサイトに設置できますか？
はい、可能です。SSGFormで複数のフォームを作成し、それぞれ異なるURLが発行されます。各フォームに対して個別の設定（通知先、自動返信など）ができます。あるいは、同じフォーム設定に別のフォームで送信しても構いません（中身を自分で判別できるなら）。
添付ファイルの送信はできますか？
SSGFormの仕様によります。詳しくはSSGFormの公式ドキュメントをご確認ください。Claude Codeに「ファイルアップロード機能を追加してください」と依頼すれば、対応可能な範囲で実装してくれます。
次のステップ
フォームの設置が完了したら、以下のカスタマイズも検討してみましょう：
- フォームのデザインをサイト全体のテーマに合わせる
- バリデーション（入力チェック）を強化する
- 送信完了ページをカスタマイズする
- Googleアナリティクスでフォーム送信をトラッキングする
本番環境にデプロイする前に、必ずテスト環境で動作確認を行いましょう。