---
title: "Easy HTML Forms in SvelteKit with Netlify Forms | Netlify"
description: "Forms are a necessary evil in web development. We may not want to deal with them, but sometimes we have to. Netlify makes this easy with built-in form handling."
source: "https://www.netlify.com/blog/easy-html-forms-in-sveltekit-with-netlify-forms/"
last_updated: "2026-07-01T05:18:50.000Z"
---
Forms are a necessary evil in web development. We may not want to deal with them, but sometimes we have to. Netlify makes this easy with [built-in form handling](https://www.netlify.com/products/forms/). This is done at build time by parsing static html files, with no extra API calls or server-side logic needed. These are standard **[HTML forms](https://docs.netlify.com/forms/setup/#html-forms)** with a data attribute for Netlify’s bots to detect it. We can utilize this great feature in new meta-frameworks like SvelteKit too by creating a prerendered route and using the HTML form. Let’s go through the steps to get your own Netlify form setup on SvelteKit.
| Updated for latest SvelteKit changes as of 8/22/22
## Setting up SvelteKit
To start up a new SvelteKit project, run `npm init svelte@next your-site-name` in a terminal where you want the directory to live. It’s important to mention that at the time of writing, SvelteKit is still in beta, meaning some things will probably change. The `@next` will be dropped when it hits an official 1.0. This command will prompt a command line interface, CLI, asking what things you want setup in your project. Step through the CLI, setting up your project with the Skeleton application. Once you hit enter on the last prompt, your new SvelteKit app is created and it prints a list of next steps.
1. `cd your-site-name`
2. `npm install` (or pnpm, or yarn, etc)
3. `git init && git add -A && git commit -m "Initial commit"` (optional)
4. `npm run dev -- --open` (or your package manager of choice)
5. To close the dev server, hit `Ctrl+C`
## Netlify Adapter
SvelteKit uses the concept of adapters to _adapt_ the application to the platform you are deploying to. For Netlify, we can use the `adapter-static` or `adapter-netlify`. The static adapter will prerender your entire site. The Netlify adapter gives you more flexibility by allowing you to decide how to render each route, including [putting them on the \*edge](https://www.netlify.com/blog/sveltekit-with-netlify-edge-functions/).\* For this demo, we’ll be using the `adapter-netlify`.
1. Install the adapter.
```
npm i -D @sveltejs/adapter-netlify
```
2. Open up the `svelte.config.js` file and edit the adapter import.
```
- import adapter from '@sveltejs/adapter-auto'+ import adapter from '@sveltejs/adapter-netlify'
```
### Netlify TOML files
Netlify uses a `netlify.toml` file to hold information about build, dev, and function configuration and setup. Create a `netlify.toml` file at the root of your SvelteKit site. Inside add the following build configurations.
```
[build] command = "npm run build" publish = "build/" functions = "functions/"
```
In SvelteKit, the `routes` directory is where the pages of your site live. A route file is created by adding a folder and prefixing the file with a `+`. The types of route files can be a `+page.svelte` and either a `+page.server.js` or a `+page.js` endpoint. The `+page.svelte` file is for the markup and the other files load the data into it and tell the page how to behave. The `+page.server.js` will only run on the server while the `+page.js` will run on the server and hydrate on the client. If you chose the skeleton project from the CLI, you will only have a `+page.svelte` file inside the routes directory as the `/` route. We’ll create a `+page.js` file beside it to prerender the home route.
```
export const prerender = true
```
Now over in the `+page.svelte` file we can add the markup for the Netlify form.
```
```
There is a lot to take in here, so let’s look at it line by line.
1. The form element has several attributes on it, name, method, netlify-honeypot, and data-netlify.
```