Nuxt 3 Contact Form Solution

Support
,
1

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.

1 Like
2

Hi @bksiefert :wave:t6: ,

Thank you for sharing this with the community. This workaround is super helpful. I appreciate this. :slight_smile:

1 Like