Next.js 15+ (App Router & Server Actions)

1234567891011121314151617181920212223242526272829303132333435
// app/contact/page.tsx
'use client';
import { useState } from 'react';
 
export default function Contact() {
  const [status, setStatus] = useState<'idle' | 'loading' | 'success'>('idle');
 
  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus('loading');
    const formData = new FormData(e.currentTarget);
 
    const res = await fetch('https://api.formtruck.com/f/ft_YOUR_FORM_ID', {
      method: 'POST',
      body: formData,
      headers: { Accept: 'application/json' },
    });
 
    if (res.ok) setStatus('success');
  }
 
  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <input type="text" name="name" placeholder="Your Name" required />
      <input type="email" name="email" placeholder="Email Address" required />
      <textarea name="message" placeholder="Your Message" required />
      {/* Anti-spam honeypot */}
      <input type="text" name="_gotcha" className="hidden" tabIndex={-1} />
      <button type="submit" disabled={status === 'loading'}>
        {status === 'loading' ? 'Sending...' : 'Send Message'}
      </button>
      {status === 'success' && <p>Thank you! We received your message.</p>}
    </form>
  );
}