My SvelteKit site's form only returns a 404

Support
1

https://super-faun-2e8158.netlify.app/

I’ve created a site with SvelteKit and added a Netlify form, but it only returns a 404.
The form appears in the site’s settings in Netlify, I have prerendering enabled in SvelteKit, the form fields all seem to be correct.

Can anyone tell me what’s going wrong?

Thanks!

2

Hello @197Max, thanks for the post and welcome.

If you haven’t already visited the Netlify blog post below, kindly visit in order to learn how to properly setup Netlify forms with SvelteKit.

Hope this helps.

Thanks.

1 Like
3

Hello!

Thanks for your reply.

Unfortunately I’ve already followed the steps in that post, and yet it’s still not working.

4

Hi @197Max, thanks for the feedback.
If possible can you share a code snippet of your form or the repository of your project containing the form for me to help with the debugging?

Thanks.

5

Here is the code for the form:

+page.svelte:

<form name="contact-me" method="POST" netlify>
	<label>Your Name: <input type="text" name="name" /></label>
	<label>Your Email: <input type="email" name="email" /></label>
	<label>Your Message: <textarea name="message"></textarea></label>
	<button type="submit">Send</button>
</form>

+page.js:

export const prerender = true
6

Hi @197Max, thanks for sharing the code snippet.

Kindly refactor your form to the code snippet below and then redeploy to see if it works.


<form name="contact-me" method="POST" data-netlify="true">
	<label for="name">Your Name:</label>
    <input type="text" name="name" id="name"/>

	<label for="email">Your Email:</label>
    <input type="email" name="email" id="email"/>

	<label for="message">Your Message:</label>
    <textarea name="message" id="message"></textarea>

	<button type="submit">Send</button>
</form>

Let me know the outcome.

Thanks.

7

Hi,

I just tried that and it’s still getting a 404.

8

Hi @197Max, thanks for the feedback.

Make sure you have installed the SvelteKit Netlify adapter if you haven’t done so already.

npm i -D @sveltejs/adapter-netlify

Also make sure you have registered the adapter in the svelte.config.js file.

If the above does not work or you have already done the suggestions above, kindly follow the link below to see if the suggestions there helps.
The post is similar to your question asked.

Thanks.

9

Netlify adapter is installed and registered in svelte.config.js, i’ve added the javascript from that example and it’s logging the success message to the console but still getting a 404 error and nothing is showing in the netlify dashboard

10

Hi @197Max, at this point its possible your issue would require further investigation from Netlify’s end.
I will report your issue to a Netlify Staff.
Thanks.

11

Hey @197Max ,

Can you try the following:

<form name="contact-me" method="POST" data-netlify="true">
  <input type="hidden" name="form-name" value="contact-me" />
	<label for="name">Your Name:</label>
    <input type="text" name="name" id="name"/>

	<label for="email">Your Email:</label>
    <input type="email" name="email" id="email"/>

	<label for="message">Your Message:</label>
    <textarea name="message" id="message"></textarea>

	<button type="submit">Send</button>
</form>
1 Like
12

Adding the hidden field has fixed it, the form is now working.
It’s strange because I’d done the same thing before and it didn’t make any difference.

Anyway, thanks for the help both! @clarnx @katrina-r

1 Like