--- title: "Building Contact Forms for Next.js Sites with Formspree" description: "In this guide, we’ll show you how to add a contact form to a Next.js website using Formspree and deploy it to Netlify for free. We’ll be using Next.js but the concepts can be applied to any React framework, such as Gatsby or Remix." source: "https://www.netlify.com/blog/nextjs-react-forms-formspree/" last_updated: "2026-07-10T20:29:38.000Z" --- One of the most common obstacles to launching a Jamstack site is wiring up your forms to a backend server or function. “Why not just use Netlify Forms?” you ask. Definitely you can! However, for React projects, there are a few extra steps required to [make sure the Netlify form parser identifies your form](https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/). Today we’ll be discussing an alternative, [formspree-react](https://help.formspree.io/hc/en-us/articles/360055613373), a form handling library built specifically for React projects. Formspree-react provides a React-friendly `useForm` hook that handles form submits, updates the form state and displays server-side errors. As a bonus, once your form is connected to [Formspree](https://formspree.io/) you can add [plugins for Mailchimp, Google Sheets, and more](https://help.formspree.io/hc/en-us/sections/360007580793-Plugins) with just a few clicks. In this guide, we’ll show you how to add a contact form to a Next.js website using Formspree and deploy it to Netlify. We’ll be using Next.js but the concepts can be applied to any React framework, such as Gatsby or Remix. At the end you should have a working React contact form in your Next.js project that sends you email notifications. You can find a demo of the final project at [https://formspree-example-netlify.netlify.com](https://formspree-example-netlify.netlify.com). The project repository is hosted on github at [https://github.com/formspree/formspree-example-netlify](https://github.com/formspree/formspree-example-netlify). ## Prerequisites To follow this guide you’re going to need a Formspree account, which you can [sign up for free right here](https://formspree.io/register), and an existing web project built with Next.js. If you don’t have a Next.js project yet, you can create one by running: ``` npx create-next-app ``` If you’re not familiar with Next.js then [check out the official documentation](https://nextjs.org) to learn more. ## Adding a form to Next.js First, we’re going to build a form component that you can place anywhere in your Next.js site. Create a new file called `contactForm.js` inside of your `components` directory. Here’s an example of the file structure including your new component: ``` projectRoot/├─ components/| └─ contactForm.js└─ pages/ └─ index.js ``` Next we’ll build the form component using `@formspree/react`. Install it with: ``` npm install --save @formspree/react ``` Then paste the following code snippet into the `contactForm.js` file: ``` import { useForm, ValidationError } from "@formspree/react"; export default function ContactForm() { const [state, handleSubmit] = useForm("YOUR_FORM_ID"); if (state.succeeded) { return

Thanks for your submission!

; } return (