Form backend for React apps

How it works

1. 1

   Sign up for LazyForms and create a form endpoint.

2. 2

   Use fetch to POST form data to your endpoint.

3. 3

   Handle success/error states in your component.

4. 4

   Submissions appear in your email and dashboard instantly.

Code example

import { useState } from 'react';

export default function ContactForm() {
  const [status, setStatus] = useState('idle');

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus('sending');

    const form = e.target;
    const data = new FormData(form);

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

    if (res.ok) {
      setStatus('sent');
      form.reset();
    } else {
      setStatus('error');
    }
  }

  return (
    <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 message'}
      </button>
      {status === 'sent' && <p>Message sent!</p>}
      {status === 'error' && <p>Something went wrong. Try again.</p>}
    </form>
  );
}

Tips

• Use FormData to automatically collect all named inputs — no need to manage every field in state.
• The endpoint returns JSON when no redirect is configured, perfect for SPA flows.
• Add a _honey hidden input for bot protection without any CAPTCHA friction.