---
title: "How to Integrate Netlify’s Form Handling in a React App | Netlify"
description: "Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now!"
source: "https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/"
last_updated: "2026-07-14T02:46:05.000Z"
---
Netlify comes with some handy, built-in features to process form submissions without having to write any server-side code. Form handling was historically a paid feature but, with the new super-powered free tier, it is now available for all sites for free. 🎉
If your site includes an HTML form, you can add a `netlify` (or `data-netlify="true"`) attribute to the form tag and start receiving submissions right away (learn more in the [form handling docs](https://docs.netlify.com/forms/setup/).
In a React app, however, just adding a `netlify` attribute to a JSX form won’t work \[sad trombone\]. _Note: If you are using a static site generator like Gatsby or React-Static, it will work but requires a `form-name` field, so [skip to the Static Site Generator section](#form-handling-with-static-site-generators) below for examples._
The post-processing bots that look for the `netlify` attributes when a site is deployed only know how to parse HTML. Until they evolve enough to detect forms rendered with JavaScript, we need to give them a little extra help.
## Form Handling with a Stateless React Form
For simplicity’s sake, we’ll use [React’s single file example](https://facebook.github.io/react/downloads/single-file-example.html) as starting point for our very basic React contact form.
```
Contact
```
You will not want to use this setup for your production app, but the steps for integrating form handling are the same for any React app you host on Netlify.
**1\. Add a static HTML version of the form to your site**
In any HTML file in your site folder, include an HTML form with the `netlify` attribute and the input fields you want Netlify to process.
For this example, we’ll just add it right after the opening `` tag in our index HTML file.
```
```
Besides the `netlify` attribute, we’ve also added a `netlify-honeypot` attribute to avoid showing a captcha when a user submits the form.
Note that form labels are optional here since the HTML form is hidden and our site visitors won’t interact with it directly.
**2\. Add a hidden `form-name` field to your JSX form**
In the JSX form, include an ``.
Our example HTML form name is `contact`, so we’ll add:
```
```
Our final example now looks as follows:
```
Contact
```
To see it in action, you can [download the example zip file](https://github.com/imorente/netlify-form-handling-integration/archive/react-form-example.zip) and drag & drop it onto your [Netlify dashboard](https://app.netlify.com) to deploy it.
## Form Handling with Static Site Generators
**If you’re using a static site generator** like [Gatsby](https://www.gatsbyjs.org) or [React-Static](https://react-static.js.org), or tools like [react-snapshot](https://www.npmjs.com/package/react-snapshot) that generate a static snapshot of your site, the build tool will generate the static HTML form automatically for you. That means you can skip [step 1](#step-1) and add the `netlify` attributes to your JSX form instead.
Gatsby strips out input fields that are not included in the JSX form, so you will still need to add the `form-name` hidden input field as described in [step 2](#step-2).
```
```
To see an example of a basic contact page using Gatsby, you can [check out our demo here](https://gatsby-netlify-form-example-v2.netlify.com/) and [view code on GitHub](https://github.com/sw-yx/gatsby-netlify-form-example-v2), or use the quick [deploy to Netlify](https://app.netlify.com/start/deploy?repository=https://github.com/sw-yx/gatsby-netlify-form-example-v2) option to get your own copy.
## Form Handling with a Stateful React Form
Let’s replace the JSX form in the previous example with a stateful React component.
The juicy bit is the `handleSubmit` function in the `ContactForm` component.
```
```
Like before, you can [download the zip file](https://github.com/imorente/netlify-form-handling-integration/archive/stateful-react-form-example.zip) with this example and drop it onto your [Netlify dashboard](https://app.netlify.com) to deploy it.
## Troubleshooting tips
1. **The form isn’t listed in the Forms section of the Netlify dashboard.** The most likely cause is that the Netlify bots haven’t found a static HTML version of the form. Make sure somewhere in your site folder there’s an HTML form with the right `name`, and a `netlify` or `data-netlify` attribute. If you’re using Gatsby, or any other static site generator, try browsing your site with JavaScript disabled – if you can’t see the form in the source code, the Netlify bots probably won’t either.
2. **The form is listed in the Forms section but there are no submissions.** Make sure the POST request includes the `form-name` parameter with the correct name of the form.
3. **There are submissions but they are blank.** Make sure the input fields in the HTML version of the form have a `name` attribute, and the parameters sent in the POST request have the same names as the input fields in the HTML form.
## Key take-aways
1. **In any HTML file** in your site folder, add an HTML form with the `netlify` attribute and the input fields you want Netlify to process.
2. **In the JavaScript form**, add a hidden field called `form-name` with the name of the HTML form. Alternatively, if you’re using AJAX to submit the form, send a POST request to any path on your site. The request should include the header `"Content-Type": "application/x-www-form-urlencoded"`, and the `form-name` attribute in the body. Make sure the attributes in the request body are URL-encoded to match the content-type.
3. Happy form handling!
### Share
- [X (fka Twitter)](https://twitter.com/intent/tweet?text=How to Integrate Netlify’s Form Handling in a React App&url=https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app//)
- [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2017%2F07%2F20%2Fhow-to-integrate-netlifys-form-handling-in-a-react-app%2F%2F)
- [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app//)
- [Bluesky](https://bsky.app/intent/compose?text=How to Integrate Netlify’s Form Handling in a React App+https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app//)
* * *
### Tags
- [popular](/blog/tags/popular/)
- [React](/blog/tags/react/)
- [Forms](/blog/tags/forms/)
- [Tutorial](/blog/tags/tutorial/)
## Keep reading
Guides & Tutorials May 15, 2026
[
### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend)
](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend)
- 
Nahrin Jalal
Guides & Tutorials May 15, 2026
[
### Tracking AI search traffic: how to use Netlify Log Drains to maximize AEO
](/blog/tracking-ai-search-traffic)
- 
Nahrin Jalal
## Recent posts
News & Announcements July 13, 2026
[
### Netlify inside of Claude Design
](/blog/netlify-inside-of-claude-design)
- 
Sean Roberts
News & Announcements June 25, 2026
[
### Netlify Functions, designed for Agent Experience
](/blog/netlify-functions-designed-for-agent-experience)
- 
Eduardo Bouças
News & Announcements June 24, 2026
[
### How we measure Netlify’s Agent Experience
](/blog/how-we-measure-netlify-agent-experience)
- 
Sean Roberts
### How do the best dev and marketing teams work together?
[Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)