---
title: "Add a Netlify-powered contact form to your Next.js site"
description: "Accepting submissions to forms with Netlify and Next.js is straightforward, with just a few easy steps!"
source: "https://www.netlify.com/blog/2020/05/26/add-a-netlify-powered-contact-form-to-your-next-js-site/"
last_updated: "2026-07-15T01:27:02.000Z"
---
Hey all you cool cats and kittens, have you ever wanted to build a form into your website, but didn’t want to deal with setting up a way to pull in a backend, or an ugly 3rd party embedded one? Well, you’re in luck, thanks to [Netlify Forms](https://www.netlify.com/products/forms/?utm_source=blog&utm_medium=formspage-cs&utm_campaign=devex).
For this tutorial, let’s assume I have a Next.js application that is already styled up, and I want to add a Contact page.
Note: If you want to build along with me but don’t have a project to work with, try this [Next + Netlify starter project](https://github.com/netlify-templates/next-netlify-starter) that will give you a starting point!
[](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/next-netlify-starter&utm_source=formblog&utm_medium=nextstarter-cs&utm_campaign=devex)
# Creating a form
Now, the first thing I’m going to do is add a `contact.js` file to my `pages/` directory. This will automatically add a route in Next.js that people can navigate to.
```
export default function Contact() { return (
Contact me!
)}
```
Now, let’s make ourselves a form component that we can put on this page. Head over to wherever your components live (mine is in my `components/` directory), and make a `ContactForm.js` file and stick something like this in there:
```
export default function ContactForm() { return ( )}
```
This is a pretty straightforward form, no real frills. You might notice we use `htmlFor` instead of `for` for the labels, and that’s because `for` is a reserved word in JavaScript!
Anyway, you can style it however you want, and import it into your `Contact` page component over in `pages/`:
```
export default function Contact() { return (
+
) }
```
Alright, now run your application (typically with `yarn run dev` unless you changed it in your own project), and navigate to `localhost:3000/contact`! Depending on how you styled it, you should see a little something like this:
Now, if you were to deploy this to Netlify right now, it won’t do anything. It’s a plain form with nothing hooked up to it to make the form data go anywhere. Let’s fix that, shall we?
# Adding Netlify to our form
Go back to your `ContactForm.js` and add `data-netlify="true"` to your `