I’m writing this so that others can more easily find the solution than I did. It seems that Nuxt 3 and Netlify Forms don’t play nicely right now. (Jan ‘23’)
This video walks through how Nuxt 2 + Netlify Forms works:
The comments of the video also provide some helpful solutions for Nuxt 3.
Here’s the TLDR:
- Add, data-netlify and data-netlify-honeypot to your form
- You have to have the hidden input in the form
- The name of the form and the value of the hidden input must be the same
- You must use
npm run generate
in your build settings for the form to be seen.
Here’s the code that worked for me:
<form
name="Website Contact Form"
method="post"
action="/success"
data-netlify="true"
data-netlify-honeypot="bot-field"
>
<input type="hidden" name="form-name" value="Website Contact Form" />
<p hidden>
<label>Don’t fill this out: <input name="bot-field" /></label>
</p>
<!-- Add your form inputs here -->
</form>
Best of luck.