And welcome to the forums
For starters, what is “the BE”? That’s the second time I’ve seen “BE” in the forums in the last couple of days but I have no idea what it stands for
netlify tag and no
That workflow and discrepancy is specifically why I wrote react-ssg-netlify-forms, a React library for making Netlify forms “just work” the way you’re wanting them to with Sapper. Personally I don’t know a lick of Svelte and honestly didn’t know that Svelte also had this kind of server/hydrate premise yet, but neat!
We can see what’s going on here by checking out the HTML file contents that Netlify delivers before Svelte spins up in the browser and starts playing with the DOM in two ways. First, we can just query your site on command line and see what the raw content back contains:
$> http https://fix-form--evergreen-fitness.netlify.app/contact/
lots of other stuff....
<form action='POST' class='svelte-13hcb2f' name='Contact Form' method='post'><input type='hidden' name='form-name' value='Contact Form' />
....lots of other stuff
Good! That means that the Netlify Form scanner did its job and correctly injected the
form-name while removing the
That’ll do it.
Short of writing a library that does a similar job as mine, just for Svelte, the easiest and quickest way to fix this problem and get your forms working is to just add the
<input type='hidden' name='form-name' value='Contact Form' /> to the form code you wrote in Svelte. I know that may seem counter-intuitive and/or overkill, but that’s the simplest way to make sure that the
form-name parameter is present when the page is loaded via JS. That form field not being present in the submission is almost certainly what’s causing your 404 — Netlify gets this form POST but has no idea what Form it goes to
Hope that helps!