リソース
Webサイト構築
Netlify Formsの作成

Netlify Formsの作成

Netlify FormsをClaude Codeで効率的に作成する方法を説明します。

Netlify Formsとは

Netlify Formsは、サーバーレスでフォーム処理ができるNetlifyの機能です。フォーム送信データは自動的に収集され、管理画面で確認できます。

公式リファレンス

詳細な仕様や設定については、以下の公式ドキュメントを参照してください：

Claude Codeでの作成方法

以下のプロンプトをClaude Codeに入力することで、要件を満たすフォームを作成できます：

Netlify Formsに対応したお問い合わせフォームを作成してください。以下の要件を満たしてください：

1. HTML構造: フォーム要素にname='contact', id='contact-form'を設定し、data-netlify='true'属性を追加
2. JavaScript: DOMContentLoadedイベント内で実行し、FormData作成前に要素の存在とタイプを検証
3. エラーハンドリング: try-catch文でエラーをキャッチし、ユーザーに分かりやすいメッセージを表示
4. スパム対策: HoneypotフィールドとNetlify reCAPTCHAを実装
5. レスポンシブ対応: モバイルデバイスでも正常に動作
6. テスト: ローカルとNetlify本番環境での動作確認

フォームの基本設定

1. Netlify管理画面でのフォーム有効化

  1. Netlify管理画面にログイン
  2. 対象サイトのダッシュボードを開く
  3. Site settings → Forms をクリック
  4. フォーム処理が有効になっていることを確認

2. HTMLでの基本属性

フォームを認識させるために必要な属性：

  • data-netlify="true": Netlify Formsを有効化
  • name="フォーム名": フォームの識別名
  • method="post": POSTメソッドでの送信

フォーム投稿時の通知設定

メール通知の設定

  1. Netlify管理画面で Site settings → Forms → Form notifications
  2. Add notification をクリック
  3. Email notification を選択
  4. 通知先メールアドレスを入力
  5. 件名とメッセージをカスタマイズ

Slack通知の設定（有料ユーザーのみ）

  1. Form notifications で Add notification
  2. Slack notification を選択
  3. Slack Webhookの設定に従ってURLを入力
  4. 通知メッセージをカスタマイズ

Webhook通知（Zapier、n8nなどを使う場合）

カスタムAPIへの通知も可能です：

  1. Webhook notification を選択
  2. エンドポイントURLを入力
  3. HTTP method (POST推奨) を選択

フォーム履歴の確認方法

管理画面での確認

  1. Netlify管理画面で対象サイトを選択
  2. サイドメニューから Forms をクリック
  3. フォーム一覧から対象フォームを選択
  4. 送信データの一覧が表示される

データのエクスポート

  • CSV形式: フォーム詳細画面の Export CSV ボタン
  • 個別確認: 各送信データをクリックで詳細表示
  • 削除: 不要なデータは個別に削除可能

スパム対策の履歴確認

  • Spam タブ: スパムとして判定された送信を確認
  • Verified submissions: 正常な送信のみを表示
  • フィルタリング機能で期間指定も可能

実装後の確認事項

フォーム作成後は以下を確認してください：

  1. ローカルテスト: hugo serverでフォームが正常に表示されることを確認
  2. デプロイ後テスト: Netlifyにデプロイ後、実際にフォーム送信をテスト（ブランチを活用しましょう！）
  3. 管理画面確認: Netlify管理画面でフォーム送信データが受信されることを確認
Netlify Forms フォーム作成 Claude Code お問い合わせ スパム対策 reCAPTCHA 通知設定 履歴確認
ワンページサイトを作る方法