How to add a Netlify Contact Form in React 
Tags: webdev, react, netlify
Published: 2020-11-19 18:46:07

I recently created a contact form for my portfolio website using Netlify and it took me some time to set it up. I wrote this post to help other poor souls out there trying to do the same.

Here's how it looks: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7p73prb5sz77lgprx5ap.gif)

**Note:** I used these two extremely helpful articles to guide me through: [this one](https://www.freecodecamp.org/news/how-to-create-a-contact-form-with-netlify-forms-and-nextjs/) and [this](https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/). 

### Step 1: Add the form *with* Netlify attributes 
* Create a simple contact form (I used Material-UI here) 
* IMPORTANT: Add Netlify built-in features to process form submissions. Look at `name`, `method` and `data-netlify` attributes inside the `form` element
* Also, Netlify recommends adding a **hidden input** inside the form. The important attribute here is `value`, which should be the same as the form’s name: **contact**. 

```javascript
<Container maxWidth='sm'>
 <h2>CONTACT</h2>
   <Card>
     <form 
       name="contact" 
       method="POST" 
       data-netlify="true" 
      >
     <input type="hidden" name="form-name" value="contact" />
        <TextField id="standard-basic" label="name" name="name" />
        <TextField id="standard-basic" label="email" name="email" />
        <TextField multiline id="standard-basic" label="message" name="message" />
        <Button type="submit">Send</Button>
       </form>
      </Card>
   </Container>

```

### Step 2: Add *another* form to your `index.html` file 
* Netlify recommends adding the following block of code to your `index.html` file, right after the opening `<body>` tag in order to allow Netlify to process the form.  
* The `action` attribute here would be used for redirecting. More on this on the next step.  

```javascript
<!-- A little help for the Netlify post-processing bots -->
<form name="contact" netlify netlify-honeypot="bot-field" action='/' hidden>
  <input type="text" name="name" />
  <input type="email" name="email" />
  <textarea name="message"></textarea>
</form>

```

### Step 3: Add a success message *and* avoid redirecting  
* What's the goal here? To help people stay on your website. 
* Add the following code, including `useEffect` and `useState` as well as the message under the `<h2>` tag
* IMPORTANT: Make sure that the `action` attribute inside the `form` element takes the user to the right path. In my case it's `"/contact/?success=true"` **contact** here is my route and the name of my component. 

**Note**: most of this code was taken from one of the articles I mentioned in the introduction.

```javascript
//Final code 
export default function Contact() {
  const [success, setSuccess] = useState(false);

  useEffect(() => {
    if ( window.location.search.includes('success=true') ) {
      setSuccess(true);
    }
  }, []);

  return (
    <Container maxWidth="sm">
      <h2>CONTACT</h2>
      {success && (
          <p style={{ color: "green" }}>Thanks for your message! </p>
        )}
      <Card>
        <form 
            name="contact" 
            method="POST" 
            action="/contact/?success=true"
            data-netlify="true" 
            >
        <input type="hidden" name="form-name" value="contact" />
          <TextField id="standard-basic" label="name" name="name" /> <br />
          <TextField id="standard-basic" label="email" name="email" /> <br />
          <TextField
            multiline
            id="standard-multiline-static"
            label="message"
            name="message"
          />
          <br />
          <div>
            <Button type="submit">Send</Button>
          </div>
        </form>
      </Card>
    </Container>
  );
}
```

### Step 4: Finally, check your form submissions 

* Assuming that you've already deployed your site, check your form submissions on your Netlify project dashboard 
* It should look something like this: 

![Dashboard](https://dev-to-uploads.s3.amazonaws.com/i/b0bcladcc90yjop9iws8.png)
 
That's it. Hopefully it worked as expected. If not, just let me know and we'll find a way 😉