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
3

Just to add to this, the solution for our Nuxt 3 app was to set the fetch action to the static version of the form we were serving directly out of /public.

So, we had /public/contact-us-form.html in our app, as recommended by Netlify’s Vue integration, which contained the static HTML fields for our form. Then, the real key was in our Nuxt app, we needed to set the fetch to use that static form URL, i.e.:

fetch('/contact-us-form.html', {
3 Likes
4

thanks for sharing this detail! super helpful to the community :blush:

1 Like
5

Getting error with fetch. Could you share a full working example? Much appreciated :hearts:

<script setup>
  const formData = reactive({
    name: "",
    number: "",
  });
  const submitForm = async (e) => {
    e.preventDefault();
  console.log('formData',formData)
    let body = new URLSearchParams(formData).toString();
    console.log("body", body);
    fetch("/formTest.html", {
        method: "post",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        body: body,
      })
      .then((res) => {
           console.log("form sumbitted", res);
        if (res.status === 200) {
          navigateTo('/success')
        }
      })
      .catch((error) => console.error(error));
  };
</script>

<template>
        <form class="lg:max-w-xs mx-auto lg:mx-0"   @submit="submitForm($event)"    name="formTest" method="POST"
          data-netlify="true"  data-netlify-honeypot="bot-field" >
         
          <input value="formTest" name="form-name" type="hidden" />
          <p hidden>
            <label>Don’t fill this out: <input name="bot-field" /></label>
          </p>
          <div class="grid grid-cols-1 gap-4">

            <label class="block">
              <input type="text"  name="name" class="input placeholder:text-gray"
                :placeholder="$t('fullName')" required />
            </label>
            <label class="block">
              <input type="number"  name="number" class="input placeholder:text-gray"
                placeholder="+994 00 000 00 00" required />
            </label>


          </div>
          <div class="flex justify-end mt-4 ">
            <button type="submit" class="btn btn-secondary w-full lg:w-auto">
              {{ $t('submit') }}
            </button>
          </div>

        </form>
</template>
6

@Zumrad, please share site and no duplicate posts please.

7

I was losing my mind trying to solve this issue, and what finally worked – I wish I knew why – was putting the page the form points to in static. The page 404s in the browser, but my form now submits data to Netlify. When I put the file in public, the page loaded in the browser and 404ed on form submission.

1 Like
8

thanks for sharing this with the community.

9

Ugh, it worked once and now my POST requests always return 404. Will start a new forum topic.