How to add Netlify Forms on Netlify

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.

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.

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.

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.

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.

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).

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

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.

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 });