Netlify Forms

What Is This?

Overview

Netlify Forms is a built-in feature of the Netlify platform that enables developers to collect HTML form submissions without writing or maintaining any server-side code. By adding a single attribute to an HTML form element, Netlify automatically detects the form during the build process and begins capturing submissions. All collected data is stored in the Netlify dashboard, where it can be reviewed, exported, or forwarded to external services.

The feature supports a wide range of form types, including contact forms, feedback forms, file upload forms, and newsletter sign-up forms. It also includes built-in spam filtering through a honeypot field mechanism and optional reCAPTCHA integration. Submissions can trigger email notifications or webhook calls, making it straightforward to connect form data to other tools in a workflow.

Netlify Forms requires no external database, no API keys for basic usage, and no backend infrastructure. Detection happens at build time, so the form must be present in the static HTML output that Netlify processes during deployment.

Who Should Use This

• Frontend developers who want to add form handling to static sites without building a backend
• Jamstack developers working with site generators like Gatsby, Next.js, Hugo, or Eleventy
• Designers and no-code builders who need a simple way to collect user input on deployed sites
• Small business owners or freelancers managing client sites on Netlify who need contact form functionality
• Developers prototyping products who want form collection working quickly without infrastructure setup
• Teams that need to forward form submissions to tools like Slack, Zapier, or email without custom integrations

Why Use Netlify Forms?

Problems It Solves

• Eliminates the need to provision and maintain a server or database just to collect form data
• Removes the complexity of writing form-handling API routes, validation logic, and storage code
• Provides built-in spam protection so developers do not need to integrate third-party CAPTCHA services manually
• Simplifies file upload handling, which typically requires cloud storage configuration and signed URL management
• Reduces time to deployment for sites that need basic data collection as part of a launch checklist

Core Highlights

• Activated with a single data-netlify="true" attribute on any HTML form
• Submissions are stored in the Netlify dashboard under the Forms section
• Supports file uploads with the netlify attribute and enctype="multipart/form-data"
• Built-in honeypot spam filtering with the netlify-honeypot attribute
• Optional reCAPTCHA v2 integration for stronger spam protection
• AJAX submission support for custom success and error handling
• Email and webhook notifications configurable per form
• Submissions accessible via the Netlify Submissions API for programmatic retrieval

How to Use Netlify Forms?

Basic Usage

Add data-netlify="true" and a name attribute to your HTML form. The name attribute identifies the form in the Netlify dashboard.

<form name="contact" method="POST" data-netlify="true">
  <input type="text" name="name" placeholder="Your name" required />
  <input type="email" name="email" placeholder="Your email" required />
  <textarea name="message" placeholder="Your message"></textarea>
  <button type="submit">Send</button>
</form>

Specific Scenarios

File Upload Form: Set the encoding type and include a file input field.

<form name="uploads" method="POST" data-netlify="true" enctype="multipart/form-data">
  <input type="text" name="submitter" />
  <input type="file" name="attachment" />
  <button type="submit">Upload</button>
</form>

AJAX Submission: Intercept the submit event and post form data manually to avoid a full page reload.

const form = document.querySelector("form");
form.addEventListener("submit", async (event) => {
  event.preventDefault();
  const data = new FormData(form);
  await fetch("/", { method: "POST", body: data });
  console.log("Form submitted successfully");
});

Real-World Examples

• A portfolio site uses a contact form with data-netlify="true" to receive client inquiries directly to an email address configured in Netlify notifications.
• A SaaS landing page uses AJAX submission to display a custom thank-you message without navigating away from the page.
• A design agency collects client briefs with file attachments using the multipart form configuration.

When to Use Netlify Forms?

Use Cases

• Adding a contact form to a static marketing or portfolio site
• Collecting beta sign-ups or waitlist entries on a product landing page
• Gathering user feedback after a feature release
• Accepting file submissions such as resumes or design assets
• Running simple surveys without a dedicated survey platform
• Capturing newsletter subscriptions before connecting a full email service provider
• Prototyping form flows during early product development

Important Notes

Requirements

• Form detection must be enabled in the Netlify UI under the Forms section of the site settings
• The form must be present in the static HTML output at build time, not injected purely at runtime via JavaScript
• A name attribute is required on the form element for Netlify to identify and store submissions correctly