Netlify Forms: how to add a working contact form with no backend code

This page may contain affiliate links from which Blur Studio earns commissions.

Netlify is a platform for hosting and deploying websites, most commonly ones built as static sites or with frameworks like Next.js, Astro or Gatsby, and it's one of the most widely used hosts for exactly this kind of site. Netlify Forms is a specific feature built into that hosting: when Netlify builds your site, it scans the HTML for forms and sets up submission handling for you, with no server code and no third-party form API required.

How Netlify Forms actually works

Most contact forms need somewhere to send their data: a backend server, a database, or a third-party form API you sign up for and wire in with JavaScript. Netlify Forms skips all of that. At deploy time, Netlify's build system parses your site's HTML, finds any form tagged for form handling, and quietly adds a hidden field and the server-side plumbing needed to catch submissions. You never write backend code, and the form works even if the rest of your site is completely static with no JavaScript at all.

Setting it up, step by step

1. Turn on form detection. In your site's Netlify dashboard, go to the Forms section and enable form detection. Netlify will start scanning your next deploy for forms.
2. Add the Netlify attribute to your form tag. Add data-netlify="true" (or the plain netlify attribute) to your existing <form>, and give the form a unique name attribute, like <form name="contact" method="POST" data-netlify="true">. That name is what shows up in your Forms dashboard, so make it something you'll recognize.
3. Keep your normal fields. A name input, an email input, a message textarea and a submit button work exactly as you'd expect, no special markup needed beyond the form tag itself.
4. Deploy. Netlify's build strips the data-netlify attribute and injects a hidden form-name field automatically. From that deploy onward, submissions land in Forms > Submissions in your dashboard.
5. If your form is rendered by JavaScript (React, Vue or a similar framework rather than plain HTML), add a second, hidden static HTML form with matching field names somewhere in your site so Netlify's build can detect it, then submit your real form's data to the same endpoint with a fetch call. This is the one genuinely fiddly part of the setup for JavaScript-heavy sites, and it's the step people most often get wrong on the first try.
6. Set up a notification under Forms > Submission notifications so you actually hear about a new message, either by email or by sending it on to another service over an HTTP request, rather than having to check the dashboard manually.

File uploads work too, with a type="file" input, but submissions carrying a file are capped at 8MB total and a 30-second upload window, with one file accepted per field. For a contact form that's rarely a real limit; it mostly matters if you're building something closer to a job application or document-submission form. How to let customers upload photos on a website request form walks through it.

Notifications in more detail

The default behavior, nothing happening until you remember to check your dashboard, isn't something you want to rely on for a real contact form. Beyond a simple email notification, Netlify's HTTP POST notification option lets you send every submission's data to another service's own webhook URL, which is how people commonly connect a plain Netlify form to something like a Slack channel or a spreadsheet-based tool without writing custom integration code themselves. Setting this up is just pasting the destination URL into the notification settings; the receiving service handles the rest. For most small business contact forms, a simple email notification is genuinely enough, and it's worth starting there before adding a second integration you don't yet have a clear use for. If leads vanish into email, read how to route website leads to where you actually follow up.

Spam control

An open contact form on the public internet attracts spam almost immediately, and Netlify documents three layers you can combine:

• A honeypot field: a hidden input real visitors never see or fill in, but that simple bots fill in automatically, flagging their submission as spam.
• Akismet integration: the same spam-filtering service many WordPress sites use, applied to your form submissions.
• reCAPTCHA 2: Google's "I'm not a robot" challenge, for forms that keep getting through the lighter filters.

Start with the honeypot field. It's the least intrusive for real visitors, costs nothing extra, and catches the bulk of low-effort spam bots on its own. Add reCAPTCHA only if you're still seeing real spam getting through, since it adds friction for genuine visitors. For more, see how to stop spam bots flooding your website contact form.

Limits, and when to look elsewhere

On Netlify's current credit-based plans (Free at $0 a month, Personal at $9, Pro at $20, and custom-priced Enterprise, all confirmed live on netlify.com/pricing as of October 2026), Forms submissions themselves are free and unlimited. That's a real change from how Netlify used to price Forms, where submissions were metered and could push a site into a higher billing tier once you crossed a threshold. If you're reading an older guide that talks about a monthly submission cap, it's describing that legacy pricing structure, not the current one.

Where Netlify Forms genuinely isn't the right tool: if you need submissions to trigger complex logic (updating a CRM record, running a multi-step approval workflow, sending different emails based on form answers), you'll eventually want a Netlify Function wired to your form's notification webhook, or a dedicated form tool built for that kind of branching. A plain contact form, a simple newsletter signup, or a basic quote-request form is exactly what Netlify Forms is built for; anything with real business logic behind it usually outgrows it.

A worked example: a basic contact form

Here's roughly what a working setup looks like in practice: a name field, an email field, a message textarea, the data-netlify="true" attribute, and a honeypot field for spam. Once that's deployed and form detection is on, every submission appears in your dashboard within seconds, and (with a notification set up) an email lands in your inbox at the same time. There's no database to manage, no uptime to worry about for the form specifically, and no monthly fee tied to how many people fill it in. For a small business site, this covers the large majority of "I just need people to be able to contact me" use cases without hiring anyone. A fuller version is in how to add a free quote request form to your website.

If you're setting this up for the first time, getting started with Netlify and deploying any static site first gives you a working project to add the form to, rather than trying to set up Forms before you have a site live at all.

How I'd approach this

For a straightforward contact form, Netlify Forms is genuinely the fastest and cheapest path there is, and I'd point almost any small business owner here rather than building a custom backend for something this simple. Where I get pulled in is usually a step past this: when a form submission needs to actually do something, create a record, trigger a follow-up sequence, check availability against a calendar, rather than just land in an inbox. That's the point where a plain form stops being enough and it's worth talking through what the form is actually supposed to accomplish for your business, not just collect.