# Como construir formulários de contato usando React

> Formspree Docs · Usando o Formspree CLI · 14 de julho de 2023

Aprenda como construir formulários de contato com React e receber notificações no seu email.

## 1\. Prepare seu projeto

Instale o React no seu projeto:

```bash
npm install @formspree/react
```

Adicione `FormspreeProvider` ao seu componente top-level . Por exemplo, se você está utilizando Next.js, o seu arquivo `pages/_app.js` deve se parecer com:

```jsx
import { FormspreeProvider } from '@formspree/react';
function App({ Component, pageProps }) {
  return (
  	<FormspreeProvider project="{id-do-projeto}">
      <Component {...pageProps} />
    </FormspreeProvider>
  );
}
export default App;
```

## 2\. Configure seu formulário

No seu arquivo `formspree.json`, adicione um formulário com um ação de notificação via email:

```javascript
{
  "forms": {
    "contactForm": {
      "name": "Contact Form",
      "actions": [{ "type": "email", "to": "{seu-endereco-de-email}" }]
    }
  }
}
```

Feito isso, faça o deploy das suas alterações no Formspree:

```bash
formspree deploy -k <sua-chave-de-deploy>
```

## 3\. Construa seu formulário

Construa seu componente de formulário utilizando o `useForm` hook:

```jsx
import React from 'react';
import { useForm, ValidationError } from '@formspree/react';

function ContactForm() {
  const [state, handleSubmit] = useForm("contactForm");
  if (state.succeeded) {
      return <p>Thanks for joining!</p>;
  }
  return (
      <form onSubmit={handleSubmit}>
      <label htmlFor="email">
        Email Address
      </label>
      <input
        id="email"
        type="email" 
        name="email"
      />
      <ValidationError 
        prefix="Email" 
        field="email"
        errors={state.errors}
      />
      <textarea
        id="message"
        name="message"
      />
      <ValidationError 
        prefix="Message" 
        field="message"
        errors={state.errors}
      />
      <button type="submit" disabled={state.submitting}>
        Submit
      </button>
    </form>
  );
}
export default ContactForm;
```

**[Saiba mais sobre o Formspree CLI](/pt-br/articles/using-the-cli/the-formspree-cli/) →**  
**[Saiba mais sobre Formspree e React](/articles/working-with-react/the-formspree-react-library/) →**