Netlify form from NextJS not submitting

[simbourne]

My Netlify site is https://deft-pithivier-f0b601.netlify.app/

The site is built with NextJS & I have 2 forms using Netlify forms. I’ve followed the instructions from this post: How to Integrate Netlify’s Form Handling in a React App

I have a static html page in my public folder with the forms including all fields from the TSX forms.

The TSX forms have the hidden form-name field matching the form’s name property & the forms both include the data-netlify property:

I see the forms are active in the Netlify UI but I don’t get any submissions. I also followed the suggestions in this support thread and added a static html thank you page in my public folder.

Netlify form submission does not work

[Screenshot from 2021-11-01 10-23-07] build process detect the from.see the screenshot

I can see Netlify is processing my forms correctly in the post-processing build logs but I do not get any submissions. I’ve also checked the spam submissions & there are none there either:

What am I missing? Please help!

[sid.m]

The page you’re submitting to has a redirect, which causes the submissions to be “consumed” by the redirect rule. You can read in more depth here. I’d recommend removing the “/thank-you” redirect.

[simbourne]

When I first set up the form I didn’t have the redirect page or the action=“/thank-you” on the form. It didn’t get submissions then either. I added the page in an attempt to correct the issue according to support forum thread referenced above: Netlify form submission does not work - #12 by midhundasap007

[simbourne]

Removing the redirect had no effect.

[Melvin]

HI @simbourne,

Thanks for following up.

Here is a Next.js/Netlify form implementation:

GitHub - gualterandre/test-nextjs-forms

You can find the hidden form here:

gualterandre/test-nextjs-forms/blob/main/public/hidden-form.html

The index.js contains more form code:

gualterandre/test-nextjs-forms/blob/main/src/pages/index.js

Could you check your configuration against the GitHub repo?

[simbourne]

I’ve updated my code to match your examples. I do get the success message alert on the front end when I submit. I do not get an error message alert. But I’m still not getting any submissions in the UI.

[Melvin]

Hi @simbourne,

I went here to try out the form and see this in the network tab:

From our Support Guide this is the section that covers when a form submits, but there’s no submission in the UI:

[Support Guide] Form problems, form debugging, 404 when submitting

Last reviewed August 2023 Please give these debugging tips a try before making a new post. If none of the suggestions work, please include the information that we request at the end of this guide in the new post that you create. Thank you! Why use Forms? Forms are one of the most useful parts of modern websites because they allow us to capture input from our visitors. There are many ways to use forms: contact forms, such as contact forms and sign-up forms. Seeing as there are many types of fo…

1. The endpoint that you’re submitting to has a redirect. For example, if you’re using JavaScript to submit like: fetch('/'... and you’ve a redirect rule like /* /foo 301!, submissions would probably not work. This is because the submissions are being “consumed” by the redirect rule. Instead, you cans set the endpoint to any other page that doesn’t redirect. Note: 200 rewrites could cause problems too.
2. You’re using some kind of server side rendering to render the endpoint. For example, if you’re rendering the page that you’ve set as the endpoint using a serverless function, you’d not seem the submission in the UI. The solution is similar, set the endpoint to a page or an asset (like /favicon.ico) that already exists.
3. We use Akismet on all form submissions 172. If you see the form in the app.netlify.com 152 UI, but you don’t see any of your test submissions, double check that you aren’t sending junk info in your test submissions or submitting over and over again from the same IP address (which looks spammy and may be hidden in our UI until you choose to view the spam submissions 165).

Could you check to see if any of the 3 options pertain to your form?

[simbourne]

Yes the page I was fetching “/” uses server side rendering. I switched it to fetch the thank-you.html page in the public folder that does not use SSR. It didn’t make any difference. I still get no submissions.

[Melvin]

Hi @simbourne,

Since the form is detected, but no data is received, please make sure you’re doing this:

Forms setup

To submit a JavaScript-rendered form built with a framework like Gatsby or Nuxt, you can send an AJAX POST request to any path on your site. Requirements for the request:

• You need to URL-encode your form data in the body of the request.
• If you haven’t added a hidden form-name input to your JavaScript-rendered form, you need to send a form-name attribute in the AJAX POST request body.
• If the form accepts alphanumeric data only, the request should include the header "Content-Type": "application/x-www-form-urlencoded". If the form accepts file uploads, including a Content-Type header is not recommended.

Here’s the example from our docs:

const handleSubmit = (event) => {  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(() => navigate("/thank-you/"))    .catch((error) => alert(error));};

[hrishikesh]

Are you by any chance using server actions or something similar?

[simbourne]

I’m not using server actions but I am using the latest version of NextJS with the app folder that uses server side rendering for pages. On the page that includes the form I’m using NextJs dynamic import:

const QuoteForm = dynamic(() => import(‘@/components/quote-form’), {
ssr: false,

})

And here’s what the Form Component looks like:

‘use client’
import { ChangeEvent, FormEvent, useState } from “react”
import { states } from “@/utils/constants”

// NextJS Netlify form implementation per Netlify support:
// test-nextjs-forms/src/pages/index.js at main · gualterandre/test-nextjs-forms · GitHub

const QuoteForm = () => {
const [formData, setFormData] = useState({})

const handleChange = (e: ChangeEvent) => {
const {name, value} = e.target as HTMLFormElement

setFormData({
…formData,
[name]: value
})
}

const encode = (data: any) => {
return Object.keys(data)
.map(
(key) => encodeURIComponent(key) + ‘=’ + encodeURIComponent(data[key])
)
.join(‘&’);
};

const handleSubmit = (e: FormEvent) => {
e.preventDefault();

fetch(‘/thank-you.html’, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/x-www-form-urlencoded’ },
body: encode({ ‘form-name’: ‘rfq’, …formData }),
})
.then(() => alert(‘Thank you for your interest! We'll get back to you as soon as possible!’))
.catch((error) => alert(error));
};

return (

handleSubmit(e)} > (...rest of form)

)

}
export default QuoteForm

[simbourne]

I’m not using server actions but I am using the latest version of NextJS with the app folder which uses server side rendering for pages.

on the page that includes the form component I use NextJS dynamic import to prevent SSR like this:

const QuoteForm = dynamic(() => import(‘@/components/quote-form’), {
ssr: false,
})

And in the form component itself I’m using “use client”. My form component looks like this:

[hrishikesh]

Well, due to the way your site is currently setup, there’s an Edge Function being deployed for all paths on your site. This is blocking the form submission from working.

Not sure if you’re up for it, but there’s another “hack” you can use here. You can setup a similar form on a different website and POST to that website. So the submissions would be counted on that website instead of this one.

[Ab3nXY]

I am having similar problem even if i followed all the instruction, i am using next js v 14My site

const handleFormSubmit = async (event) => {
event.preventDefault();
try {
setStatus(‘pending’);
setError(null);
const myForm = event.target;
const formData = new FormData(myForm);
const res = await fetch(‘/__forms.html’, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/x-www-form-urlencoded’ },
body: new URLSearchParams(formData).toString()
});
if (res.status === 200) {
setStatus(‘ok’);
myForm.reset();
closePopup();
} else {
setStatus(‘error’);
setError(${res.status} ${res.statusText});
}
} catch (e) {
setStatus(‘error’);
setError(${e});
}
};
and my __form.html

[hrishikesh]

I tried submitting your form and it seems to work fine.

[Ab3nXY]

Thank you for your replay, i was using the GitHub - netlify-templates/next-platform-starter: Modern starter based on Next.js 14 (App Router), Tailwind, daisyUI, and Netlify Core Primitives and __forms.html which contain
form name=“feedback” data-netlify=“true” hidden>

but not working so i experimented a little bit and fix it by adding method=“post” as follow in my __forms.html
form name=“contact” data-netlify=“true” method=“post” hidden>

[hrishikesh]

So it’s resolved now, right? Or do you still need help?

[Ab3nXY]

It’s solved. Thank you