kit: 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
- 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.
- Create a Netlify “form detection helper”. Something like:
- 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 ?!
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 18 (13 by maintainers)
Commits related to this issue
- docs: explain form handling using Netlify Adapter https://github.com/sveltejs/kit/issues/942#issuecomment-828726791 — committed to kvn-shn/svelte-kit by kvn-s 3 years ago
- docs: explain form handling using Netlify Adapter https://github.com/sveltejs/kit/issues/942#issuecomment-828726791 — committed to kvn-shn/svelte-kit by kvn-s 3 years ago
- docs: explain form handling using Netlify Adapter https://github.com/sveltejs/kit/issues/942#issuecomment-828726791 — committed to kvn-shn/svelte-kit by kvn-s 3 years ago
- docs: explain form handling using Netlify Adapter https://github.com/sveltejs/kit/issues/942#issuecomment-828726791 — committed to kvn-shn/svelte-kit by kvn-s 3 years ago
- https://github.com/sveltejs/kit/issues/942#issuecomment-828726791 — committed to travisboss/chilenosenmn-svelte by deleted user 3 years ago
- https://github.com/sveltejs/kit/issues/942#issuecomment-946288142 — committed to travisboss/chilenosenmn-svelte by deleted user 3 years ago
Recent update has changed how you did the
svelteconfig.js
@sw-yxSo 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
svelte.config.cjs
(as described in @sw-yx blog post):/routes/contact.svelte
. (Don’t forget to add the “form-name” input!)contact.svelte
page component by adding:<form name="contact" netlify method="POST" action="/success">
, then:/success
points to a proper Svelte page component(This issue could even be closed now. Or should we add these steps to the readme?!)
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