Static form recognized but no submissions when submitting via fetch request

Hi everyone

I created a simple contact form for my nuxt 3 website. The form gets recognized and displayed in the forms dashboard and netlify is “Waiting on those submissions…”. But i don’t get any submissions when i try to submit some demo input. https://cholufraesser.netlify.app/ is my side. The contact form component looks like this:

<template>
	<form 
		name="contact"
		id="contact"
		method="POST"
		data-netlify="true"
		data-netlify-honeypot="bot-field"
		@submit.prevent="submitForm"
	>
		<label>
			<span>Name</span>
			<input type="text" name="name" required />
		</label>
		<label>
				<span>E-Mail</span>
			<input type="email" name="email" required />
		</label>
		<label>
			<span>Nachricht</span>
			<input type="textarea" name="message" />
		</label>
		<input type="hidden" name="form-name" value="contact" />
		<button type="submit">Submit</button>
	</form>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {	
		async submitForm(event) {
			console.log(event.target.getAttribute('name'));
			let formData = new FormData(contact);
			let body = new URLSearchParams(formData).toString();
			console.log(body);
			await fetch('/', {
				method: "POST",
				headers: {
          			"Content-Type": "application/x-www-form-urlencoded",
					// "Accept": "application/json",
				},
				body,
			}).then(response => console.log(response))
					.catch(error => console.error(error));
		},
	},
};
</script>

And this is the static version inside public/contactForm.html:

<form 
	name="contact"
	netlify
	netlify-honeypot="bot-field"
	hidden
>
	<input type="text" name="name" required />
	<input type="email" name="email" required />
	<textarea name="message"></textarea>
	<input type="hidden" name="form-name" value="contact" />
</form>

Does someone see any error?

Thanks for the help
Raphael

Hey @raphaeldas Welcome to the forums,

Looking at the code above, there is no body sent.

A recent post was looking for an example so I create a fairly basic demo coelmay/nuxt3-netlify-form that successfully submits data.

1 Like

body is a ES6 shorthand property defined here:

This is the payload of the http request:

payload

Yes, but you need to specify the body i.e

body: body,

Not really, that is a valid syntax.

For example:

const foo = 1
new Bar({
  foo
})

is equivalent to:

new Bar({
  foo: 1
})

The problem in case of @raphaeldas is exactly what @coelmay has mentioned int he readme of their repo:

This should technically work when posting to any path that isn’t handled by the SSR function.

@raphaeldas’ website is being rendered by a function. So this will not work. You’ll have to ad a static file and post to that.

2 Likes

Indeed. Thanks. I must say I had never seen this usage before.

2 Likes

Thank you for this clarification.

1 Like

And thank you for the demo repo! Problem solved!

2 Likes

Thanks for letting us know the problem is solved! And thanks @coelmay for the helpful links and explanations!

Happy building :netliconfetti:

1 Like

Hi, I am having the same problem as OP. Unfortunately, the demo repo isn’t up anymore. Can anyone share some demo code?

1 Like

Hey @flowmotion

If you still need assistance, the repository is available again:

https://github.com/coelmay/nuxt3-netlify-form

Hi,

I’m having similar issues with nuxt 3. Can you repost the repository or the proper fetch for the form?

@AleaV Coel wasn’t a Netlify employee just a friendly community member and is no longer active, so they won’t be able to re-supply you with that repository.