Hi,
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>
SamO
May 18, 2023, 6:30pm
2
Hi @madreal welcome to the forums thanks for reaching out!<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 !
1 Like
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!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’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 ,404 back, but https://pixelvisionagency.com/form indeed works, loading an empty page because the form is hidden
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:
Remove the action="/form" from the form on the /contact page.
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
If you can share the repository you are deploying from I am happy to have a look.
Otherwise I think I’m beat.
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
Isn’t required in form.html. It is only required on the form that is submitted.
1 Like
Zumrad
July 31, 2023, 12:14am
20
@madreal @jasiqli Could you share a working example? Much appreciated
1 Like
