SvelteKit Form Code Examples

import { z } from 'zod';

export const contactFormSchema = z.object({
  full-name: z.string().min(2, 'Name must be at least 2 characters'),
  email: z.string().email('Please enter a valid email'),
  subject: z.string(),
  message: z.string().min(10, 'Message must be at least 10 characters').max(1000, 'Message must be under 1000 characters')
});

export type ContactFormSchema = typeof contactFormSchema;

<script lang="ts">
  import { superForm } from 'sveltekit-superforms';
  import { zod } from 'sveltekit-superforms/adapters';
  import { contactFormSchema } from './schema';
  import type { PageData } from './$types';

  let { data }: { data: PageData } = $props();

  const { form, errors, enhance, submitting } = superForm(data.form, {
    validators: zod(contactFormSchema)
  });
</script>

<form method="POST" use:enhance class="space-y-4">
  <div>
    <label for="full-name" class="block text-sm font-medium">Full Name</label>
    <input
      type="text"
      id="full-name"
      name="full-name"
      bind:value={$form.full-name}
      placeholder="John Doe"
      class="mt-1 block w-full rounded-md border px-3 py-2"
    />
    {#if $errors.full-name}<p class="mt-1 text-sm text-red-600">{$errors.full-name}</p>{/if}
  </div>

  <div>
    <label for="email" class="block text-sm font-medium">Email</label>
    <input
      type="email"
      id="email"
      name="email"
      bind:value={$form.email}
      placeholder="[email protected]"
      class="mt-1 block w-full rounded-md border px-3 py-2"
    />
    {#if $errors.email}<p class="mt-1 text-sm text-red-600">{$errors.email}</p>{/if}
  </div>

  <div>
    <label for="subject" class="block text-sm font-medium">Subject</label>
    <input
      type="text"
      id="subject"
      name="subject"
      bind:value={$form.subject}
      placeholder="How can we help?"
      class="mt-1 block w-full rounded-md border px-3 py-2"
    />
    {#if $errors.subject}<p class="mt-1 text-sm text-red-600">{$errors.subject}</p>{/if}
  </div>

  <div>
    <label for="message" class="block text-sm font-medium">Message</label>
    <textarea
      id="message"
      name="message"
      bind:value={$form.message}
      placeholder="Your message..."
      rows="5"
      class="mt-1 block w-full rounded-md border px-3 py-2"
    ></textarea>
    {#if $errors.message}<p class="mt-1 text-sm text-red-600">{$errors.message}</p>{/if}
  </div>

  <button
    type="submit"
    disabled={$submitting}
    class="rounded-md bg-primary px-4 py-2 text-primary-foreground"
  >
    {$submitting ? 'Submitting...' : 'Send Message'}
  </button>
</form>