The zero-maintenance form backend for Next.js and static sites

'use client';
import { useState } from 'react';

export function ContactForm() {
  const [status, setStatus] = useState<'idle' | 'sending' | 'sent'>('idle');

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus('sending');
    const res = await fetch('https://formfork.io/f/your_form_id', {
      method: 'POST',
      body: new FormData(e.currentTarget),
      headers: { Accept: 'application/json' },
    });
    if (res.ok) setStatus('sent');
  }

  return (
    <form onSubmit={onSubmit}>
      <input name="email" type="email" required placeholder="you@company.com" />
      <input name="_gotcha" style={{ display: 'none' }} tabIndex={-1} />
      <button type="submit">{status === 'sent' ? 'Sent!' : 'Submit'}</button>
    </form>
  );
}