Build SvelteKit Forms
Without the Boilerplate

Drag fields onto a canvas, configure them visually, click Export. Get a working SvelteKit route with Superforms + Zod — ready to commit.

schema.ts
import { z } from 'zod';

export const contactFormSchema = z.object({
  name: z.string().min(2, 'Name must be at least 2 characters'),
  email: z.string().email('Please enter a valid email'),
  message: z.string().min(10).max(500),
  subscribe: z.boolean().default(false),
});

export type ContactFormSchema = typeof contactFormSchema;

Generated from a 4-field contact form — zero boilerplate written by hand

13 Field Types

Text, email, password, number, textarea, select, radio, checkbox, date, file upload, and more.

Production-Ready Output

Generates idiomatic SvelteKit code with Superforms validation, Zod schemas, and server actions.

No Account Required

Everything runs in your browser. Your forms are saved locally. Export as zip or copy code.

Drag & Drop

Intuitive builder with live preview. Reorder fields, configure validation, set layouts visually.

Zod Validation

Type-safe schemas generated automatically. Required, min/max, patterns, custom error messages.

Starter Templates

Contact, signup, login, newsletter, survey — pick a template and export in under 60 seconds.

Read the integration guide or see how validation works.

The Free SvelteKit Form Builder

SvelteForms is a free, open-source Svelte form generator that outputs production-ready code. Unlike hosted form services, nothing goes through our servers — you get the source code and own it completely.

What Gets Exported

Every export from the SvelteKit form builder produces a complete route folder you can drop into any SvelteKit project:

  • schema.ts — A Zod validation schema with type exports. Works with Superforms v2 and can be reused in API routes, other forms, or anywhere you need the same validation rules.
  • +page.server.ts — A SvelteKit server action using Superforms' superValidate for server-side validation, with fail() error handling and message() success responses.
  • +page.svelte — A Svelte 5 component using superForm with client-side Zod validation, reactive error display, and a submit button with loading state.
  • README.md — Setup instructions including dependency installation and integration steps.

The generated code requires SvelteKit 2, Superforms v2, Svelte 5, and Zod 3. All Tailwind CSS classes use standard utilities — swap them for your own design system.

How It Works

1

Drag Fields

Pick from 13 field types and drop them onto the canvas.

2

Preview Live

See your form rendered in real-time. Toggle themes and layouts.

3

Export Code

Download a complete SvelteKit route folder with schema, component, and server action.

Ready to Skip the Boilerplate?

Free forever. No signup. No tracking cookies.

Start Building Now