Add a Contact Form to a React App with Netlify Forms – SitePoint

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 also integrate with Neltify Forms.
Let’s start by creating and setting up a new React app.
Create and set up React
Type the following command in your terminal to create a new React app:
$ npx create-react-app netlify_forms_app

Here our app’s name is netlify_forms_app, but you can give it any name you wish as long as it’s not a restricted npm name. After the installation is complete, change into the newly created directory, then start the app with the npm start command in your terminal.
Let’s clean up (optional) our app a little bit. In the src directory of the app, delete the following files:
App.test.js
logo.svg
setupTests.js
We deleted these files because they aren’t relevant to us in our build. We can also delete the reportWebVitals file. Doing that requires that we also remove the import statement and the function call of reportWebVitals from the index.js file for our React app to compile successfully. Again, this is all optional, so you can just skip this if you prefer.
Now, clean up the App.js file so that it looks like this:

import ‘./App.css’;

function App() {
return (

);
}

export default App;

Creating a contact form component
In the src directory of our React app, create a Form.js file and add the following lines of code to it:

import ‘./form.css’

export default function Form() {
return (

)
}

Here, we have a stateless React form. Now, go to the App.js file in the src directory and render the form. The App.js file should look like this:
import ‘./App.css’;
import Form from ‘./Form’

function App() {
return (


);
}
export default App;

Styling the form component with plain CSS
In the src directory, create a form.css file and add the following style:
// src/form.css
.contactForm{
padding: 10px;
width: 90%;
max-width: 400px;
margin: 30px auto;
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 20px;
}
.contactForm input, button, textarea{
height: 50px;
padding-left: 5px;
font-size: 18px;
}
.contactForm textarea{
height: 100px;
}

There’s no need to write any fancy CSS, but you can add some tweaks if you wish. With the styles we’ve added, our HTML form now looks like the image below.

To see the result, you’ll need to change into the netlify_forms_app folder and start the server:
cd netlify_forms_app
npm start

A browser will open up and you can view the result at http://localhost:3000.

A perfect example of a stateless React form is the one we created earlier. In this form, our input values aren’t controlled by the state. In this section, we’ll learn how to add a contact form to a stateless React app with Netlify Forms.
Adding a static HTML version of the form
The first step to enabling our form to work with Netlify Forms is to add a static HTML version of our form to the index.html file in the public directory of our React app. Why do we need to add this form? Adding this HTML form will help Netlify detect our JSX form, since the post-process bots can only parse HTML.
For this example, we’ll add this HTML form right after the opening the tag in our index.html file:




There are two attributes to note in this form: name and netlify. The name attribute will enable Netlify to connect with our JSX form, while the netlify attribute will enable Nelify’s bot to be able to parse our form. We also used the hidden attribute to hide the form from our users. There’s no need to add labels or a submit button to this form, since it’s hidden from our site.
Add a hidden input element to the JSX form
In the Form.js file in the src directory, add a hidden input element with the name attribute set to form-name and the value attribute equal to the name of the HTML version of our form. These attributes are required to make our form work with Netlify Forms:

The final version of our form now looks like this:


There’s one more step required for this form to start working: deploying our React app to Netlify. We’ll cover this in the next section.
Deploying to Netlify
We can deploy our site to Netlify using a version control system like GitHub, or we can use the drag-and-drop method, which requires us to transfer the build file created from running the npm run build command to Netlify drag and drop page. Both methods of deployment will be covered in the following sections, but for this tutorial, we’re going to use GitHub for deployment.
Deploy with GitHub
Deploying our React app from GitHub will set us up for continuous deployment, meaning changes made to our repository will automatically trigger re-deployment of our site, which is an advantage over using the drag-and-drop method.
To be able to deploy from GitHub, we have to first make our React app available on it. Go over to GitHub and create a new repository.

For this tutorial, we’ll name the repository “NelifyForms”. Now at the bottom of the page, click the Create Repository button and we’ll be redirected to the newly created repository page.

Right now, this repository is empty. That’s because we haven’t pushed our React app to it. To do that, enter the following commands in the terminal:
$ git add *
$ git commit -m ‘netlify forms with stateless form’
$ git remote add origin
$ git push -u origin master

These commands will create a new commit, connect us to our GitHub repository, and finally push our React app over to it.
Make sure to replace with the URL of the newly created GitHub repository. Here’s an image that shows where to find the URL of the newly created repository.

After running the above git commands, refresh the browser. You’ll find that our React app has been pushed to GitHub.

Now that our React app is available on GitHub, it’s time that we deployed it on Netlify. Log in to your Netlify account, go over to the dashboard, and click on the New site from Git button. We’ll be taken to the Create a new site page.

Click on the GitHub button under the Continuous Deployment section. We’re then redirected to an authorization page where Netlify will ask for access to GitHub. After giving Netlify access, we’ll see a page like the one shown below.

Right now, the NetlifyForms repository we created earlier is not displaying among the list of repositories, because we haven’t configured Netlify to access it yet.
To do that, click on the Configure the Netlify app on GitHub link at the bottom of the page. We’ll see a page like the one shown below.

Scroll to the bottom of the page under the Repositories access section and click on the Select repositories button. We’ll see a list of our GitHub repositories.

Select the NelifyForms repository and then click on save to give Netlify access to this repository. After saving it, we’ll be redirected to the Create a new site page on Netlify.

Our NetlifyForms repository is now displayed in the list. Click on it and we’ll see a page like this.

On this page, we can set the build and deployment options for our site, like changing the Git branch to deploy from, or the command to be used to deploy our site. But there will be no need for that, because everything looks good by default.
Finally, to deploy our site to Netlify, scroll to the bottom of the page and click on the Deploy site button. The deployment might take a while, but once it’s done we’ll see a link to our site at the top right corner of the site dashboard page.

With this, our React app has been successfully deployed to Netlify from GitHub. When we click on the link, we’ll see the React form we built.

Deploy using drag and drop
Deploying with this method is simpler, but the drawback is that our site won’t be set up for continuous deployment. We can set this up manually after deployment if our React app is available on either GitHub, GitLab, or Bitbucket.
To use the drag-and-drop method we have to first build our React app. Open the terminal and navigate to the directory where our React app is, then type in the following command:
$ npm run build

Once the build is done, there should be a new folder named build present in the root directory of the React app. Our directory structure will now look like this:
> build
> node_modules
> public
> src

What’s left now is to drag and drop this folder to Netlify’s drag and drop page.

We can do that by navigating to the location of our React app in our systems file explorer, then drag and drop the build folder to Netlify’s drag and drop page.
Here’s a GIF that illustrates just that.

Once we’ve drag and dropped the build folder to Netlify, it will be uploaded and deployed. Then we’ll be redirected to our site’s dashboard page. The URL to the deployed site is located at the top right corner of the page.

Click on that URL and you’ll see the contact form we built. Fill in the form and hit the Submit button. You will be redirected to a Thank you confirmation page.

Cool! We’ve successfully made our stateless React form work with Netlify Forms. Now every form submission made through our app is handled by Netlify Forms.
Right now, we aren’t receiving any notifications via email when a new form is submitted, because we haven’t set the email address form submissions will be sent to. We’ll cover that shortly.
Managing contact form submissions
Not only does Netlify make adding a contact form simple, but it also includes features where submissions made through our contact form can be deleted, marked as spam, or downloaded. There’s also room to integrate our form with Netlify’s serverless functions. You can read about it here.
To access the submission management page, go over to the earlier deployed site dashboard page on Netlify and click on the Form link in the navigation bar.

After clicking on the Form link, you’ll be redirected to the form dashboard page.

Click on contactForm under the Active forms section to view the management page of submissions made through our contact form.
Adding Notification and Custom Confirmation Pages
In this section, we’ll cover how to add a notification feature that will enable us to receive email notifications for new form submissions. We’ll also cover how to customize the Thank you confirmation page that shows up after the form has been successfully submitted.
Receiving notifications via email
In the dashboard of our site, navigate to Site settings > Forms > Form notifications. Then click on the Add notification button. A menu will pop up.

Netlify gives us three options on how we can receive notifications. In this tutorial, we’re going to use the email notification.
Click on Email notification and fill out the form that appears.

The field we’re more concerned with is the Email to notify field. Make sure to input the email address you’d like to receive email notifications on.
Now when we open our deployed site URL and make a new form submission, we should receive an email notification.
Customizing the confirmation page
To customize the confirmation page, the first step is to add an action attribute to the form element of the index.html file in the public directory:
// public/index.htmm

)
}
}

The next step is to create a method that will be responsible for posting form submissions. To do that, we have to first add an onSubmit event listener to the form:


Now, let’s create the handleSubmit method, which will post new form submissions to Netlify Forms.
Add the following code after the handleChange method in the Form component:


handleSubmit = e => {
fetch(“https://www.sitepoint.com/”, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/x-www-form-urlencoded’ },
body: encode({ ‘form-name’: ‘contactForm’, …this.state })
})
.then(() => alert(‘Success!’))
.catch(error => alert(error))
e.preventDefault()
}

Notice that, in the body of the request, we used an encode function. We’ll create it shortly. This function encodes special characters (?, =, /, &) in the form before posting it.
Finally, add the following lines of code before the Form component:

const encode = (data) => {
return Object.keys(data)
.map(key => encodeURIComponent(key) + ‘=’ + encodeURIComponent(data[key])).join(‘&’);
}

Our Form.js file should now look like this:

import ‘./form.css’
import {Component} from ‘react’

const encode = (data) => {
return Object.keys(data)
.map(key => encodeURIComponent(key) + ‘=’ + encodeURIComponent(data[key])).join(‘&’);
}

export default class Form extends Component{
constructor(props){
super(props)
this.state = { name: ”, email: ”, message: ” }
}

handleChange = e =>
this.setState({ [e.target.name]: e.target.value })

handleSubmit = e => {
fetch(“https://www.sitepoint.com/”, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/x-www-form-urlencoded’ },
body: encode({ ‘form-name’: ‘contactForm’, …this.state })
})
.then(() => alert(‘Success!’))
.catch(error => alert(error))
e.preventDefault()
}

render() {
const { name, email, message } = this.state
return (



)
}
}

This form will only work properly if we’ve deployed and set up email notifications for it. This was covered in previous sections.
Form handling with React hooks
The React hook we’re going to use in this section is the useState hook. The useState hook will let us add state to a functional component.
To use the useState hook in the Form component we created earlier, we first need to import the useState hook, then transform the class-based Form component into a functional component.
The Form.js file should look like this:

import ‘./form.css’
import {useState} from ‘react’

const encode = (data) => {
return Object.keys(data)
.map(key => encodeURIComponent(key) + ‘=’ + encodeURIComponent(data[key])).join(‘&’);
}

export default function Form (){
const [state, setState] = useState({name: ”, email: ”, message: ” })

const handleChange = e =>
setState({…state, [e.target.name]: e.target.value })

const handleSubmit = e => {
fetch(“https://www.sitepoint.com/”, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/x-www-form-urlencoded’ },
body: encode({ ‘form-name’: ‘contactForm’, …state })
})
.then(() => alert(‘Success!’))
.catch(error => alert(error))
e.preventDefault()
}

return (



)
}

Now, deploy and set up email notifications for the contact form to start working.
Conclusion
I hope you’ve found this simple contact form tutorial useful. I hope you’ll agree that Netlify offers a viable option for adding a contact form to your React app — one that saves you time and saves you having to deal with server-side coding. Feel free to get in touch on Twitter if you have any questions.
Troubleshooting tips
If you run into any problems while working with forms in Netlify, head over to Netlify’s handy Troubleshooting tips.
References

Coded at

Share your love

2 Comments

  1. With the development of the online casino, people do not need
    to fly or drive to a faraway casino to play their favored games.
    Changing times and fresh innovations resulted in the growth and popularity of the internet casinos nowadays.

    Considering the current situation, the online casino
    has become the most entertaining and enticing way to
    take a look at numerous popular casino games under one roof.
    Gone are those days when you needed to plan for a holiday or vacation to
    travel to a location like New Jersey or Las Vegas famous for offering
    the delight of actual casinos. However, it is clear that while planning a holiday, you needed to put aside your
    official commitments. It is more probable that traveling
    regularly leaving behind all your homework might not be possible always.
    The introduction of the internet casino or
    more broadly the online casino eliminates a lot of hassles
    for its players making it far more simple for them to
    reach out their favourite sport at any moment
    and at any location. Additionally, you don’t need to travel all of the way to any physical casino to play with your casino
    game. Having a computer with internet connectivity can put an end to all these problems.
    Casino online gives you access to plenty of gambling websites on the internet.

    If you are 21 (the considered legal age of gambling) then you’re all set to start
    with the online casino games. You ought to be aware that playing at any online casino
    site brings about a lot of advantages for the players. Having a look on the
    major advantages of the online casinos will help you to be aware of the reason why this
    means of gambling has grown so popular. Why is it the most preferred alternative for many casino players globally?
    Well, in the following lines you will come across the most frequent advantages
    that online gambling brings you forward. Among the main features of
    casino online that makes most gaming fans to turn into gambling online is that the internet forms to
    be the most suitable medium nowadays. The online casino forms to be an essential way allowing more and more gamers to gamble with simplicity from their particular residence.
    Till you are on the internet, you can play your favorite casino games 24×7.
    You simply need to go into a website and get started with your preferred casino games.

  2. you’re actually a good webmaster. The site loading pace is incredible.
    It kind of feels that you’re doing any unique trick. Also, The contents are masterpiece.
    you’ve performed a fantastic process in this matter!

Leave a Reply