Nuxt 3 form not sending data (no errors)

Hi,
I’ve seen a lot of questions regarding this online, but I can’t find a solution that works.

I’m trying to get form submission to work with a Nuxt 3 app. I have added everything necessary (from Netlify doc and internet searches) in the form for it to work but nothing.

I get no errors in console or network, no issue at all, but no email in Netlify either.

Here’s the site PixelVision - Contact Us in case anyboby wants to try it

Form html:

<form class="form mb-6" name="contact" method="post" action="/thanks" data-netlify="true" data-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>
	<div class="field">
		<div class="checkboxes clearfix">
			<div class="checkbox">
				<label>
					<input type="checkbox" value="website" /><span>Website</span>
				</label>
			</div>
			<div class="checkbox">
				<label> <input type="checkbox" value="app" /><span>App</span> </label>
			</div>
			<div class="checkbox">
				<label> <input type="checkbox" value="logo" /><span>Logo</span> </label>
			</div>
		</div>
	</div>
	<div class="field mt-6">
		<div class="columns">
			<div class="column is-half">
				<div class="field">
					<label class="label label--normal" for="input1">{{ $t('contact.form.name_label') }}</label>
					<input class="input" type="text" id="input1" name="input1" :placeholder="$t('contact.form.name_placeholder')"/>
				</div>
			</div>
			<div class="column is-half">
				<div class="field">
					<label class="label label--normal" for="input2">{{ $t('contact.form.email_label') }}</label>
					<input class="input" type="email" id="input2" name="input2" :placeholder="$t('contact.form.email_placeholder')"/>
				</div>
			</div>
		</div>
	</div>
	<div class="field mt-6">
		<label class="label label--normal" for="textarea">{{ $t('contact.form.details_label') }}</label>
		<div class="control">
			<textarea class="textarea" id="textarea" name="textarea" :placeholder="$t('contact.form.details_placeholder')"></textarea>
		</div>
	</div>
	<div class="field">
		<div class="control">
			<button class="button form__button" type="submit">
				{{ $t('contact.form.button') }}
			</button>
		</div>
	</div>
</form>

Hi @madreal welcome to the forums thanks for reaching out!
Can you try to add the <input type="hidden" name="form-name" value="contact" /> field? Otherwise Netlify won’t recognise the form submissions.

If that doesn’t work give a read at our forms debugging guide here.

Also are there any JS errors in the console? Did you check the spam filtering settings in case submissions are ending up there?

Thanks !

Hi @SamO as you can see from the code I shared above, <input type="hidden" name="form-name" value="contact" /> is indeed in the form.

There are not errors in the console, no errors in networks and no emails in my gmail account, as well as inside Netlify’s dashboard. It looks like everything is set up properly, I really need some help with this

I added an html file in the /public with just the form inside and at least I see the form in Netlify dashboard but still not submissions

Is the Nuxt build using SSR or static @madreal?

The difference is that when submitting a (Netlify) form the POST endpoint needs to exist as an actual file and not something generated via SSR (or client-side JS.)

@jasiqli I am actually not sure but I think SSR. Here’s my next.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
	modules: ["@nuxtjs/i18n"],
	i18n: {
		vueI18n: "./i18n.config.ts", // if you are using custom path, default
		strategy: "no_prefix",
		detectBrowserLanguage: {
			useCookie: true,
			cookieKey: "i18n_selected_language",
			redirectOn: "root", // recommended
		},
	},
	css: ["~/assets/style/main.sass"],
});

And I do have a form.html in my public, as you can see the structure

As a test @madreal, can you try changing the action from /thanks to /form and see if everything works?

@jasiqli that worked, thanks!
But now it’s going to that route with a Netlify success message, which isn’t ideal for me. I rather show a “message sent” to show up at the bottom of my current form. Am I able to do that while keeping action there?

Then you will need to use a JavaScript function to handle form submission.

@jasiqli I just did and right now it’s not sending anything to Netlify anymore.

My nuxt page in pages/contact.vue

<template>
...some other code
<form class="form mb-6" name="contact" method="post" action="/form" data-netlify="true" data-netlify-honeypot="bot-field" @submit.prevent="handleSubmit"><input type="hidden" name="form-name" />
	<p hidden>
		<label>Don’t fill this out: <input name="bot-field" /></label>
	</p>
	<div class="field mt-6">
		<div class="columns">
			<div class="column is-half">
				<div class="field"><label class="label label--normal" for="name">{{ $t('contact.form.name_label') }}</label><input class="input" type="text" id="name" name="name" :placeholder="$t('contact.form.name_placeholder') || 'Your Name'" autocomplete="name" required="required" /></div>
			</div>
			<div class="column is-half">
				<div class="field"><label class="label label--normal" for="email">Email</label><input class="input" type="email" id="email" name="email" :placeholder="$t('contact.form.email_placeholder') || 'Your Email'" autocomplete="email" required="required" /></div>
			</div>
		</div>
	</div>
	<div class="field mt-6"><label class="label label--normal" for="textarea">{{ $t('contact.form.details_label') }}</label>
		<div class="control"><textarea class="textarea" id="textarea" name="textarea" :placeholder="$t('contact.form.details_placeholder') || 'Tell us about your project'" autocomplete="off"></textarea></div>
	</div>
	<div class="field">
		<div class="control"><button class="button form__button" type="submit">{{ $t('contact.form.button') }}</button></div>
	</div>
	<div class="field">
		<div class="control">
			<p>{{ message }}</p>
		</div>
	</div>
</form>
</template>



<script setup lang="ts">
import { ref } from 'vue';

const message = ref('');

const handleSubmit = (event: any) => {
	event.preventDefault();

	const myForm = event.target;
	const formData = new FormData(myForm);

	fetch("/", {
		method: "POST",
		headers: { "Content-Type": "application/x-www-form-urlencoded" },
		body: new URLSearchParams(formData.toString()),
	})
		.then(() => message.value = 'Message Sent!')
		.catch((error) => alert(error));
};
</script>

And here’s my form.html file in root

<form class="form mb-6" name="contact" method="post" action="/thanks" data-netlify="true" data-netlify-honeypot="bot-field" netlify="" hidden=""><input type="hidden" name="form-name" />
    <p hidden=""><label>Don&rsquo;t fill this out: <input name="bot-field" /></label></p>
    <div class="field mt-6">
        <div class="columns">
            <div class="column is-half">
                <div class="field"><label class="label label--normal" for="name">Name</label><input class="input" id="name" type="text" name="name" :placeholder="$t('contact.form.name_placeholder')" /></div>
            </div>
            <div class="column is-half">
                <div class="field"><label class="label label--normal" for="email">Email</label><input class="input" id="email" type="email" name="email" :placeholder="$t('contact.form.email_placeholder')" /></div>
            </div>
        </div>
    </div>
    <div class="field mt-6"><label class="label label--normal" for="textarea">Details</label>
        <div class="control"><textarea class="textarea" id="textarea" name="textarea" :placeholder="$t('contact.form.details_placeholder')"></textarea></div>
    </div>
    <div class="field">
        <div class="control"><button class="button form__button" type="submit">Send Request</button></div>
    </div>
</form>

Can you see what I’m doing wrong?

The fetch request is going to /. Change this to /form as done previously and see if it works.

Hey @jasiqli,
Thanks for sticking with me and helping.
I get a 404 back, but https://pixelvisionagency.com/form indeed works, loading an empty page because the form is hidden :thinking:

I adjusted the fetch like this:

fetch("/form", {
	method: "POST",
	headers: { "Content-Type": "application/x-www-form-urlencoded" },
	body: new URLSearchParams(formData.toString()),
})
	.then(() => message.value = 'Message Sent!')
	.catch((error) => alert(error));

This is strange.

Can you do two things:

  1. Remove the action="/form" from the form on the /contact page.
  2. Remove the action='/thanks' from the form on the /form page.

Neither are required now as form is submitted via ajax. This also eliminates them (if it still doesn’t work) as possible causes.

@jasiqli Same error. Did I write the function wrong? I’m confused on why the 404

Screenshot 2023-05-22 at 12.10.24
Screenshot 2023-05-22 at 12.09.54

If you can share the repository you are deploying from I am happy to have a look.

Otherwise I think I’m beat.

@jasiqli here it is GitHub - MadReal/pixel-vision
Thanks again

Got it working. Created a pull request.

1 Like

@jasiqli I really appreciate your help. I saw the fix, I’m wondering why that <input type="hidden" name="form-name" value="contact"/> doesn’t need to be replicated in form.html

Either way, thanks a lot of your time and help. Have a good day :blush:

Isn’t required in form.html. It is only required on the form that is submitted.

1 Like

@madreal @jasiqli Could you share a working example? Much appreciated :hearts: