Unrivaled support for Next.js apps with zero configuration. See the difference

Guides & Tutorials

Easy HTML Forms in SvelteKit with Netlify Forms

Guides & Tutorials

Easy HTML Forms in SvelteKit with Netlify Forms

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. 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 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.

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. They are pretty self explanatory, but let’s go through each one.

  1. Which Svelte app template? Choose the Skeleton project.
    1. SvelteKit demo app - A todo list app showcasing some of the features of SvelteKit.
    2. Skeleton project - Barebones scaffolding for you new SvelteKit app.
  2. Add type checking with TypeScript? This is a personal decision, I setup TypeScript with mine.
    1. Yes, using JavaScript with JSDoc comments
    2. Yes, using TypeScript syntax
    3. No
  3. Add ESLint for code linting? No / Yes Again, this is personal preference, I said yes.
  4. Add Prettier for code formatting? No / Yes And again personal preference, I said yes also.
  5. Add Playwright for browser testing? No / Yes You can set this up if you would like, I said no.

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.* 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-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 are where any pages of your site live. If you chose the skeleton project from the cli, you will only have an index.svelte file inside the routes directory. Open the index.svelte file and remove anything inside. Starting from a blank file, at the top, we will add the line to prerender this route.

<script context="module">
export const prerender = true
</script>

The context="module" is important, this tells SvelteKit to run this before anything on the page is rendered and will build this page statically with the export const prerender = true. Then, below the </script> tag, we can add the markup for the Netlify form.

<form name="netlify-form-example" method="POST" netlify-honeypot="bot-field" data-netlify="true">
<input type="hidden" name="form-name" value="netlify-form-example" />
<label for="name">Name</label>
<input name="name" id="name" required placeholder="Name" type="text" />
<label for="email">Email</label>
<input name="email" id="email" required placeholder="Email" type="email" />
<label for="message">Message</label>
<input name="message" id="message" required placeholder="Message" type="text" />
<input type="submit" value="Submit" />
</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.

    <form name="netlify-form-example" method="POST" netlify-honeypot="bot-field" data-netlify="true">
    1. The name can be whatever you want to call your form and will be what you see in your Netlify dashboard once the form is deployed.
    2. The method must be "POST" to allow it to post to Netlify’s servers.
    3. The netlify-honeypot attribute is optional, but will attempt to catch bots and filter them out.
    4. The data-netlify="true" is the secret sauce. This is what Netlify’s bots will look for when crawling the static output of your site.
  2. The hidden input element is the other piece of magic for Netlify to detect the form correctly

    <input type="hidden" name="form-name" value="netlify-form-example" />
    1. The type="hidden" attribute ensures it isn’t seen by visual users or screen readers.
    2. The name="form-name" must be kept as is. Do NOT change the name to your actual form name.
    3. The value attribute is where you match the name of your form up to the input. Whatever value you set the form name attribute to is what should be set to value in the hidden input field.

    All the other inputs in the form are any valid HTML inputs that you would use in a regular form to get data from your user.

Deploy to Netlify

Now that the form is setup and is ready to be deployed to Netlify, we can finish the steps to deploy the site. If you are not already a Netlify user, go ahead and sign up for free.

Git Setup

If you didn’t setup the git init in the SvelteKit setup, now is the time to put your site on your favorite git provider.

git init && git add -A && git commit -m "Initial commit"
  1. Create a repository, either using the CLI or by going directly to github.com. Link the new repository to your local site by copying the URL.

Arrow pointing to copy button on repository url

  1. Run the command to add the remote origin pasting your URL at the end.

    git remote add origin https://github.com/brittneypostma/sveltekit-netlify-forms
  2. Push your code to GitHub using the current branch, which is typically main.

    git push origin main

Link to Netlify

Now that the site is on a git provider, head to your Netlify dashboard.

  1. Click on the Add new site button that drops down and click on Import an existing project.

Add new site button clicked pointing to Import an existing project.

  1. Choose your Git provider.

Import an existing project from a Git repository. Connect to Git provider

  1. Use the search box to find your repo.

Pick a repository from GitHub - sveltekit-netlify-forms searched

  1. Since we set up a netlify.toml earlier, the build settings should populate automatically. So just click the Deploy site button and Netlify’s robots will start building your site.

Checking the form

Once the site is deployed, head to your site URL. Fill in the form and click the Submit button.

Info filled into a form

When the form is submitted successfully, you will be redirected to a Netlify page that says your form submission has been received.

Thank you! Your form submission has been received. Back to our site.

Back in your Netlify dashboard, click on the Forms tab,

Forms tab in Netlify - 1 form collecting data

Down below the this forms sections will be a list of active forms with the names you set in your HTML.

Active forms - netlify-form-example

Click into the form to see your submission.

Submissions from netlify-form-example with a Verified submission listed

And that is it, no backend logic or complicated API calls, just straightforward form management with a pure HTML form. Happy form making!

Keep reading

Recent posts

Book cover with the title Deliver web project 10 times faster with Jamstack enterprise

Deliver web projects 10× faster

Get the whitepaper