@goobits/forms

Accessible form workflows for Svelte 5 and SvelteKit. Goo owns the controls; Forms owns validation, submission state, errors, announcements, contact workflows, uploads, and server adapters.

Install

pnpm add @goobits/forms @goobits/goo zod

Contact Form

// src/hooks.server.ts
import { initContactFormConfig } from '@goobits/forms/config';

initContactFormConfig({
	appName: 'My app',
	categories: {
		general: { label: 'General inquiry', fields: ['name', 'email', 'message'] }
	}
});

// src/routes/api/contact/+server.ts
import { createEmailService, createMockProvider } from '@goobits/email';
import { createContactApiHandler } from '@goobits/forms/handlers';

const email = createEmailService({
	provider: createMockProvider(),
	from: process.env.FROM_EMAIL
});

export const POST = createContactApiHandler({
	csrfSecret: process.env.CONTACT_CSRF_SECRET,
	adminEmail: process.env.ADMIN_EMAIL,
	sendEmail: email.send
});

<script>
	import { ContactForm } from '@goobits/forms/ui';
	import '@goobits/forms/ui/index.css';
</script>

<ContactForm apiEndpoint="/api/contact" />

Generic Submission

import { createFormSubmission, invalidFormData, validFormData } from '@goobits/forms/core';

const newsletter = createFormSubmission({
	validate: (input) =>
		input.email
			? validFormData({ email: input.email.trim() })
			: invalidFormData({ email: 'Email is required' }),
	submit: (data) => newsletterProvider.subscribe(data.email)
});

Newsletter providers, authentication, authorization, CRUD, and moderation stay in the consuming app. Forms manages the interaction and submission lifecycle only.

Email providers stay in @goobits/email. Forms accepts the host's configured send function.

Public API

Import	Contents
@goobits/forms/core	Validation results and submission lifecycle
@goobits/forms/ui	Contact forms, field/status/error UI, date fields, uploads
@goobits/forms/sveltekit	Generic form action adapter
@goobits/forms/handlers	Contact API handler
@goobits/forms/config	Contact configuration
@goobits/forms/validation	Zod-backed form schemas and helpers
@goobits/forms/services	Form, reCAPTCHA, hydration, and storage services
@goobits/forms/i18n	Translation hooks

Generic buttons, inputs, selects, textareas, checkboxes, sliders, dialogs, menus, tooltips, spinners, and focus behavior come from @goobits/goo.

Documentation

• Getting started
• Configuration
• TypeScript
• API reference
• Testing
• Migration
• Troubleshooting
• Accessibility