Netlify Adapter: Netlify Forms don't work

[kvn-shn]

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 #942 (comment)

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 Netlify Adapter: Custom redirects not working #930 ?!

[swyxio]

honestly, this would all go away if Netlify relied less on autodetection and made it easy to declare forms in the UI. perhaps feedback for @bencodezen

[kvn-shn]

To be honest I don't exactly know how to proceed here. Is maybe #1046 related? Any suggestions what the actual issue is and how to fix it?

[swyxio]

sorry i know it must be frustrating. bottomline is the html form must exist at render time for Netlify to detect it (aka not rendered later only in clientside, or in a serverless function). have you ensured that that happens? if we had a nice repro repo i could probably look into fixing for you

[rthinkel]

I'm also having this issue with Netlify: previously working forms are no longer being detected during the build/deploy process. The forms are still listed in the "forms" section of my site control panel, yet do no work.

[swyxio]

hey @kvn-shn @rohiaudio i got it working, check this and see if it helps https://github.com/sw-yx/sveltekitnetlifyforms

recorded 9 min video tutorial https://www.youtube.com/watch?v=cj3f2Xth5Mk

blog version https://dev.to/swyx/how-to-use-sveltekit-with-netlify-forms-5gmj

[ishanloya]

@sw-yx Thanks! I tried to set prerender to true and this led to the form at least being detected by Netlify. However, if I turn on Netlify's captcha integration, the captch box briefly appears on screen and then disappears upon hydration. If I turn hydration to false, the captcha box shows up and stays but then my custom handleSubmit function doesn't work anymore.

[swyxio]

repro repo would help

[kvn-shn]

@sw-yx, thanks for looking into it.

So basically I added the prerender step to the Svelte config, added the export const prerender = true to my form's page and removed the Netlify "helper form" ...unfortunately nothing changed. I'm just having a honeypot field as in your example, a custom subject field) and custom success message via something like action="/success" (see first post).

But -- story is not over yet ;) -- then I also removed the form's action="/success" and suddenly it worked. Awesome!

Now I would just like to know why the action is messing something up here and how we can have a custom success message for our Svelte forms too. Any ideas?

[swyxio]

the action attribute navigates to a page, but you probably dont have that page set up

[kvn-shn]

I have the page set up of course. Else I'd probably get a 404 from Svelte but simply nothing is happening.

Could you try it out with your example repo if the action is working for you? I guess Svelte (or Netlify?) is messing something up with the "URL that processes the form submission" (according to MDN).

[swyxio]

realistically i probably wont get to it sorry. feel free to modify my code to do it

[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?!)

[kvn-shn]

I created a PR basically adding the above comment #942 (comment) to the Netlify Adapter's readme as I think it makes sense to explain it more prominently: #1481

[kvn-shn]

Thanks for merging, @benmccann. I'll close this issue then.

[Blumed]

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

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

[swyxio]

@Blumed sorry i didnt see that - thank you, hope the readme was also updated, i havent been watching that closely

[ilkkanisula]

I followed these instructions and cannot svelte to render form as prerendered page. I used static adapter and netlify adapters with same results.

[Blumed]

@ilkkanisula Are you able to post your repo or a replica? I can try and take a look at it. My update I was using these versions: @sveltejs/adapter-netlify: 1.0.0-next.31 @sveltejs/kit: 1.0.0-next.193. Might help to see what changes might have happened since the versions I used.