Netlify Adapter: Netlify Forms don't work

kvn-shn commented 3 years ago

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

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.

If everything is setup correctly, Netlify should tell you that it detected a form named "test" for your site.
Now navigate to your https://example.tld/test-form and send a submission.
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 ?!

swyxio commented 3 years ago

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 commented 3 years ago

To be honest I don't exactly know how to proceed here. Is maybe https://github.com/sveltejs/kit/issues/1046 related? Any suggestions what the actual issue is and how to fix it?

swyxio commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

repro repo would help

kvn-shn commented 3 years ago

@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 commented 3 years ago

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

kvn-shn commented 3 years ago

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 commented 3 years ago

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

kvn-shn commented 3 years ago

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

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

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

Create your Netlify HTML form as described here, e.g. as /routes/contact.svelte. (Don't forget to add the "form-name" input!)
Tell SvelteKit to prerender your contact.svelte page component by adding:
```
<script context="module">
    export const prerender = true;
</script>
```
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
That's it! :)

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

kvn-shn commented 3 years ago

I created a PR basically adding the above comment https://github.com/sveltejs/kit/issues/942#issuecomment-828726791 to the Netlify Adapter's readme as I think it makes sense to explain it more prominently: https://github.com/sveltejs/kit/pull/1481

kvn-shn commented 3 years ago

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

Blumed commented 2 years ago

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

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

swyxio commented 2 years ago

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

ilkkanisula commented 2 years ago

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

Blumed commented 2 years ago

@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.

sveltejs / kit

Netlify Adapter: Netlify Forms don't work #942

How to make Netlify forms work in SvelteKit