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

  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:

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

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 18 (13 by maintainers)

Commits related to this issue

Most upvoted comments

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

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

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