How to Add Forms to a Next.js Site using Netlify

Sometimes, handling the complexity of form integration on a website isn’t worth it. There are many services that provide paid solutions, but Netlify Forms comes in handy with a nice free tier.

Suppose this is the form we’re working with.

<form name="contact" method="POST">
  <input name="name" id="name"></input>
  <button type="submit">Send</button>
</form>

Right off the bat, ensure that all of your inputs (<input>, <textarea>, etc.) have a name attribute unique to the form. Inputs will only show up in submissions if it has the name attribute.

We want to be able to receive submissions through the Netlify Forms dashboard.

There are a few steps to this process.

1. Add `data-netlify` to the form

To do this, we can simply add the data-netlify="true" attribute to the <form> tag.

<form 
  name="contact" 
  method="POST" 
  data-netlify="true"
>
  ...
</form>

The name of the form should be unique to our site.

Netlify will scan our site to look for forms with this attribute and collect submissions.

2. Add a hidden `form-name` input

In our form, we’ll need to add an extra hidden input.

It’ll have 2 attributes:

name, which we’ll set to form-name
value, which we’ll set to the same name of our form

<form 
  name="contact" 
  method="POST" 
  data-netlify="true"
>
  <input
    type="hidden"
    name="form-name"
    value="contact"
  />
  ...
</form>

3. Handle Next.js Routing using `action`

If we were to submit this form in our Next.js app, we would be redirected to a 404 page. The reason for this is that the default page Netlify creates on submission does not exist in our current routes.

We can redirect users back to the homepage or to a separate success page.

For instance, if we have a pages/success.js, we can route users there using the action attribute on the <form> tag.

<form 
  name="contact" 
  method="POST" 
  data-netlify="true" 
  action="/success"
>
  ...
</form>

4. Prevent Spam

If we want to take this one step further, we can add some simple spam prevention.

This is particularly helpful because Netlify will not include spam submissions in our monthly quota.

Honeypot Field

Honeypot fields are form fields that are hidden from us mere humans, but viewable by bots. They are meant to lure bots into filling out those inputs. If the input is completed in a form submission, Netlify will mark it as spam.

There are only 2 steps to adding a honeypot field.

Add the netlify-honeypot attribute to the <form> tag
Add the hidden input

<form
  name="contact"
  method="POST"
  data-netlify="true"
  action="/success"
  netlify-honeypot="bot-field"
>
  ...
  <label class="hidden">
    Don’t fill this out if you’re human:
    <input name="bot-field" />
  </label>
</form>

The hidden class is just the following:

.hidden {
  display: none;
}

When Netlify builds our site, they’ll remove the netlify-honeypot attribute from the <form> tag, so bots can’t parse the DOM for that field.

reCAPTCHA 2

Lastly, we can ask Netlify to add a CAPTCHA to our form.

This requires 2 steps as well:

Add the data-netlify-recaptcha attribute to our <form> tag
Add a <div> inside our form with the data-netlify-recaptcha attribute

<form
  name="contact"
  method="POST"
  data-netlify="true"
  action="/success"
  data-netlify-recaptcha="true"
>
  ...
  <div data-netlify-recaptcha="true"></div>
</form>

5. Collect Submissions in the Netlify Dashboard

Once the site is deployed, we should be able to see all the available Netlify-powered forms in our dashboard.

In the Forms tab of our site’s dashboard, we should see a list of Active forms on our site.

The name of the form corresponds to the name attribute in our <form> tag.

When selecting a form, we can filter by Verified submissions and Spam submissions.

Each submission is nicely organized by input labels and submitted values.

6. Collection Submissions in Google Sheets

Finally, we can save all submissions to our Netlify Forms easily in Google Sheets.

Upon submission, we want a new row with the new submission added to a Google Sheet, so that it’s accessible by others without requiring access to Netlify.

We can do this very easily using Zapier’s Netlify-Google Sheets integration zap.

The process of getting this up and running is fairly simple, so I’ll leave that to you to work it out!

How to Add Forms to a Next.js Site using Netlify

1. Add data-netlify to the form

2. Add a hidden form-name input

3. Handle Next.js Routing using action