netlify-forms

netlify-forms の概要

netlify-forms は何のためのものか

netlify-forms スキルは、独自のサーバーサイド送信エンドポイントを用意せずに、Netlify Forms を使った HTML フォーム処理を実装するためのスキルです。問い合わせフォーム、リード獲得、フィードバック、簡単なファイルアップロード、そして Netlify に収集・振り分けさせたいその他のフォームに最適です。

どんな人に向いているか

Netlify 上で開発していて、静的サイト、SSR アプリ、JavaScript レンダリングのフォームに対して、わかりやすいセットアップ手順がほしいなら、この netlify-forms スキルを使ってください。特に、カスタムのフォーム基盤を増やさずに送信の信頼性を保ちたい Backend Development のワークフローで効果的です。

実務でいちばん重要なポイント

主な判断ポイントは、フォームの検出、正しいフォーム名の付け方、そしてフォームがサーバーでレンダリングされるのか、それともブラウザ上にしか現れないのかという点です。このスキルが最も役立つのは、試行錯誤のあとではなく、初回デプロイで netlify-forms の導入と利用手順を通したいときです。

netlify-forms スキルの使い方

スキルをインストールして適用範囲を決める

skills ワークフローでは netlify-forms install の手順を使い、最初に SKILL.md を読みます。このリポジトリは小さく自己完結しているため、主要な情報源は SKILL.md です。参照すべき rules/、references/、resources/ フォルダはありません。

目的を具体的なプロンプトに落とし込む

スキルには、具体的なフォームの目的、フレームワーク、デプロイ環境を伝えてください。たとえば「Next.js アプリに、カスタムのサンクスページとスパム対策つきの Netlify 問い合わせフォームを追加したい」は強い入力です。「フォームを設定して」は弱い入力です。ルート、フィールド一覧、フレームワークが具体的であるほど、出力側の推測は減ります。

出力品質に効く箇所を読む

まず Basic Setup と JavaScript-Rendered Forms を読み、デフォルト以外の動作が必要なら AJAX Submissions と Vanilla JavaScript も確認してください。アプリが React、Vue、SvelteKit、Remix、Nuxt、Next.js を使っているなら、ビルド時の検出に関するガイダンスが netlify-forms ガイドの要です。

ワークフローを正しく適用する

フォームには、一意の name、method="POST"、data-netlify="true" を必ず設定してください。カスタムの完了ページが必要な場合は、/thank-you.html ではなく /thank-you のようなパスを使います。JavaScript レンダリングのフォームでは、ビルド時検出のために静的な HTML の骨組みを含めてください。そうしないと、UI 上には表示されていても Netlify がフォームを認識しないことがあります。

netlify-forms スキル FAQ

一般的なプロンプトより優れている？

はい。実運用で重要な実装詳細、つまり Netlify がフォームをどう検出するか、隠し form-name の扱い方、JS レンダリングのアプリで何が変わるのかが必要なときは特に有効です。一般的なプロンプトでは検出条件を見落としがちで、そこが netlify-forms 導入の最大の障壁になります。

シンプルな HTML フォームでも必要？

Netlify 上で基本的な問い合わせフォームだけが必要でも、このスキルは最小限の有効なマークアップとサンクスページのルールを示してくれるので時短になります。Netlify ホスティングの範囲外だったり、カスタムのバックエンドロジックが必要だったりする場合は、netlify-forms はおそらく適していません。

モダンなフレームワークでも使える？

はい。ただし、ブラウザで描画されたマークアップだけに頼る形ではうまくいきません。React、Vue、SSR フレームワーク、その他のクライアントレンダリング構成では、Netlify のビルド検出に必要な静的な骨組みパターンを説明してくれる点が重要です。

初心者向け？

概ねはい。構文自体はシンプルですが、重要なのはデプロイモデルを理解することです。初心者は、netlify-forms の使い方を手順どおりに進め、ブラウザ上に見えるフォームが自動的に検出されると決めつけないほうが、早く成功しやすくなります。

netlify-forms スキルを改善する方法

不足しているデプロイ情報を先に伝える

最良の結果を得るには、最初からフレームワーク、ホスティング構成、送信先の挙動を明示してください。AJAX 送信、ファイルアップロード、スパムフィルタ、カスタムのサンクスルートが必要かどうかも入れておくと、スキルが最適な方法を選びやすくなります。

フォームの具体的な形を伝える

フィールド、バリデーション要件、取得したい隠しメタデータを列挙してください。たとえば「name, email, company, message, required email, optional file upload」は、「問い合わせフォーム」よりはるかに実用的です。これなら、より良いマークアップと、Netlify 固有の明確なガイダンスを出しやすくなります。

よくある失敗パターンに注意する

典型的なミスは、data-netlify="true" の付け忘れ、重複したフォーム名の使用、JS レンダリング時の静的検出の欠落、そしてサンクスページのパス指定ミスです。最初の出力が失敗したら、フォーム全体を書き直す前にまずここを確認してください。

ビルド結果と送信結果をもとに反復する

最初の出力のあとで、デプロイをテストし、Netlify 上でフォームが認識されているか確認し、足りないフィールドやルーティングの問題をメモします。そのうえで、netlify-forms のプロンプトに「production で form not detected」や「AJAX submit works locally but not on deploy」のような具体的な失敗内容を追記すると、次の出力がより的確になります。