How to use SvelteKit with Netlify Forms (simple prerendered approach)

Netlify Forms were designed primarily for traditional static site generators like Hugo and Jekyll, using HTML crawling to initialize forms.

Hence, many JS framework users struggle to use them because the form needs to exist in HTML at build time but JS frameworks render them at runtime. SvelteKit introduces another wrinkle in that you have to decide whether to prerender the form.

JS framework users also often want to use AJAX to offer a better UX. So again you have to do things slightly differently than with pure HTML forms.

what i cover here is just the simplest solution to help people solve the immediate pain point. you can choose to leave your form hidden and render clientside, and you can also upload files and do progressive enhancement of behavior from HTML to JS. that's for another video if I ever get to it.

Resources:

[nathanielperry]

Been struggling for hours with this on the latest version of SvelteKit but I finally found the answer. Your video and blog post are a little outdated now. The "export const prerender = true;" now needs to be added to a +page.js file, not in the svelte file.

Hope this helps anyone watching this!

[Allformyequine]

This was a HUGE help to me thank you; it is hard sometimes to figure out when ‘things’ should be pre-rendered or not ~ so thank you!

[sortof.damocles]

I was able to fix one of my projects with this. Thank you!!

[ballinnickyc]

Nice, Svelte is great, the only frontend framework I've ever loved. What's your VSCode color scheme?

[Allformyequine]

Once the form is submitted and it is recognized inside of Netlify do you get the form in your email inbox also?

[masterkhoa]

hey swyx, I tried this today and it works but all my submissions are empty. can you help me?