Nuxt 3 form submission not showing despite response of 200

Support
1

Hi,

I’ve seen a lot of questions regarding this online, but no one seems to have a solution.

I’m trying to get form submission to work with a Nuxt 3 app. I have validation so I’ve been using the AJAX approach. However, I have tried this without validation as well and it still doesn’t seem to work

I’m using vuestic for css and vuelidate for form validation, pushed up site with nuxt build (nuxt generate results in 404)

Form top:

    <form
      @submit.prevent="submitForm"
      name="contact"
      method="post"
      action="/thanks"
      netlify
      netlify-honeypot="bot-field"
    >
      <input type="hidden" name="form-name" value="contact" />
      <p hidden>
        <label>Don’t fill this out: <input name="bot-field" /></label>
      </p>

Form object:

const formData = reactive({
  name: "",
  formEmail: "",
  phone: "",
  subscription: "",
  message: "",
});

submit function

const submitForm = async () => {
  const isValid = await v$.value.$validate();

  if (!isValid) {
    console.log("form has errors");
    return true;
  }
  let body = new URLSearchParams(formData).toString();
  console.log("body", body);
  fetch("/", {
    method: "post",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    body: body,
  })
    .then((res) => {
      console.log("form sumbitted", res);
      if (res.status === 200) {
        router.push({ path: "/thanks" });
      }
    })
    .catch((error) => console.error(error));
};

index.html in root

<form name="contact" action="/thanks" netlify hidden>
    <input type="hidden" name="form-name" value="contact" />
    <input type="text" name="name" />
    <input type="text" name="email" />
    <input type="text" name="phone" />
    <input name="subscription"></input>
    <textarea name="message"></textarea>
  </form>

Things I’ve tried:

  • wrapped form in ClientOnly

  • submit form without validation

  • removed hidden input

  • used data-netlify=“true” instead of netlify in form

Success message:

Response {type: 'basic', url: 'https://communityui.com/', redirected: false, status: 200, ok: true, …}
body
: 
(...)
bodyUsed
: 
false
headers
: 
Headers {}
ok
: 
true
redirected
: 
false
status
: 
200
statusText
: 
""
type
: 
"basic"
url
: 
"https://communityui.com/"
[[Prototype]]
: 
Response

body value being sent:

name=test+name&formEmail=test%40example.com&phone=&subscription=Premium&message=Hi+this+is+a+test

The only other thing I can think of that might be causing a problem is in the index.html file maybe the elements don’t match exactly because i’m using a css library? I’m not sure if that matters if the names match exactly.

I’m officially completely stuck any help would be appreciated.

2

Hi @AleaV, kindly check the link below on how to correctly configure Nuxt 3 with Netlify Forms. The suggestion there is very helpful since it is similar to your situation.

Thanks.

3

Thanks for the video, this unfortunately doesn’t work for Nuxt 3 though. So i’m still pretty stuck

4

I finally got this working! I hope this helps someone else who might be having the same issues.

I followed what was on this post Nuxt 3 Contact Form Solution

But it still didn’t work for me because I was using form validation.

  • The ajax post does not work, you have to submit from the form.

  • @submit.prevent won’t work you have to have prevent default in your function

In the end here is the code that ended up working

    <form
      @submit="submitForm($event)"
      name="contact"
      method="POST"
      action="/thanks"
      data-netlify="true"
      netlify-honeypot="bot-field"
    >
      <input value="contact" name="form-name" type="hidden" />
      <p hidden>
        <label>Don’t fill this out: <input name="bot-field" /></label>
      </p>


const submitForm = async (e) => {
  const isFormCorrect = await v$.value.$validate();
  if (!isFormCorrect) {
    e.preventDefault();
  }
  return;
};
2 Likes
5

Hi @AleaV, thanks for sharing how you solved your problem. It will definitely help others who experience a similar problem.

6

Hi @AleaV

thank you for sharing your solution!

8

@madreal, please share the site name to check.

10

@madreal you’ve already opened a thread, don’t post the same issue on another already solved thread

1 Like