How to add contact forms to a static site with Netlify Forms

Introduction

One of the biggest challenges when building a static site is handling forms. You might have a simple contact page, a newsletter signup, or a feedback form, but suddenly you are thinking about servers, APIs, and databases.

This is where Netlify Forms really shines.

Netlify Forms lets you collect form submissions from a static site without writing any backend code. You write plain HTML, deploy your site to Netlify, and submissions start showing up in the Netlify dashboard.

In this guide, you'll learn how Netlify Forms work, how to add a form to a static site, and how to avoid the most common mistakes.

What are Netlify Forms

Netlify Forms is a built-in feature of Netlify that detects HTML forms at build time.

When Netlify sees a form in your site's HTML, it automatically:

Creates a form endpoint
Stores submissions securely
Lets you view submissions in the Netlify dashboard
Optionally sends email notifications

All of this works without JavaScript, APIs, or servers.

What you need before you start

To use Netlify Forms, you need:

A static site deployed on Netlify
An HTML form (or a framework that outputs HTML)
A deploy that goes through Netlify's build system

Forms will not work if you only open an HTML file locally or host it somewhere else.

The simplest Netlify form

Here is the smallest possible form that works with Netlify Forms.

<form name="contact" method="POST" data-netlify="true">
  <input type="hidden" name="form-name" value="contact" />

  <label>
    Your name
    <input type="text" name="name" required />
  </label>

  <label>
    Your email
    <input type="email" name="email" required />
  </label>

  <label>
    Message
    <textarea name="message"></textarea>
  </label>

  <button type="submit">Send</button>
</form>

That's it. There is no JavaScript and no backend.

Once this is deployed to Netlify, submissions will start appearing automatically.

Why the hidden input is important

This line is critical:

<input type="hidden" name="form-name" value="contact" />

Netlify uses it to identify the form at build time.

The value must exactly match the name attribute of the <form> element. If they don't match, Netlify will not register the form.

This is one of the most common reasons Netlify Forms don't work.

Viewing form submissions in Netlify

After your site is deployed and the form is detected:

Open your site in the Netlify dashboard
Go to Forms
Click on your form name

You'll see all submissions, along with timestamps and submitted values.

You can also export submissions as CSV if needed.

Adding a success page or redirect

By default, Netlify reloads the page after a form submission.

You can redirect users to a thank-you page by adding an action attribute.

<form
  name="contact"
  method="POST"
  data-netlify="true"
  action="/thanks"
>

Just make sure /thanks exists in your site.

This improves user experience and confirms that the submission worked.

Using Netlify Forms with JavaScript frameworks

Netlify Forms works with frameworks like React, Astro, Next.js, and others, as long as the final output is static HTML.

The key rule is simple:

Netlify must be able to see the form in the built HTML.

If your form is generated dynamically only on the client, Netlify will not detect it.

For React or similar frameworks, this usually means:

The form exists in the rendered HTML
You include the hidden form-name input
You don't rely only on client-side submission

Handling spam with honeypots

Netlify Forms includes built-in spam protection using honeypot fields.

A honeypot is a hidden field that real users never fill out, but bots often do.

Here's how to add one:

<form
  name="contact"
  method="POST"
  data-netlify="true"
  netlify-honeypot="bot-field"
>
  <input type="hidden" name="form-name" value="contact" />

  <p hidden>
    <label>
      Don't fill this out
      <input name="bot-field" />
    </label>
  </p>

  <!-- real fields here -->
</form>

If the honeypot field is filled, Netlify silently discards the submission.

Email notifications for submissions

You can configure email notifications directly from the Netlify dashboard.

This allows you to:

Get notified when someone submits a form
Forward submissions to an email address
Integrate with tools like Zapier or Slack

This is useful for contact forms and small sites that don't need a full CRM.

Common Netlify Forms problems

A few issues come up frequently.

Form not showing up in the dashboard

This usually means Netlify did not detect the form during build.

Check that:

The form exists in the built HTML
The data-netlify="true" attribute is present
The hidden form-name input matches the form name

Forms work locally but not on Netlify

Netlify Forms only work after deployment. Testing locally will not submit data to Netlify.

Always test using the live Netlify URL.

JavaScript-only submissions not working

If you intercept the submit event and use fetch without proper configuration, Netlify might not catch the submission.

For beginners, stick to standard HTML form submission first.

Conclusion

Netlify Forms is one of the most powerful features for static sites. It removes the need for backend code while still giving you reliable form handling, spam protection, and notifications.

If you're building a static site on Netlify and need a contact form, this should be your first choice. It's simple, reliable, and designed to work out of the box.