Form and Gatsby - 404 on submit

{/* The form-name hidden field is required to support form submissions without JavaScript */}

doesn’t appear in the docs…

1 Like

Hi @anythingsomething , I just made a form submission on that page and I see it went through as expected. Are you still having trouble?

Also, the form-name is sent by default in html forms since we add it when we process the html form. You don’t need to provide a hidden attribute for it in those instances. If you use Javascript to submit the form then you can pass the value in to the submission using a hidden field, or you can just add it in your submission handler function, it’s up to you. We don’t have a specific case for it but it is in our javascript submission examples, like https://www.netlify.com/docs/form-handling/#spam-filtering and https://www.netlify.com/blog/2018/09/07/how-to-integrate-netlify-forms-in-a-vue-app/. And it’s also mentioned in our docs at https://www.netlify.com/docs/form-handling/#ajax-form-submissions under AJAX Submissions

Adding fixed the problem for me too. I’m not using JS. Only html.

2 Likes

Adding the hidden input worked for me too. I also have an html only form. I added the following:
<input type="hidden" name="form-name" value="contact" />

It would be great if this could make it into the docs.

1 Like

This is totally true:

<input type="hidden" name="form-name" value="name-of-form" />

Must be added in for HTML forms to work.

1 Like

Really need to update the docs or fix the underlying code.

Hmm, it is in the docs as Gerald mentioned (quote below with the link). Could you give us any advice on improving them in a way that would have made things more obvious to you when reading?

1 Like

I had similar symptoms of the form appearing in the Netlify backend, but no submissions were received due to a POST 404 error. Changing the fetch requests body encode method to a custom one dealt with the issue, and submissions were then received.

I used this method to encode the body:

    function param(object) {
        var encodedString = '';
        for (var prop in object) {
            if (object.hasOwnProperty(prop)) {
                if (encodedString.length > 0) {
                    encodedString += '&';
                }
                encodedString += encodeURI(prop + '=' + object[prop]);
            }
        }
        return encodedString;
    }

https://blog.garstasio.com/you-dont-need-jquery/ajax/

1 Like

thank you so much for sharing your solution, @illu!!

Hello guys I am actually coming across the same error. I’ve set it up just like the Netlify CMS Starter however I still get the 404 error when testing out the form on the live site.
Here is the link to the actual Site
And here is the Repo

I’m also getting a manifest.json which I cannot find a solution to online.

Any advice or solutions?

Hi there @fullspectrum, I just made a test submission on your site and I see the submission details on https://app.netlify.com/sites/federalrecoveryoperations/forms/5da75037a232f800088eb597. Did you resolve the issue you’re having?

I also recommend opening a separate topic for the problems with your manifest.json and provide more details there.

1 Like

@futuregerald Yes I resolved that issue thank you for replying and looking out. And I did make a separate topic for the manifest error. I am still looking for a solution on that end.

1 Like

Hello I am using this repo as an example:

but I am getting 404 on the request.

Is something wrong in this example?

1 Like

@jasmo2 can you please link to the live form so we can test it ourselves? Also is your repo public?

Is not public, But I solved it.
What happends is that I am using html.js in the project. SO I need to duplicated the form html here. This way it works

1 Like

The

<input type="hidden" name="form-name" value="name-of-form" />

Definitely did the trick.

I am getting a slightly different problem…

I built a site for a client and was working from a staging branch. The form submitted perfectly from the staging branch, but when I added a custom domain, the form no longer works and now throws a 404 when the form is submitted.

The code for the staging branch is identical to the production branch, but only the custom domain throws this error.

Hey @BrandonLeb,
Can you please share your Netlify URL and form code? Sounds like there may be a hard-coded POST path in there somewhere that only works from the staging URL?

Hello,

I’m having the same issue here.

The form is located at https://cn-photos.com/contact/

The redirection page is https://cn-photos.com/thank-you/ which works fine when accessed directly.

Testing locally it works fine. On the live site, when I submit, I get a 404 error: I briefly see the custom 404 page, but it gets quickly replaced by the /thank-you/ page. Submissions do not appear in the Netlify backend.

I use Gatsby.

Here are the request details:

Thanks a lot for you help! :pray:

Update: after changing the <form name=“Contact from”> in <form name=“contact-form”> I now get a 303 code on the thank-you page, but still no submissions.

hey there, just checking: did you see this guide already:

Hiya, sorry you are having trouble getting your forms to work.

This Support Guide is the first port of call to debug any forms issues. There are also many other Support Guides for forms - you can find them here: #Netlify-support:support-guides

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!

If you are still having problems, please provide more information such as what you have already tried, and a link to your live form. :slight_smile: