Integration Guide

Prerequisites

You need a SvelteKit project with these dependencies:

pnpm add sveltekit-superforms zod

Step 1: Export Your Form

In the builder, click Export then Download .zip. You'll get a folder with:

• schema.ts — Zod validation schema
• +page.server.ts — Server-side validation and form action
• +page.svelte — Form component with client validation
• README.md — Quick reference

Step 2: Add to Your Project

Copy the exported folder into your src/routes/ directory:

cp -r my-form/ src/routes/my-form/

Step 3: Handle Submissions

Edit the actions.default handler in +page.server.ts:

// In +page.server.ts, replace the TODO comment:
await db.insert(submissions).values(form.data);
// or
await sendEmail(form.data.email, form.data.message);

Step 4: Customize Styling

The generated code uses plain Tailwind classes. Modify them to match your design system, or replace with your own component library.

Reusing the Schema

Import the schema anywhere you need validation:

import { contactFormSchema } from './schema';
import type { ContactFormSchema } from './schema';