How to add Netlify Forms on Netlify
Quick Answer
Enable form detection in Netlify dashboard, add data-netlify="true" or netlify attribute to your HTML <form> with method="post" and unique name, 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
1
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.
2
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.
3
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.4
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>form-name input matching the form's name. Use unique <code>name</code> for multiple forms.
5
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.6
Commit and deploy changes
Use Git to commit:
git add .
git commit -m "Add Netlify form with data-netlify attribute"
git push origin main Ensure form HTML is in publish directory at deploy time.
7
Verify form submission
After deploy completes, visit your live site, fill and submit the form. Check for success message (default: "Success!").
8
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.
9
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 <form> has data-netlify="true" or netlify, unique name, and exists in static HTML publish directory. For JS frameworks, add hidden blueprint form with all fields.
Missing POST method
Add method="POST" to <form> tag; GET is not supported.
Disabled submit button
Ensure submit button is not disabled and JS submission triggers properly.
JS-rendered forms not working
Create static hidden HTML form as blueprint with matching field names in publish directory.
Multiple forms not separated
Assign unique name attribute to each form for separate submission queues.
Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Netlify website before purchasing.