Home
Support Forums

404 when submitting form at pretty URL

Hi there,

I have a form (whittled down to just one field for testing purposes) that throws a 404 in the console and does not record a submission when submitted at the pretty URL:

https://stupefied-bhabha-c71d3f.netlify.app/work-with-us

If I submit the form at the URL with “.html”, there is no 404 in the console and the form submits correctly:

https://stupefied-bhabha-c71d3f.netlify.app/work-with-us.html

I have tried submitting the form with and without the “Pretty URLs” post-processing option enabled, and the result is the same each time.

I followed all of the steps in the support guide, but this is the only thing that has worked. For completeness though, here are the other steps I tried to resolve the issue:

  • Ensured each form field had a unique name
  • Ensured the form tag itself had a name
  • Made sure the form method was POST
  • Used real data so that the submission was not flagged as spam
  • Confirmed in the build log that the form and its fields were found

But again: if I access the page with an .html extension, everything works (at least with this single field).

Here are the items the support guide specifically requests:

The URL for your live form as you want visitors to use it

https://stupefied-bhabha-c71d3f.netlify.app/work-with-us

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

https://stupefied-bhabha-c71d3f.netlify.app/work-with-us

The form name that you’ve set and that shows in our UI

work-with-us

Any errors or logs from the Netlify build logs, dashboard or browser developer console

404 in the browser console on submit (i.e., work-with-us:1 POST https://stupefied-bhabha-c71d3f.netlify.app/work-with-us 404

Description of anything you have tried that did or didn’t help or make things better/worse

Included in the above

A final note that the site is behind a global password set using Netlify’s Access Control options. That can be removed temporarily if needed.

Thank you.

Hi @echopaul,

This is interesting. This is the list of files that I can see exist in your latest deploy:

Files
/_redirects
/netlify.toml
/readme.md
/favicon.ico
/404.html
/sitemap.xml
/case-studies.html
/index-old.html
/homepage.html
/results.html
/privacy-policy.html
/_nuxt/8228f98.js
/_nuxt/c50e208.js
/_nuxt/fd9d001.js
/_nuxt/a526ba6.js
/_nuxt/licenses
/_nuxt/79ff73f.js
/_nuxt/b4cc2ab.js
/_nuxt/e474daf.js
/_nuxt/4e8dc5a.js
/_nuxt/55ced20.js
/_nuxt/219e8d3.js
/_nuxt/b028771.js
/_nuxt/9a546a4.js
/_nuxt/49b546c.js
/_nuxt/6fbaf39.js
/_nuxt/3ba8687.js
/_nuxt/9c0cb6c.js
/_nuxt/b6bee4d.js
/_nuxt/9f821ae.js
/_nuxt/65caa5d.js
/_nuxt/1641962.js
/_nuxt/ea65543.js
/_nuxt/1855b2b.js
/_nuxt/78fa782.js
/_nuxt/505d959.js
/_nuxt/a5d6a0c.js
/_nuxt/0fc4dd6.js
/_nuxt/7b56fb6.js
/_nuxt/b428745.js
/_nuxt/2d7d6d8.js
/_nuxt/76d6625.js
/_nuxt/e823bb7.js
/_nuxt/437f950.js
/_nuxt/d6fb45f.js
/_nuxt/ccc757b.js
/_nuxt/5e69dcf.js
/_nuxt/440dd5d.js
/_nuxt/4248a27.js
/_nuxt/f11e367.js
/_nuxt/76add9b.js
/_nuxt/941da1b.js
/_nuxt/6f11c89.js
/_nuxt/0ad1987.js
/_nuxt/595b428.js
/_nuxt/d72e699.js
/_nuxt/6cfa3f8.js
/_nuxt/55e0392.js
/_nuxt/5925682.js
/_nuxt/6636447.js
/_nuxt/e19331e.js
/_nuxt/5e7e663.js
/_nuxt/6a047e3.js
/_nuxt/e7882e4.js
/_nuxt/aaf4e0b.js
/_nuxt/65fe1c7.js
/_nuxt/b97440b.js
/_nuxt/1b43122.js
/_nuxt/c6ed800.js
/_nuxt/20cd642.js
/_nuxt/908161f.js
/_nuxt/49632e5.js
/_nuxt/4018578.js
/_nuxt/bde5e25.js
/_nuxt/2cfd080.js
/_nuxt/260ae4a.js
/_nuxt/a22d13d.js
/_nuxt/97e4d5c.js
/_nuxt/ea46f55.js
/_nuxt/8d83d83.js
/_nuxt/d325b1c.js
/_nuxt/e6d7613.js
/_nuxt/68d062b.js
/_nuxt/44410c0.js
/_nuxt/ccc48ab.js
/_nuxt/357f9d8.js
/_nuxt/c11b2f0.js
/_nuxt/f63d3e7.js
/_nuxt/1797052.js
/_nuxt/af6f242.js
/_nuxt/28712ad.js
/_nuxt/2d3e773.js
/_nuxt/b7180bc.js
/_nuxt/62007e7.js
/_nuxt/035ac5a.js
/_nuxt/5fbebe2.js
/_nuxt/9a85b37.js
/_nuxt/6ef17a1.js
/_nuxt/static/1633455311/manifest.js
/_nuxt/static/1633455311/index-old/payload.js
/_nuxt/static/1633455311/index-old/state.js
/_nuxt/static/1633455311/homepage/payload.js
/_nuxt/static/1633455311/homepage/state.js
/_nuxt/static/1633455311/about-us/mission/payload.js
/_nuxt/static/1633455311/about-us/mission/state.js
/_nuxt/static/1633455311/about-us/mission/theory-change/payload.js
/_nuxt/static/1633455311/about-us/mission/theory-change/state.js
/_nuxt/static/1633455311/about-us/mission/history/payload.js
/_nuxt/static/1633455311/about-us/mission/history/state.js
/_nuxt/static/1633455311/about-us/team/payload.js
/_nuxt/static/1633455311/about-us/team/state.js
/_nuxt/static/1633455311/bio/echoco-family/payload.js
/_nuxt/static/1633455311/bio/echoco-family/state.js
/_nuxt/static/1633455311/bio/lauren-robbins/payload.js
/_nuxt/static/1633455311/bio/lauren-robbins/state.js
/_nuxt/static/1633455311/bio/mark-archibald/payload.js
/_nuxt/static/1633455311/bio/mark-archibald/state.js
/_nuxt/static/1633455311/bio/issa-chan/payload.js
/_nuxt/static/1633455311/bio/issa-chan/state.js
/_nuxt/static/1633455311/bio/kimiko-tanaka-vecchione/payload.js
/_nuxt/static/1633455311/bio/kimiko-tanaka-vecchione/state.js
/_nuxt/static/1633455311/bio/chrissy-guertin/payload.js
/_nuxt/static/1633455311/bio/chrissy-guertin/state.js
/_nuxt/static/1633455311/bio/eboni-brown/payload.js
/_nuxt/static/1633455311/bio/eboni-brown/state.js
/_nuxt/static/1633455311/bio/qudsia-aziz/payload.js
/_nuxt/static/1633455311/bio/qudsia-aziz/state.js
/_nuxt/static/1633455311/bio/paul-venuti/payload.js
/_nuxt/static/1633455311/bio/paul-venuti/state.js
/_nuxt/static/1633455311/bio/anna-kassinger/payload.js
/_nuxt/static/1633455311/bio/anna-kassinger/state.js
/_nuxt/static/1633455311/bio/bill-brown/payload.js
/_nuxt/static/1633455311/bio/bill-brown/state.js
/_nuxt/static/1633455311/bio/neal-maher/payload.js
/_nuxt/static/1633455311/bio/neal-maher/state.js
/_nuxt/static/1633455311/bio/peter-sax/payload.js
/_nuxt/static/1633455311/bio/peter-sax/state.js
/_nuxt/static/1633455311/bio/graziella-jackson/payload.js
/_nuxt/static/1633455311/bio/graziella-jackson/state.js
/_nuxt/static/1633455311/privacy-policy/payload.js
/_nuxt/static/1633455311/privacy-policy/state.js
/_nuxt/static/1633455311/case-study/bowery-residents-committee/payload.js
/_nuxt/static/1633455311/case-study/bowery-residents-committee/state.js
/_nuxt/static/1633455311/case-study/brightfocus-foundation/payload.js
/_nuxt/static/1633455311/case-study/brightfocus-foundation/state.js
/_nuxt/static/1633455311/case-study/newseumed/payload.js
/_nuxt/static/1633455311/case-study/newseumed/state.js
/_nuxt/static/1633455311/case-study/boston-college-city-connects/payload.js
/_nuxt/static/1633455311/case-study/boston-college-city-connects/state.js
/_nuxt/static/1633455311/case-study/national-education-association/payload.js
/_nuxt/static/1633455311/case-study/national-education-association/state.js
/_nuxt/static/1633455311/story/test-story-four/payload.js
/_nuxt/static/1633455311/story/test-story-four/state.js
/_nuxt/static/1633455311/story/test-story-two/payload.js
/_nuxt/static/1633455311/story/test-story-two/state.js
/_nuxt/static/1633455311/story/test-story-three/payload.js
/_nuxt/static/1633455311/story/test-story-three/state.js
/_nuxt/static/1633455311/story/test-story-one/payload.js
/_nuxt/static/1633455311/story/test-story-one/state.js
/_nuxt/static/1633455311/detail/test-detail-one/payload.js
/_nuxt/static/1633455311/detail/test-detail-one/state.js
/_nuxt/static/1633455311/detail/test-detail-two/payload.js
/_nuxt/static/1633455311/detail/test-detail-two/state.js
/_nuxt/static/1633455311/the-latest/thinking/payload.js
/_nuxt/static/1633455311/the-latest/thinking/state.js
/_nuxt/static/1633455311/results/payload.js
/_nuxt/static/1633455311/results/state.js
/_nuxt/static/1633455311/case-studies/state.js
/_nuxt/static/1633455311/users/peter-sax/state.js
/_nuxt/static/1633455311/users/bill-brown/state.js
/_nuxt/static/1633455311/users/neal-maher/state.js
/_nuxt/static/1633455311/users/nick-vadala/state.js
/_nuxt/static/1633455311/users/paul-venuti/state.js
/_nuxt/static/1633455311/users/lauren-robbins/state.js
/_nuxt/static/1633455311/users/mark-archibald/state.js
/_nuxt/static/1633455311/users/graziella-jackson/state.js
/_nuxt/img/facebook.52595a6.svg
/_nuxt/img/1.439bf48.svg
/_nuxt/img/circle_1.5efe4ae.svg
/_nuxt/img/twitter.24a4b35.svg
/_nuxt/img/twitter-gold.32a3d33.svg
/_nuxt/img/lines_1.c3fea19.svg
/_nuxt/img/wiggly-arrow.a96c0f8.svg
/_nuxt/img/2.5279851.svg
/_nuxt/img/email-gold.90ad703.svg
/_nuxt/img/3.bfeff1b.svg
/_nuxt/img/4.defa228.svg
/_nuxt/img/instagram.ecaf273.svg
/_nuxt/img/instagram-gold.3112379.svg
/_nuxt/img/ditto.cd42718.svg
/_nuxt/img/dot-grid_1.7646c17.svg
/_nuxt/img/b-corp-logo.51e418d.svg
/_nuxt/img/b-corp-logo-white.fb5537d.svg
/_nuxt/img/texture_1.fa3f324.svg
/_nuxt/fonts/biro-webfont.36a1aa8.woff2
/_nuxt/fonts/biro-webfont.dd238e8.woff
/_nuxt/fonts/hack-regular.d569415.woff2
/_nuxt/fonts/hack-bold.0b3811d.woff2
/_nuxt/fonts/hack-italic.23d1ed9.woff2
/_nuxt/fonts/hack-bolditalic.f93c333.woff2
/_nuxt/fonts/hack-regular.132527c.woff
/_nuxt/fonts/hack-bold.fdea859.woff
/_nuxt/fonts/hack-italic.8ec888a.woff
/_nuxt/fonts/hack-bolditalic.d4a48f0.woff
/js/gtm.js
/users/peter-sax.html
/users/bill-brown.html
/users/neal-maher.html
/users/nick-vadala.html
/users/paul-venuti.html
/users/lauren-robbins.html
/users/mark-archibald.html
/users/graziella-jackson.html
/about-us/mission.html
/about-us/team.html
/about-us/mission/theory-change.html
/about-us/mission/history.html
/story/test-story-four.html
/story/test-story-one.html
/story/test-story-three.html
/story/test-story-two.html
/detail/test-detail-one.html
/detail/test-detail-two.html
/bio/mark-archibald.html
/bio/lauren-robbins.html
/bio/issa-chan.html
/bio/kimiko-tanaka-vecchione.html
/bio/echoco-family.html
/bio/chrissy-guertin.html
/bio/eboni-brown.html
/bio/neal-maher.html
/bio/paul-venuti.html
/bio/anna-kassinger.html
/bio/qudsia-aziz.html
/bio/bill-brown.html
/bio/peter-sax.html
/bio/graziella-jackson.html
/case-study/bowery-residents-committee.html
/case-study/brightfocus-foundation.html
/case-study/newseumed.html
/case-study/boston-college-city-connects.html
/case-study/national-education-association.html
/the-latest/thinking.html

I’m not seeing work-with-us anywhere in that. Does the page really exist or is it rendered dynamically?

On a side note, I think you can post the form to / and it would still work.

Hi Hrishikesh,

I checked the build log for that deploy, and there are several axios-related errors. It looks to me like there was a problem communicating with the API endpoint that ended up preventing some of the pages from being built, including the form. If you check any other deploys, you will see the form.

Speaking of which: I set the form’s action to “/” as you suggested, but I still end up with a 404. You can see that in this deploy:

https://615ddbb755a77a0008c06a73--stupefied-bhabha-c71d3f.netlify.app/work-with-us

I also tried setting the action to “/work-with-us”, but that also returns a 404 on submit.

https://615dde4ff19d0f0007d60aee--stupefied-bhabha-c71d3f.netlify.app/work-with-us

(Note that you will receive an error page after submitting as the API does not allow CORS requests from anything other than the main URL. But you should still see the 404 in the console.)

Do you have any other ideas?

Thank you,
Paul

I can see something strange in here this deploy. The data being sent is this:

Full-name=test+name&submit=

image

I believe that extra input from somewhere is causing problems? Not sure why it even exists, honestly.

Hi Hrishikesh,

I had given the submit button a “name” attribute. I removed it, but that didn’t solve the problem. I also removed the action to see if that was causing a problem, but it still returns a 404 on submit.

Here is the form data:

Here is the latest page:

https://stupefied-bhabha-c71d3f.netlify.app/work-with-us

Thanks,
Paul

Another thing that I’m noticing that is that, the form name is not being sent in the request. Here’s a form data that works:

image

Here’s yours:

image

I don’t know why your submission doesn’t have the name field in it. Do you have any idea?

Hi Hrishikesh,

I was finally able to get this to work by manually adding the hidden form-name field to just before the closing </form> tag.

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

I’m not sure why this was necessary – according to the deploy log, Netlify did find the form, and looking at the source code, the hidden element was there at the top of the form.

Thanks for your help!