netlify-forms
Serverless form handling on Netlify-hosted sites — detects HTML forms at deploy time, stores submissions, filters spam, and sends notifications. Use when adding a contact form, lead-capture form, file-upload form, or newsletter signup to a Netlify site; wiring AJAX form submission; setting up a custom thank-you page; adding a honeypot or reCAPTCHA to a form; getting forms working in Next.js, Nuxt, SvelteKit, Astro, or Gatsby; reading form submissions via the Netlify API; or debugging missing sub
Security Assessment
About netlify-forms
This skill is a guide to Netlify Forms, Netlify's serverless mechanism for collecting HTML form submissions without writing server-side code. It solves the common friction of getting forms actually registered and collecting data on Netlify: detection happens at deploy time by parsing prerendered HTML, so forms in JavaScript-rendered or server-rendered apps silently fail unless set up correctly. The skill walks through the full lifecycle and the many footguns.
Covered capabilities include basic setup with the data-netlify attribute and unique form name, custom thank-you pages via extensionless action paths, and the critical pattern for JavaScript frameworks (React, Vue, Astro, Next.js, SvelteKit, Remix, Nuxt, TanStack Start): creating a static HTML skeleton file (e.g. public/__forms.html) containing a hidden copy of each form with matching field names so build-time detection succeeds. It explains AJAX submissions must be x-www-form-urlencoded or multipart/form-data (never JSON), the SSR gotcha of targeting the skeleton path instead of '/', spam filtering via automatic Akismet plus honeypot fields and reCAPTCHA, and secure use of your own reCAPTCHA keys through Netlify environment variables (SITE_RECAPTCHA_KEY and SITE_RECAPTCHA_SECRET) kept server-side rather than hardcoded. It also references file uploads, notifications, and the submissions API.
Target users are frontend and full-stack developers deploying static or framework-based sites on Netlify who need contact, feedback, lead-capture, newsletter, or file-upload forms. Typical use cases include wiring an AJAX contact form, adding spam protection, getting forms detected in an SSR framework, and debugging submissions that appear to succeed but never show up in the Forms UI.
FAQ
Why aren't my forms being detected?
Netlify scans prerendered HTML at deploy time. Forms rendered only by JavaScript/SSR are invisible to the parser; you must add a static skeleton HTML file (e.g. public/__forms.html) with a hidden copy of each form and matching field names, then redeploy.
Why do my AJAX submissions succeed but never appear?
Netlify Forms does not accept JSON. Send application/x-www-form-urlencoded (via URLSearchParams) or multipart/form-data. In SSR apps, the fetch must target the skeleton file path (e.g. /__forms.html), not '/', which the SSR catch-all intercepts.
How does spam filtering work?
Akismet runs automatically; you can add a honeypot field (netlify-honeypot) and reCAPTCHA. Flagged submissions move silently to a separate Spam list in the Forms UI.
How are reCAPTCHA credentials handled securely?
By default Netlify provisions reCAPTCHA for you. To use your own keys, set SITE_RECAPTCHA_KEY and SITE_RECAPTCHA_SECRET as Netlify environment variables so the secret stays server-side and is never hardcoded in client code.
Does enabling form detection affect existing deploys?
No. Detection only affects future deploys, so after enabling it you must trigger a new build before an already-published form starts collecting submissions.
Install netlify-forms
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
netlify/context-and-tools