Nuxt 3 form not sending data (no errors)

@Zumrad, if you can share your site details, others can help.

This worked for me using Nuxt 3 when generating a static site. It was not creating the hidden input for me automatically. Thanks.

awesome. glad to hear it!

Hey! :slight_smile: I’m experiencing the same issue. How did you solve it eventually?

I’m at a point where I can see the AJAX POST request is sent to my custom page which only contains the hidden form like you described above. And in the browser dev tools i can see that I’m getting a 200 and successful form submission page from Netlify. However, there is nothing showing up in the Netlify forms section.


export const sendContactForm = async (values: ContactForm): Promise<boolean> => {
  const body = {
    'form-name': 'clublive-contact',
    ...values,
  }

  console.log('sending form', body)

  try {
    const response = (await $fetch('/contact-form.html', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: new URLSearchParams(body as never).toString(),
    })) as Response

    if (response.ok) {
      return true
    }
    console.log('response not ok', response)
    return false
  } catch (error) {
    console.log('error caught:', error)
    return false
  }
}
<html>
  <head></head>
  <body>
    <!-- necessary for Netlify's form detection -->
    <form name="clublive-contact" method="post" data-netlify="true" data-netlify-honeypot="bot-field" hidden>
      <input name="contactName" />
      <input name="message" />
      <input name="eventDate" />
      <input name="dateUnknown" />
      <input name="dateEstimate" />
      <input name="eventType" />
      <input name="eventTypeDescription" />
      <input name="amountOfGuests" />
      <input name="plannedAirTime" />
      <input name="locationName" />
      <input name="locationAddress" />
      <input name="contactTypes" />
      <input name="email" />
      <input name="telephone" />
      <input name="reference" />
      <input name="referenceOther" />
    </form>
  </body>
</html>

Actually, it does show that there has been a submission, but I don’t see the submitted content. See “Last submission a few seconds ago”. But then “No submissions yet”. What am I missing here?

@julisch94 Unfortunately the user that you’ve asked doesn’t exist anymore:

What’s the link to your form?

I just fixed it! I had to omit the .html in the POST request. Like:

$fetch('/contact-form', {...

instead of

$fetch('/contact-form.html', {...

Now it works :slight_smile: