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 generatein 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.