Issue with Netlify Form Submission

jimmynarula · June 21, 2024, 11:30am

Subject: Issue with Netlify Form Submission

Dear Netlify Support,

I hope this message finds you well. I am encountering an issue with form submissions on my website hosted with Netlify. Despite setting up the form according to Netlify’s guidelines, form submissions are not being processed.

Details:
Netlify form was not detected so I added the static HTML form in a public folder then it will detect the netlify dashboard

Nothing works for me No submission found

nathanmartin · June 21, 2024, 11:35am

@jimmynarula You’ve not said what you’ve built the site with.

What’s the URL to the site?

jimmynarula · June 21, 2024, 1:28pm

Hi Nathan,

Thanks for getting back to me.

My site is based on Nextjs and prismic. The url to test is Contact - Acadian Supply

We have tried so many methods but the netlify is not detecting form and submitting data.

Melvin · June 21, 2024, 3:02pm

Hi @jimmynarula,

Thanks for reaching out!

For forms with Next.js and the Netlify/Next.js runtime version 5, we updated our docs here:

and here:

We also have a Starter Template with a Netlify form to demonstrate how the form is coded here:

The relevant parts here:

the .html file:

github.com

netlify-templates/next-platform-starter/blob/main/public/__forms.html

<html>
    <head></head>
    <body>
        <form name="feedback" data-netlify="true" hidden>
            <input type="hidden" name="form-name" value="feedback" />
            <input name="name" type="text" />
            <input name="email" type="text" />
            <input name="message" type="text" />
        </form>
    </body>
</html>

and the js/jsx:

github.com

netlify-templates/next-platform-starter/blob/main/components/feedback-form.jsx

'use client';

import { useState } from 'react';
import { Card } from './card';

export function FeedbackForm() {
    const [status, setStatus] = useState(null);
    const [error, setError] = useState(null);

    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()

This file has been truncated. show original

If you want to compare your code to that of the template to see if it helps troubleshoot the issue.

nathanmartin · June 22, 2024, 1:43am

@jimmynarula I thought you were probably using Next due to the POST being made to / and it not working.

The answer is all as provided by @Melvin.

If you didn’t spot the mentions in the documentation before, that’d be because they were only very recently added.

jimmynarula · June 28, 2024, 4:41pm

Hi @Melvin ,

Thank you for providing me with the updated documentation and after implementing the latest code the forms started to work normally.

Topic		Replies	Views
No form is detected - no submissions are shown Support netlify-forms , nextjs	5	276	April 18, 2024
Netlify form from NextJS not submitting Support netlify-forms	17	2109	July 14, 2024
Netlify form submissions not being recorded on platform Support netlify-forms , nextjs , next	1	62	June 17, 2024
Netlify Form not receiving submissions Support netlify-forms , nextjs	5	1479	May 5, 2022
Netlify Forms not being detected Support deployment , netlify-forms , netlify-newbie , branch-deploys , nextjs	7	1546	April 25, 2022

Issue with Netlify Form Submission

Related topics