Submissions Vanishing Despite Successful AJAX fetch to Netlify Function

Support
1

Site Name: gcpsy-website.netlify.app (or your actual site name)

Hello Netlify Support Team,

I’m facing a very persistent issue with my Netlify Form on a Next.js site. Despite the form submission appearing successful from the user’s perspective (including redirection to a confirmation page), the submissions are never appearing in my Netlify Forms dashboard—neither in “Verified” nor in “Spam”.

I have followed the official documentation and numerous troubleshooting steps, and I’m hoping you can help identify what might be happening on Netlify’s end.

Basic Project Information

  • Template: netlify-templates/content-ops-starter

  • Framework: Next.js v15.5.0

  • Netlify Plugin: @netlify/plugin-nextjs v5.13.1

  • Form Handling: Using the recommended modern architecture: a static HTML file for detection and a React component submitting via AJAX to a dedicated Netlify Function.

The Core Problem

The user experience is flawless, but the data is lost.

  1. The form page (/rdv/) renders correctly.

  2. Upon filling out and submitting the form, the browser’s Network tab shows a successful POST request to our Netlify Function (/.netlify/functions/submit-form).

  3. The function returns a 200 OK status.

  4. This successful response correctly triggers the JavaScript to redirect the user to our /confirmation/ page.

  5. However, the submission data never appears in the “consultation” form submissions list in the Netlify UI. The spam folder has been repeatedly checked and is empty.

What We Have Tried

We have gone through an extensive debugging process to isolate the issue.

  1. Initial Attempt (Simple AJAX): We first tried a simple AJAX submission posting directly to /. This failed the build with the now well-known error: @netlify/plugin-nextjs@5 requires migration steps to support Netlify Forms. This confirmed that a simple AJAX submission is not compatible with our modern Next.js setup.

  2. Second Attempt (Next.js API Route): We then tried using a Next.js API route (/api/form-handler) to handle the submission. This also resulted in the exact same build error, proving that API routes are also not the correct “migration step”.

  3. Current Architecture (Dedicated Netlify Function): We then implemented the official recommended architecture:

    • A “Blueprint” File: We have a static public/thanks.html file containing a hidden version of our form with data-netlify="true", data-netlify-honeypot, and data-netlify-recaptcha attributes. This ensures Netlify’s build system correctly detects the form.

    • A Dedicated React Component: We created a FormSection.tsx component that renders the visible form. This form does not have the data-netlify attribute. It uses an onSubmit handler to manage the submission with JavaScript.

    • A Dedicated Netlify Function: We created a serverless function at netlify/functions/submit-form.js. The React component’s onSubmit handler makes a fetch POST request to this function. The function’s role is to receive the data and forward it to Netlify’s internal form service, including the user’s IP and User-Agent to satisfy the spam filter.

Where We Are

The current setup builds successfully and runs without any errors in the browser console. Using detailed logging, we have confirmed the following:

  • The React onSubmit handler fires correctly.

  • The form data is correctly encoded into a URLSearchParams string.

  • The fetch call to /.netlify/functions/submit-form is sent successfully.

  • The browser receives a 200 OK response from the function, triggering the success redirection.

  • Extensive logging inside the submit-form.js function confirms that it receives the data and that its own fetch call to forward the data to Netlify completes without crashing.

Everything points to a successful end-to-end process, yet the data is being silently dropped after our Netlify Function has successfully handed it off to Netlify’s internal form service.

My Question for the Support Team

Given that the build passes, the front-end logic is confirmed to be working, and the Netlify Function executes successfully, what could be causing the submissions to be silently dropped? Is there a configuration on my site’s backend that is not visible to me, or an undocumented behavior of the spam filter when receiving data from a Netlify Function, that could explain this?

Thank you in advance for your help. This is the final blocker on our project.

Best regards.

2

Where did you get this advice from? If you’re using a Netlify Function, you cannot use Netlify Forms, as in, the Fuction would take presedence over the Form submission.

Again, untrue. Looks like you’re using AI over official docs. The entire setup required for Forms is documented with code-examples here: Using Netlify Forms with Next.js - OpenNext