How to add Netlify Forms on Netlify

beginner 7 min read Updated 2026-03-13

Quick Answer

Enable form detection in Netlify dashboard, add <code>data-netlify="true"</code> or <code>netlify</code> attribute to your HTML <code><form></code> with <code>method="post"</code> and unique <code>name</code>, then deploy. Netlify detects and handles submissions automatically. View data in Forms tab.

Prerequisites

Netlify account and deployed site
Basic HTML knowledge
Git for deployment
Code editor

Step-by-Step Instructions

Log in and select your site

Log in to your Netlify account and select your site. Navigate to the Netlify UI dashboard for the specific site where you want to add forms.

Enable form detection

In the site dashboard, click Forms in the left sidebar navigation, then select Enable form detection. This starts scanning deploys for forms on the next deploy; it is required for Netlify to handle submissions automatically.

Form detection parses static HTML at deploy time, not client-side rendered forms.

Add HTML form to your code

In your code editor, create or edit an HTML <form> element with method="post" and a unique name attribute (e.g., name="Contact Form"). Include input fields like <input type="text" name="name">, <input type="email" name="email">, and <textarea name="comments"></textarea>, each with matching name attributes for data capture.

Add Netlify attribute to form

Insert either data-netlify="true" or netlify (shorthand) into the <form> tag. Example:

<form method="post" name="Contact Form" data-netlify="true">
  <input type="text" name="name">
  <input type="submit">
</form>

Netlify strips this attribute during build and injects a hidden form-name input matching the form's name.

Use unique <code>name</code> for multiple forms.

Set custom success page (optional)

Add an action attribute with a relative path to your success page (e.g., action="/success"). Without it, default behavior shows Netlify's thank-you page.

Commit and deploy changes

Use Git to commit:

git add .
git commit -m "Add Netlify form with data-netlify attribute"
git push origin main

This triggers a production deploy on Netlify (automatic if connected to Git).

Ensure form HTML is in publish directory at deploy time.

Verify form submission

After deploy completes, visit your live site, fill and submit the form. Check for success message (default: "Success!").

View submissions in dashboard

Return to Forms tab > Active forms list, select your form (named by name attribute, e.g., "Contact Form"). Submissions appear listed with fields like name/email auto-detected; data shows in a table.

Avoid sensitive data; review manually.

Handle AJAX/JS forms (optional)

For JavaScript submission, include a hidden static form with data-netlify="true" matching fields. Then POST FormData with form-name matching the form name. Example JS:

const formData = new FormData();
formData.append('form-name', 'Contact Form');
// Append other fields
fetch('/', { method: 'POST', body: formData });

Hidden blueprint form required for JS frameworks like React or Next.js.

Common Issues & Troubleshooting

Form not detected at deploy time

Ensure <code><form></code> has <code>data-netlify="true"</code> or <code>netlify</code>, unique <code>name</code>, and exists in static HTML publish directory. For JS frameworks, add hidden blueprint form with all fields.

Missing POST method

Add <code>method="POST"</code> to <code><form></code> tag; GET is not supported.

Disabled submit button

Ensure submit button is not <code>disabled</code> and JS submission triggers properly.

JS-rendered forms not working

Create static hidden HTML form as blueprint with matching field <code>name</code>s in publish directory.

Multiple forms not separated

Assign unique <code>name</code> attribute to each form for separate submission queues.

Visit Netlify View Netlify Pricing