Next.js

// app/contact/actions.ts
'use server';

// Runs on your server, so two things differ from a browser post: the request has no Origin
// (a form with allowed domains refuses it; post from the browser instead), and every visitor
// shares your server's IP for rate limiting. For busy forms, use a client-side fetch.
export type ContactState = { ok: boolean; message: string } | null;

export async function submitContact(
  _prevState: ContactState,
  formData: FormData,
): Promise<ContactState> {
  const response = await fetch('https://mtform.co/f/your-form-key', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(Object.fromEntries(formData)),
  });

  const result: { error?: { message?: string } } = await response.json();

  if (!response.ok) {
    return { ok: false, message: result.error?.message ?? 'Unable to send your message.' };
  }

  return { ok: true, message: 'Thanks. We got your message.' };
}

// app/contact/page.tsx
'use client';
import { useActionState } from 'react';
import { submitContact, type ContactState } from './actions';

export default function ContactPage() {
  const [state, action, pending] = useActionState(submitContact, null as ContactState);

  return (
    <form action={action}>
      <input name="name" placeholder="Name" required />
      <input type="email" name="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />
      <input name="_mtf_honeypot" tabIndex={-1} autoComplete="off" aria-hidden="true"
             style={{ position: 'absolute', left: '-9999px' }} />

      <button type="submit" disabled={pending}>{pending ? 'Sending…' : 'Send'}</button>
      {state && <p role={state.ok ? 'status' : 'alert'}>{state.message}</p>}
    </form>
  );
}