Form Components

Production-ready form components with progressive enhancement, pluggable backends, and accessibility built in. Works without JavaScript; upgrades with AJAX when available.

Features

✓ Progressive Enhancement

All forms work with native HTML POST without JavaScript. When JS is available, they upgrade to AJAX with status feedback.

✓ Pluggable Backends

Switch backends per-form or globally. Supported: Web3Forms (free), Netlify, API, Formspree, Formspark, or custom.

✓ Accessibility

All inputs have labels, error messages announce via ARIA, submit button shows aria-busy during submission.

✓ No External Dependencies

Pure Astro components with vanilla TypeScript. No React, Vue, or form libraries.

Configuration

Global Default (src/config/forms.ts)

import { forms } from '../../config/forms';

export const forms = {
  defaultBackend: 'web3forms',
  web3formsKey: 'your-key-here',
  apiUrl: undefined,
  formspreeEndpoint: undefined,
  formsparProjectId: undefined,
};

Per-Component Override

<!-- Switch backend for one form instance -->
<ContactForm 
  backend="api" 
  apiUrl="https://api.example.com/contact" 
/>

<!-- Multiple forms, different backends -->
<ContactForm backend="web3forms" />
<NewsletterForm backend="api" apiUrl="https://api.example.com/newsletter" />

Contact Form

Live Example

Uses the default backend from your forms config.

Override to API Backend

Route to a custom API endpoint (Cloudflare Worker, Vercel Function, etc).

<ContactForm
  backend="api"
  apiUrl="https://api.example.com/contact"
/>

Lead Capture Form

Four-field form for lead generation: name, email, company (optional), phone (optional). Submits to global default backend.

Newsletter Form

Vertical Layout (Default)

Single-field email form in vertical layout. Good for dedicated newsletter signup pages.

Compact Horizontal Layout

<NewsletterForm compact />

Override to API Backend

<NewsletterForm
  backend="api"
  apiUrl="https://api.example.com/newsletter"
/>