Next.js Form Backend integration — Serverless & Static Site Friendly

'use client';
import { useForm, ValidationError } from '@formspree/react'; // or plain fetch

export default function NextContactForm() {
  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    
    const response = await fetch('https://sendmyform.live/api/f/YOUR_FORM_ID', {
      method: 'POST',
      body: formData,
      headers: {
        'Accept': 'application/json'
      }
    });
    
    if (response.ok) {
      alert('Form submitted successfully!');
    }
  };

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-4 max-w-md">
      <input name="email" type="email" placeholder="Your Email" required className="p-2 border rounded" />
      <textarea name="message" placeholder="Message" required className="p-2 border rounded h-32" />
      <button type="submit" className="bg-violet-600 text-white p-2 rounded">Submit</button>
    </form>
  );
}