Netlify Forms

This walks Claude through implementing Netlify's form handling, which is honestly one of the simpler ways to collect form submissions without spinning up a backend. The guide covers the basics like adding data-netlify="true" to your forms, but more importantly it handles the tricky SSR framework case where you need a static HTML skeleton file for React, Next.js, and similar setups, otherwise submissions silently fail. It also covers the gotcha that in SSR apps you have to POST to the skeleton file path instead of "/" or your framework intercepts it. Includes AJAX patterns, file uploads (8MB limit), spam filtering with honeypot fields, and the submissions API if you need programmatic access.

skills.sh installs: 3.3K
GitHub stars: 51
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add netlify/context-and-tools --skill netlify-forms --agent claude-code

Installs into .claude/skills of the current project.

Files

Netlify Forms

Mark a form for detection with data-netlify="true" (or the bare netlify attribute — equivalent) on the <form> tag. Forms are detected by parsing the final built HTML at deploy time — there is no runtime API call or backend code. Client-side/JS-rendered/SSR forms are NOT in the built HTML and are never detected on their own; they require a static skeleton file (see below).

Prerequisite: form detection must be enabled once in the Netlify UI (Forms > Enable form detection). Takes effect on the next deploy.

Static HTML form

<form name="contact" method="POST" data-netlify="true">
  <p><label>Your Name: <input type="text" name="name" /></label></p>
  <p><label>Your Email: <input type="email" name="email" /></label></p>
  <p><label>Message: <textarea name="message"></textarea></label></p>
  <p><button type="submit">Send</button></p>
</form>

SKILL.md on GitHub