skills.vishalvoidskills/vishalvoid
Technical & DevelopmentIntermediate

netlify-forms

HTML form handling with spam filtering

Developer Setup

Setup & Installation

bash
npx skills add https://github.com/netlify/context-and-tools --skill netlify-forms

Overview

What This Skill Does

Netlify Forms collects HTML form submissions without any server-side code. Add a `data-netlify="true"` attribute to a form and Netlify handles storage, spam filtering, notifications, and API access to submissions. Works with static HTML and JavaScript frameworks via a static skeleton file.

Application

When to use this Skill

Documentation

Show Skills.md file

Netlify Forms

Netlify Forms collects HTML form submissions without server-side code. Form detection must be enabled in the Netlify UI (Forms section).

Basic Setup

Add data-netlify="true" and a unique name to the form:

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

Netlify's build system detects the form and injects a hidden form-name input automatically. For a custom success page, add action="/thank-you" to the form tag. Use paths without .html extension — Netlify serves thank-you.html at /thank-you by default, and the .html path returns 404.

JavaScript-Rendered Forms (React, Vue, SSR Frameworks)

For forms rendered by JavaScript frameworks (React, Vue, TanStack Start, Next.js, SvelteKit, Remix, Nuxt), Netlify's build parser cannot detect the form in static HTML. You MUST create a static HTML skeleton file for build-time form detection:

Create a static HTML file in public/ (e.g. public/__forms.html) containing a hidden copy of each form:

Lines 1 - 25 of 167

Recommendations

Explore other random skills

All skillsMy patterns