As the title says, I’m building a pretty simple site using Astro and Svelte, that is in SSR mode (to pull blog entries from a Xata db). I’ve had no problem setting up and using Netlify forms on a few other non-SSR sites … but now the exact same code is extremely complex to get working
I’ve spent most of the afternoon looking at documentation and this support forum, and have implemented a few different things:
I couldn’t get Netlify to recognize the form at all until I put a static .html copy in the /public folder
I’ve added the <input type="hidden" name="form-name" value="contact"> to both versions of the form (the one in /public, and the actual page, in /src/pages/contact.astro
the .html version that lives in the public folder works, but am I really expected to link to that file? It won’t pull in any build updates, so if I do something like update the footer, am I supposed to manually copy the generated code in the browser that is at /contact, which would now not be linked to from anywhere, because the menu links would actually go to the /public version … ack, I can’t even describe it with out falling into a pit of confusion
I would like everything to happen in the /contact (/src/pages/contact.astro) file, but that file does not seem to actually be connected to the Netlify form detection in any way, even though it has the same name value, as outlined in the documentation.
It may be simple by Astro & Svelte standards, but obviously there’s a lot of code ‘behind the scenes’.
A truly simple site would be plain HTML, which is what Netlify Forms was originally conceived to work with.
Yes, although it’s not due to Netlify Forms, which while far from perfect, remains unchanged.
Many of the systems utilizing SSR could be described as “sitting in front of Netlify’s default handling”, and when that’s the case they effectively break it.
The crux of it is to make sure you have an actually static form file, (not a file that may appear static but is really being served by some ‘magically generated function powered middleware’), such that the file is detected by Netlify during the post build processing, and that you can POST to that route so that Netlify’s default handling actually catches the request.
I’ll take a look at your form now and see if I can spot what might be wrong.
@nathanmartin great, thank you so much for your timely assistance!
My confusion lies around the fact that the form code lives on the “page” already, in as much as it’s the same path (/src/pages/contact.astro) that works on a non-SSR Astro site … but I will freely admit that I have very little understanding of what changes once you enable SSR mode.
I bet you’ll find that submission in your Netlify UI.
I don’t know for certain, but there’s a chance that while /contact may seem to be a “static page” as far as Astro is concerned, it may not be a traditional “static page” (actually on the CDN and served by Netlify’s default handling).
You should adjust your form to POST to /netlifyneedsthis.html and see what happens.
@hitchless Don’t get ahead of yourself, while it works it isn’t necessarily what you actually want for your final solution.
I can address your other concerns from your original post.
I just wanted you to first “see what works”, so that you (and anyone else that encounters this thread), can actually understand what is occurring.
What you’ve done there works purely because the file that the POST is being made to actually exists in a place where Netlify’s default handling (and thus the forms handling) takes effect.
When you POST to a route that isn’t running on that, for example something that may be running via an automatically generated function to facilitate SSR via a framework like Astro or Next, then that Netlify handling never occurs.
So to solve for that limitation what you want to do is:
Submit your form via AJAX
Submit the form to the truly ‘static’ form route that is handled by Netlify
Redirect the user to your actual ‘success’ page that can be handled by Astro
Hey, Product Manager at Netlify here, working on web framework support as part of my work
I want to emphasize a few things:
The file in public/ doesn’t need any styling, or any extra HTML besides the form tags (footer etc.)! it should only include the form tags and the inputs. This is for Netlify to detect form & field names during the build, and to provide a target static file for form submissions using AJAX. The end user does not see this form at all, and never navigates to it.
What the user sees and interacts with is your “actual” pages and components. Submission should be as an XHR (fetch) request, and then you decide whether to stay on the same page and show some indication of success, or to navigate to a dedicated success page.
The above is exactly how the Next.js example works (live demo and code), and it’s very very similar in that regards.
It’s somewhat irrelevant that it be “that static html file”, you’re really just talking about Netlify Forms, so that documentation is what you would read.
