Forms silently failing with SvelteKit

Support
1

I’ve got this page that has a form in it that I’m trying to make work with Netlify Forms. The site is built with SvelteKIt using the Netlify Adapter.

I’ve tried just about every possible combination of files and settings that I could think of, but none of it seems to work. I can see that Netlify detects my form from the build logs, and hitting “send” doesn’t result in an error. It just seems like the request is just dissapearing into the ether.

The currently built layout is:

  • A form.html file in my public directory. This is getting picked up by Netlify
<form style="display: none" name="contact" method="post" netlify-honeypot="botnet" data-netlify="true" netlify>
  <input type="hidden" name="form-name" value="contact" />
  <input type="hidden" name="botnet">

  <input type="email" name="email">
  <textarea name="message" ></textarea>
</form>
  • SvelteKit is prerendering every route, though I’ve also tried disabling prerendering to the same results.
  • My actual contact.svelte route looks like this (note that it’s AJAX but for now I’m not modifying my DOM at all since I’m trying to test this out)
<form name="contact" method="post" data-netlify="true" data-netlif-bot-field="botnet" netlify>
  <label for="email">Email</label>
  <input name="email" type="email" id="email" placeholder="Email Address" bind:value={form.email}>

  <label for="message">Message</label>
  <textarea name="message" id="message" placeholder="What Did You Want To Discuss With Me?" bind:value={form.message}></textarea>

  <button type="submit" on:click|preventDefault={sendForm}>Send</button>
</form>

<script>
  export let form = {
    email: "",
    message: ""
  };

  function encode(data) {
    return Object.keys(data)
      .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key])).join("&")
  }

  export function sendForm() {
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({
        "form-name": "contact",
        ...form
      })
    }).then((response) => { console.log("response:", response ) })
    .catch((error) => { console.log("error:", error) })
  }
</script>

I’m just at a loss as to what I should do. I have an older version of this identical page running on Nuxt (you can see that here) that works fine, which makes me believe it must be Svelte… But what??? And what can I do about it??

2

Hi @Sensanaty,

I believe it’s because of the redirect rule that you’ve. It’s capturing all routes (/*) and sending it to a rendering function. You need to have a static HTML page to receive the submissions.

This thread talks about it in more detail (I’ve linked to the exact section that’s relevant in your case):