ContactForm.jsx

import { useState } from 'react'

export default function ContactForm({ handlerId }) {
  const [status, setStatus] = useState('idle') // idle | sending | ok | error
  const [message, setMessage] = useState('')

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

    const data = Object.fromEntries(new FormData(e.target))

    try {
      const res = await fetch(
        `https://api.formhandle.dev/submit/${handlerId}`,
        {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(data),
        }
      )

      if (res.ok) {
        setStatus('ok')
        setMessage('Message sent! We\'ll get back to you soon.')
        e.target.reset()
      } else {
        throw new Error(`Server returned ${res.status}`)
      }
    } catch {
      setStatus('error')
      setMessage('Something went wrong. Please try again.')
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name</label>
        <input id="name" type="text" name="name" required />
      </div>
      <div>
        <label htmlFor="email">Email</label>
        <input id="email" type="email" name="email" required />
      </div>
      <div>
        <label htmlFor="message">Message</label>
        <textarea id="message" name="message" required />
      </div>
      <button type="submit" disabled={status === 'sending'}>
        {status === 'sending' ? 'Sending...' : 'Send'}
      </button>
      {message && (
        <p style={{ color: status === 'ok' ? '#065f46' : '#991b1b' }}>
          {message}
        </p>
      )}
    </form>
  )
}