Formbase + SvelteKit Example

A simple contact form example using SvelteKit and Formbase.

What is Formbase?

Formbase is a form backend service that handles form submissions for you. No server code needed - just point your form to Formbase and receive submissions via email or webhooks.

Quick Start

1. Clone this repository:

   git clone https://github.com/formbase-dev/formbase-sveltekit-example.git
   cd formbase-sveltekit-example

2. Install dependencies:

   bun install

3. Configure your Form ID:

   • Sign up at formbase.dev and create a form
   • Copy your Form ID
   • Open src/lib/components/ContactForm.svelte and replace YOUR_FORM_ID with your actual Form ID

4. Start the development server:

   bun run dev

How it Works

1. User fills out the contact form (name, email, message)
2. On submit, the form data is POSTed to https://formbase.dev/s/{YOUR_FORM_ID}
3. Formbase processes the submission and sends you a notification
4. User is redirected to a thank-you page

Project Structure

├── src/
│   ├── lib/
│   │   └── components/
│   │       └── ContactForm.svelte # Form component with loading state
│   ├── routes/
│   │   ├── +layout.svelte         # Root layout with Tailwind
│   │   ├── +page.svelte           # Home page with contact form
│   │   └── thank-you/
│   │       └── +page.svelte       # Success page after submission
│   ├── app.css                    # Tailwind CSS
│   ├── app.d.ts                   # TypeScript declarations
│   └── app.html                   # HTML template
├── static/                        # Static assets
├── package.json
├── svelte.config.js
├── tsconfig.json
└── vite.config.ts

Customization

Adding Fields

Add new input fields in ContactForm.svelte:

<div>
  <label for="phone">Phone</label>
  <input type="tel" id="phone" name="phone" />
</div>

Changing Styles

This project uses Tailwind CSS. Modify the classes on any element to change its appearance.

Tech Stack

• SvelteKit - Full-stack framework
• Svelte - UI framework
• Vite - Build tool
• TypeScript - Type safety
• Tailwind CSS - Styling

Links

• Formbase - Form backend service
• Formbase Documentation
• Other Formbase Examples

License

MIT