Form backend for Remix

How it works

1. 1

   Create a LazyForms form endpoint.

2. 2

   Build a Remix form component with useFetcher or plain fetch.

3. 3

   POST directly to LazyForms — no action function needed.

4. 4

   Submissions arrive in your email and dashboard.

Code example

import { useState } from 'react';

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

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus('sending');

    const res = await fetch('https://api.lazyforms.com/f/YOUR_ACCESS_KEY', {
      method: 'POST',
      body: new FormData(e.currentTarget),
    });

    setStatus(res.ok ? 'sent' : 'error');
    if (res.ok) e.currentTarget.reset();
  }

  return (
    <div>
      <h1>Contact us</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" name="name" placeholder="Name" required />
        <input type="email" name="email" placeholder="Email" required />
        <textarea name="message" placeholder="Message" required />
        <button type="submit" disabled={status === 'sending'}>
          {status === 'sending' ? 'Sending...' : 'Send'}
        </button>
        {status === 'sent' && <p>Thanks! We got your message.</p>}
      </form>
    </div>
  );
}

Tips

• For simple forms, skip the action function entirely — just fetch to LazyForms.
• For progressive enhancement, you can still use a Remix action as a fallback.
• Works with Remix on Cloudflare, Vercel, Node, or Deno.