Form and Gatsby - 404 on submit

Hello, I’m trying to run the basic example for forms like stated in the docs.

It shows up in the dashboard, but when I click submit, it POSTs to the same url, and gets a 404. The form is here.

There’s nothing special about the html, so I can’t figure out why it doesn’t work

Do you try something like <form name="send-place" action="/send-place" method="POST" enctype="multipart/form-data"> ?

2 Likes

You can find a working, gatsby compatible version in the gatsby-starter-netlifycms repo

1 Like

thanks @zltnvrs! appreciate the help!

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

doesn’t appear in the docs…

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.

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?

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