Issue with Netlify Form

[ancuratu]

Hi There,

I am trying to add Netlify Form and it doesn’t seem to work. I have added data-netlify=“true” and added onSubmit on the form:

const handleSubmit = (e) => {
    e.preventDefault();
    fetch("/", {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: new URLSearchParams(new FormData(e.target)).toString()
    })
        .then(() => setSubmitted(true))
        .catch((error) => alert('Submission failed', error));
};

1. Am I missing anything why doesn’t it work?
2. Is it possible to test the form without deploying each time like running netlify dev?

I have tested it on Deploy preview link:
https://development--curatu-marketing.netlify.app/contact-us

[hrishikesh]

You’re not sendng any form-name field:

You need to ensure that gets sent as well.

[ancuratu]

hi @hrishikesh we have updated and now we are sending form-name but we are getting 404.
Here are the screenshots.

[Melvin]

Hi @ancuratu,

Thanks for following up.

I found a similar issue here:

404 Page Not Found error upon form submission

Thanks, I was able to solve this. Because I’m was using Next.js, I needed to add a hidden input to my form like <input type="hidden" name="form-name" value="register_company" /> This is described in the docs here. These two articles were also helpful How to Integrate Netlify’s Form Handling in a React App Add a Netlify-powered contact form to your Next.js site Note Contrary to the docs and some articles, I did not need to create a .html file with a shell of my form. Also note that I didn’t…

Could you give that a read and see if the solution helps you?

[ancuratu]

Thanks @Melvin for providing the article urls.

I am doing exactly as what is suggested in the articles and it still goes to 404.

Here is my code:

 const handleSubmit = (e) => {
        e.preventDefault();
        const formData = new FormData(e.target);
    
        fetch("/", {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            body: new URLSearchParams(formData).toString()
        })
        .then(() => setSubmitted(true))
        .catch((error) => alert('Submission failed', error));
    };

<form name="contact_us" data-netlify="true" onSubmit={handleSubmit}>
                                            <input type="hidden" name="form-name" value="contact_us" />
                                            <div className="row">
                                                <div className="col-md-6">
                                                    <div className="field-input">
                                                        <label htmlFor="first_name">First name*</label>
                                                        <input type="text" name="first_name" id="first_name" placeholder="Enter your first name" required />
                                                    </div>
                                                </div>
                                                <div className="col-md-6">
                                                    <div className="field-input">
                                                        <label htmlFor="last_name">Last name*</label>
                                                        <input type="text" name="last_name" id="last_name" placeholder="Enter your last name" required />
                                                    </div>
                                                </div>
                                                <div className="col-md-6">
                                                    <div className="field-input">
                                                        <label htmlFor="work_email">Email*</label>
                                                        <input type="email" name="work_email" id="work_email" placeholder="Enter your email" required />
                                                    </div>
                                                </div>
                                                <div className="col-md-6">
                                                    <div className="field-input">
                                                        <label htmlFor="phone_number">Phone number</label>
                                                        <input type="tel" name="phone_number" id="phone_number" placeholder="Enter your phone number" />
                                                    </div>
                                                </div>
                                                <div className="col-md-12">
                                                    <div className="field-input field-textarea">
                                                        <label htmlFor="message">Message*</label>
                                                        <textarea name="message" id="message" cols={30} rows={10} placeholder="Write your message" required></textarea>
                                                    </div>
                                                </div>
                                                <div className="col-md-12">
                                                    <div className="field-submit">
                                                        <input type="submit" value="Send Message" />
                                                    </div>
                                                </div>
                                            </div>
                                        </form>

Also, I am testing on branch deploy url: https://development--curatu-marketing.netlify.app/contact-us , does it matter? Will the form submission work there or I have to push it to PROD to test it?

Your help will be greatly appreciated.

[Melvin]

Hi @ancuratu,

Thanks for following up.

I have an example of a working Netlify form with Next.js 13 and the Netlify/Next.js v4.41.3 runtime:

MelvinPeepers/v4_next_form: Next.js site with a Netlify form and v4 (github.com)

The JS for the form can be found here:

https://github.com/MelvinPeepers/v4_next_form/blob/main/src/pages/index.js

The hidden .html file with the form is here:

https://github.com/MelvinPeepers/v4_next_form/blob/main/public/hidden-form.html

[ancuratu]

Hi @Melvin all the github links are going to 404.

[luke]

Hi, @ancuratu. The form isn’t working because no form is detected during the deploy. There is no form detected here:

Netlify App

Would you please send us a link to the pure-HTML form which exists before any client-side javascript is run? I ask because the page you linked to has no HTML form:

$ curl -s https://development--curatu-marketing.netlify.app/contact-us
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link data-next-font="size-adjust" rel="preconnect" href="/" crossorigin="anonymous"/><link rel="preload" href="/_next/static/css/8c828cd0b0f03f8d.css" as="style"/><link rel="stylesheet" href="/_next/static/css/8c828cd0b0f03f8d.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-57ae8c6ace9cabeb.js" defer=""></script><script src="/_next/static/chunks/framework-3671d8951bf44e4e.js" defer=""></script><script src="/_next/static/chunks/main-9b44649cdcc26382.js" defer=""></script><script src="/_next/static/chunks/pages/_app-5fe8fdbd907a4637.js" defer=""></script><script src="/_next/static/chunks/1664-e9ee23751e8c842f.js" defer=""></script><script src="/_next/static/chunks/3817-ba32d2cf4d1411a5.js" defer=""></script><script src="/_next/static/chunks/pages/contact-us-b6ffa5564b42933a.js" defer=""></script><script src="/_next/static/Z2KxUYQZ987JWmqqgyfzE/_buildManifest.js" defer=""></script><script src="/_next/static/Z2KxUYQZ987JWmqqgyfzE/_ssgManifest.js" defer=""></script></head><body><div id="__next"><div id="preload" class="preload"><div class="spin"></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/contact-us","query":{},"buildId":"Z2KxUYQZ987JWmqqgyfzE","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>

There isn’t a single <form> tag anywhere. Please start here:

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

Last reviewed April 2024 Please give these debugging tips a try before making a new post. If none of the suggestions work, please include the requested information that we request at the end of this guide in a 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: such as contact forms and sign-up forms. Seeing as there are many types of forms, im…

If nothing there helps, please send us these details:

1. The URL for your live form as you want visitors to use it
2. The URL of your deployed html form. In case you have a javascript form, we need to literally be linked to the html version you’ve deployed, as mentioned above (look for “pure javascript form”)
3. The form name that you’ve set and that shows in our UI (if it shows in the UI)
4. Any errors or logs from the Netlify build logs, dashboard or browser developer console
5. Description of anything you have tried that did or didn’t help or make things better/worse

It is item 2 above that is missing. (the “deployed html form”). If you fix that, the form should start working.

[ancuratu]

Thanks @luke adding static form in public folder works. Thank you all for your help and support.