Netlify Adapter: Netlify Forms don't work

Describe the bug Netlify Forms don’t work in a Svelte component if setup with this approach and using the Netlify adapter.

_Edit: For a workaround/fix see the comment below https://github.com/sveltejs/kit/issues/942#issuecomment-828726791_

To Reproduce

1. Setup a Netlify Form as described here and more specifically here:
   • Create a Netlify “form detection helper”. Something like:

     <!-- "/static/netlify-form-helper.html" -->
     <form name="test" netlify netlify-honeypot="bot-field" hidden>
         <input type="text" name="name" />
         <input type="email" name="email" />
         <textarea name="message"></textarea>
     </form>
     

   • Create the Svelte form component:

     <!-- "/src/routes/test-form.svelte" -->
     <form name="test" method="post" action="/success">
         <input type="hidden" name="form-name" value="test" />
         <input type="text" name="bot-field" />
         <p>
             <label>Your Name: <input type="text" name="name" /></label>
         </p>
         <p>
             <label>Your Email: <input type="email" name="email" /></label>
         </p>
         <p>
             <label>Message: <textarea name="message" /></label>
         </p>
         <p>
             <button type="submit">Send</button>
         </p>
     </form>
     

   • Ensure Netlify’s form processing is enabled.
2. If everything is setup correctly, Netlify should tell you that it detected a form named “test” for your site.
3. Now navigate to your https://example.tld/test-form and send a submission.
4. Even when taking care of all troubleshooting tips from here and here, neither verified nor spam submissions show up in Netlify’s form overview.

Expected behavior A form submission should be shown in Netlify’s form overview if submitted via my SvelteKit webapp.

Information about your SvelteKit Installation:

• @sveltejs/kit: next => 1.0.0-next.64
• @sveltejs/adapter-netlify => 1.0.0-next.4
• svelte: ^3.29.0 => 3.36.0
• vite: ^2.1.0 => 2.1.4

Severity Blocker, as Netlify’s simple form handling is one of the key benefits I’m using it for. However, right now I cannot use Netlify Forms with SvelteKit.

Additional context

• I tested all combinations of with/without honeypot field and success message.
• There is no problem when using Netlify Forms in a regular HTML file, e.g. via static adapter.
• I suspect that it might have something to do with https://github.com/sveltejs/kit/issues/930 ?!

[Blumed]

Recent update has changed how you did the svelteconfig.js @sw-yx

		prerender: {
			crawl: true,
			enabled: true,
			onError: 'continue',
			entries: ['*'],
		},

[kvn-shn]

So I played around with it a little more and can now definitely say that Netlify forms are not working out-of-the-box when using a custom success message. But I have good news as well: It’s working fine when prerendering the “success” page too!

TL;DR In the following a small conclusion…

How to make Netlify forms work in SvelteKit

1. Add the following to svelte.config.cjs (as described in @sw-yx blog post):

   prerender: {
       crawl: true,
       enabled: true,
       force: true,
       pages: ['*']
   }
   

2. Create your Netlify HTML form as described here, e.g. as /routes/contact.svelte. (Don’t forget to add the “form-name” input!)
3. Tell SvelteKit to prerender your contact.svelte page component by adding:

   <script context="module">
       export const prerender = true;
   </script>
   

4. If your Netlify form has a custom success message, e.g. something like <form name="contact" netlify method="POST" action="/success">, then:
   • Ensure /success points to a proper Svelte page component
   • In it add the same prerender hint as in step 3
5. That’s it! 😃

(This issue could even be closed now. Or should we add these steps to the readme?!)