How to Actually Use Netlify Forms with NuxtJS

Netlify Forms are a simple, easy way to set up forms on your statically generated websites. Historically, though, projects that use NuxtJS have had difficulty implementing Netlify Forms because of how Netlify crawls NuxtJS code. This guide shows you how to use Netlify Forms and NuxtJS effectively.

How to use Netlify Forms with NuxtJS

In the Netlify Forms docs, they tell you that all you need to do is include a hidden data-netlify="true" attribute to your main form, and then you're good to go.

However, as of February 2021, NuxtJS and Netlify Forms can lead to weird, unexpected behavior—like your forms not submitting when you change pages, or your form submitting, but being completely empty.

After a few hours of research, I figured out the issue and learned how to fix it. In order to get Netlify Forms to work, we simply need to add a few extra lines of code.

Add a hidden input field under your form element

For clarity's sake, let's say this is the example form that we want to connect to Netlify:

<form name="contact" method="POST">

  <input name="first-name" placeholder="First Name">
  <input name="last-name" placeholder="Last Name">
  <input type="submit" value="Submit">

</form>

In order to get this form to work, you need to add a hidden input element under your form element. That input element needs to have two things: a value attribute that is the same as the name attribute of its parent form, and a name attribute that is equal to form-name.

Confused? Here's what your HTML would look like after adding the hidden input field:

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

  <input type="hidden" value="contact" name="form-name" />
  <input name="first-name" placeholder="First Name">
  <input name="last-name" placeholder="Last Name">
  <input type="submit" value="Submit">

</form>

If you're keen, you'll notice that our hidden input field is marked up slightly differently than the first name, last name, and submit inputs that we had previously—it has the closing tag /> unlike the regular input tag >. This is purposeful. For whatever reason, Netlify's crawlers prefer this markup. Make sure your hidden field includes that as well.

Include a honeypot attribute

In order to further increase the likelihood of Netlify's crawlers finding our form, we'll add one final attribute: the data-netlify-honeypot attribute. Modify your form so that it looks like this:

<form name="contact" data-netlify="true" data-netlify-honeypot="bot-field" method="POST">

  <input type="hidden" value="contact" name="form-name" />
  <input name="first-name" placeholder="First Name">
  <input name="last-name" placeholder="Last Name">
  <input type="submit" value="Submit">

</form>

This magical configuration was at the end of approximately five hours of brutal bug-fixing. My Netlify forms submitted fine on my NextJS projects, but for some reason they weren't submitting on my NuxtJS projects, which prompted the research.

I sincerely hope you enjoyed this short guide on how to actually use Netlify Forms with NuxtJS! Happy programming.