In this tutorial, you’ll learn how to add a contact form to a React application with Netlify Forms.
Adding a contact form to a React application might require writing server-side code to handle form submissions, but with Netlify Forms you can take a break from the logic, because it does all that behind-the-scenes work for you when your site is deployed on Netlify.
Prerequisites
To follow along with this tutorial, you should be familiar with React, Git and GitHub. You should also have a Netlify account and have Node installed on your machine. If you need any help getting set up, you can consult our guide on how to install Node using nvm.
What You’ll Learn
By the end of this tutorial, you’ll know how to do the following:
- deploy a React app to Netlify
- integrate Netlify Forms with a stateless form component (a form component that doesn’t use the state)
- integrate Netlify Forms with a stateful form component (a form component that uses the state to handle its data)
The completed guide to this tutorial is available on GitHub.
Introduction to Netlify Forms
Netlify Forms is a feature of Netlify for managing and handling form submissions without having to write any server-side code. By adding a simple attribute to your HTML form tag, you can get up and running with Netlify Forms. Forms can also be submitted asynchronously with JavaScript, making it a great companion to sites powered by Vue, React, and other modern frameworks.
Netlify Forms Pricing
Netlify Forms is free to get started with, but there’s a limit of 100 form submissions per website per month on the free plan, and also some features like background functions and role-based access control are excluded while using the free tier.
To exceed the form submission limit or make the excluded features available, you’ll have to upgrade to a different plan. You can do that on the Netlify pricing page.
Creating a Form for Netlify Forms
Netlify Forms can be integrated with both a stateless form (a form that doesn’t use the state to handle its data) and stateful one (a form that uses the state to handle its data). In this tutorial, we’ll firstly create a stateless form to demonstrate how we can integrate Netlify Forms with it. But later on, we’ll refactor the stateless form into a stateful one, in which we’ll …….
Source: https://www.sitepoint.com/react-app-contact-form-netlify-forms/