Hello,
I’ve added Netlify Form Submission to the contact section in my website but it’s not working. When i submit a form from the submit button there is no submission and no message of any error but inspecting the Console there is a 404 error. “Failed to load resource: the server responded with a status of 404” that links for this page https://vigorous-einstein-b90548.netlify.app/api/submit
My Netlify site name is https://vigorous-einstein-b90548.netlify.app/
My Git repo is GitHub - jamestagal/edtechdesigner: A professional blog site of Benjamin Waller
I have read and followed the docs Forms setup | Netlify Docs so not sure what else I should do… I would appreciate any help.
Regards,
Ben
Hey @jamestagal
There is nothing at this path, hence why a 404 is returned.
I’m curious about the build script in the package.json
$(cd deploy && rm -rf functions/api && cp -r ../functions/api/ functions/)
Firstly, I see no deploy directory. Is this directory created during another step of the build/deploy process?
After changing into the deploy directory, you are then removing functions/api then copying that directory from one level up to functions. Firstly I’m not sure why you are removing a directory then copying it in again. Secondly, unless there is some other copying going on during build, the submit.js in under themes/compendium/functions/api.
Also, by default functions are accessed via /.netlify/functions/<function-name> and if you wish to access them via a different path (e.g. /api/<function-name>) you need to add a rewrite rule in either a _redirects or netlify.toml file, neither of which I see in the repository.
If you are using a function to handle form submissions, then Netlify Forms isn’t going to work (i.e. submission aren’t going to show up in the Netlify UI.) Further to that, the submit.js function isn’t a valid Netlify Function. Judging the GEO lines (and the comments below) this is a Cloudflare function, and therefore will not work on Netlify without modification (you can see similar function examples here.)
Hi @coelmay
Thanks for your post and sorry for my delayed reply…
The site template I am using has been set up to deploy with a Cloudflare function that looks like this below but I didn’t have the deploy directory.
"build": "deploy/public",
deploy
|_ public # Plenti static output
|_ functions\api\submit.js # Cloudflare function
Below is from the theme developer.
So when my CI/CD process executes, the public and functions folders are in the same folder location and the output is placed there. This is what my build script is doing.
deploy
|_ public # Plenti static output
|_ .netlify\functions\submit.js # Netlify version of function
What Netlify wants by default is that the folder path deploy\netlify\functions\ contains the function logic when you pubish your site. I prefer to keep my deployment code separate from my development code, so:
- I created the
functions\api\submit.js file in my project root path
- I updated my
package.json with a “build” script to replace the function in the deploy folder with the development function code in my project root folder.
That way:
- whenever I want to test or develop changes to my function I run:
npm build
- I can delete my whole
deploy folder with anything in it and have a clean slate deployment without worrying about losing my development code
- I can ensure reproducible outcomes between development and production since my
deploy folder would be created from scratch locally, similar to what would happen in a CI/CD environment
So I am now in the process of rewriting the function logic for Netlify and the svelte component too.
Thanks for you help pointing me in the right direction.
Regards,
Ben
Hey there, @jamestagal 
Thanks so much for coming back and sharing all of these details! This will definitely help future Forums members who encounter something similar. We appreciate you taking the time!
Happy building 