Netlify contact form + React

Published in

Nerd For Tech

7 min readMay 20, 2021

Introduction

In this tutorial I want to show you how to make a contact form with react and netlify. Very useful for a portfolio if you don’t want to get so complicated and save some time and money.

Setup

The first thing we will do is create our project, i will use yarn as a package manager but it works very similar with npm.

yarn create react-app netlify-contact-form

Once the dependencies creation and installation process is finished, the project structure should look like this:

The next thing you will do is go to the src folder:

cd src/

Delete App.css, App.test.js, index.css, logo.svg, reportWebVitals.js, setupTests.js:

rm App.css App.test.js index.css logo.svg reportWebVitals.js setupTests.js

note: We will remove them because their use is outside the scope of this tutorial and will make browsing through our files faster.

Material UI

We will use material ui to add some styles to our form and learn a little about it along the way. We are also going to install your icons.

yarn add @material-ui/core @material-ui/icons

Now our package.json will look like this:

{
  "name": "netlify-contact-form",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Layout

Once the initial configuration is done it is time to get our hands dirty, the first thing we are going to do is create the components folder and access it:

mkdir components && cd components

Now we will create our layout component:

mkdir layout && touch layout/index.js

Once created, we open the index.js file inside the layout directory and we will start by importing the dependencies that we will use.

1. React: We import react

2. makeStyles: helps us create a hook with which we can inject styles to our components through className.

3. ThemeProvider: Provide a theme created by us, in this way we can customize a little material UI.

4. createMuiTheme: It allows us to create our theme, which we will go through later with ThemeProvider.

5. CssBaseline: Normalize default browser styles.

6. Container: It allows us to keep our content centered and gives a more uniform appearance.

7. Typography: Component that helps us to format text.

8. { ReactComponent as Logo }: It is the way CRA allows us to import svg graphics.

9. GithubIcon: Gitub icon that will point to the repository of this project in case you want to see it a little more in depth.

10. Link: This component allows us to go to another address, it works like the <a> tag.

Throughout this tutorial I will use some of the components already mentioned as well as others, you can see how each of them are used in the official Material UI documentation and how I apply them in the project’s Repository.

Now we will modify the default Material UI theme a bit, we will modify the primary and secondary color to be more original ;)

We will create some classes that we will pass to our components to apply some styles to them.

In this way we can create our layout component that will serve as a container for our App.

Description

Now we will create the description component:

mkdir description && touch description/index.js

Once the component is created, we are going to open the index.js file inside the description directory and we will leave it similar to this:

Contact Form

This is the most important part of our tutorial since some elements are key so that our form works with netlify correctly.

mkdir contact-form && touch contact-form/index.js

Now we open the index.js file found in the contact-form directory that we just created and start importing dependencies.

useReducer

With this hook similar to useState, we are going to handle both the values of our form and their validation.

Others

The other dependencies are part of Material UI, some of them have already been explained previously, if you have any questions please refer to their official documentation.

Initial values

useReducer needs initial values and is nothing more than a flat object composed of the values of our form, we will use two, one to store the values of the inputs and another very similar to handle the validation.

Reducer

It is a reducing function that takes the current state of our form values and the next one, thus returning only the one that changed.

with the above in place we can initialize useReducer:

onChange

This function allows us to handle the onChange event of our inputs, takes the element itself as a parameter, then uses setValues to change only the field in which it is being typed at that moment.

onFocus

With this function we can remove the error message from our input in case one has occurred.

encode

This function allows us to convert our values object into a query string since it will be the way in which the data will be sent.

onSubmit

With this function we will manage the sending of our data, we will see it in two parts, validation and data sending.

Validation: We will iterate through each of our values to verify that no field is empty, if it is, we will mark the error. There are other types of validations such as email, but I try to keep it simple.

Fetch: Once our form is validated, we will send the captured data.

The last thing is to integrate all of the above with the components that will make up our form.

important

We can notice that we add to the form the property data-netlify = “true” in addition to an extra input whose value is the name of the form, this is essential so that the netlify bots can recognize the form and integrate it into their system.

The last step

We go to the root of our directory where the /public directory is located, in which the index.html file is located, we will open it and add the following just below the opening tag of the body:

It is important that the data coincide with the form that we previously made as the name of the form and that of the inputs, in addition to the extra properties that you can see and that are necessary for netlify to load the form.

Final

At this point we have everything ready to upload our project to github and integrate it with netlify. We test our form and then from our netlify account we go to Forms.