Form backend for Next.js

How it works

1. 1

   Create a LazyForms account and get your endpoint URL.

2. 2

   Build your form component with fetch to the LazyForms endpoint.

3. 3

   No API route needed — the form submits directly to LazyForms.

4. 4

   Submissions arrive in your email and dashboard.

Code example

'use client';

import { useState } from 'react';

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

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

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

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

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <input type="text" name="name" placeholder="Name" required className="input" />
      <input type="email" name="email" placeholder="Email" required className="input" />
      <textarea name="message" placeholder="Message" required className="input" />
      <button type="submit" disabled={status === 'sending'}>
        {status === 'sending' ? 'Sending...' : 'Send'}
      </button>
      {status === 'sent' && <p>Thanks! We'll be in touch.</p>}
    </form>
  );
}

Tips

• Mark your form component with 'use client' since it uses useState and event handlers.
• You can also use Server Actions to proxy through your own API if needed, but direct submission is simpler.
• LazyForms returns JSON by default — perfect for client-side form handling in Next.js.