# Getting Started

> Set up your first form with StaticForm in under 5 minutes.

import { companyConfig } from '../../config';
import ThemeImage from '../../components/ThemeImage.astro';

## Overview

StaticForm is a form backend for static websites. You create a form in the dashboard, point your HTML form at the StaticForm API, and submissions are handled for you. That includes validation, spam protection, email notifications, and webhooks.

<ThemeImage src="/screenshots/sf-dashboard-light.png" srcDark="/screenshots/sf-dashboard-dark.png" alt="The StaticForm dashboard" />

## Quick Start

### 1. Create an Account

Sign up at [app.staticform.app](https://app.staticform.app). You can create an account with an email and password, or sign in with Google for one-click access.

### 2. Create a Form

In the dashboard, click **Create Form** and configure:

- **Name**: a label for your form (e.g. "Contact Form")
- **Fields**: the fields your form will accept, with types and validation rules
- **Submit Actions**: what happens when someone submits (email, webhook, etc.)

### 3. Add the Form to Your Website

Point your HTML form at the StaticForm submission endpoint:

```html
<form
  id="contact-form"
  method="POST"
  action="https://api.staticform.app/api/v1/forms/YOUR_FORM_ID"
>
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>
```

Replace `YOUR_FORM_ID` with the ID from your dashboard.

### 4. (Optional) Use the [JavaScript Helper](/docs/javascript-helper)

For a better user experience with client-side error handling, include the StaticForm script:

```html
<script src="https://staticform.app/scripts/staticform.js" defer></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('contact-form');
    StaticForm.attach(form, {
      endpoint: 'https://api.staticform.app/api/v1/forms/YOUR_FORM_ID',
    });
  });
</script>
```

The helper prevents the default form submission, sends the data via `fetch`, and maps validation errors back to individual fields.

## What's Next

- [Form Configuration](/docs/form-configuration): field types, validation rules, and response modes
- [Spam Protection](/docs/spam-protection): CAPTCHA, honeypot, and language detection
- [Submit Actions](/docs/submit-actions): email notifications and webhooks
- [JavaScript Helper](/docs/javascript-helper): client-side integration guide