Wire your v0 form to email in one step

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

export async function submitContact(prevState, formData) {
  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 = 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 } from './actions';

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

  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>
  );
}

Wire the contact form in this v0 / Next.js project to this MakeTheForm endpoint:

https://mtform.co/f/your-form-key

Requirements:
- Prefer a Server Action that forwards the fields to the endpoint via fetch as JSON. Do NOT create a database or a custom /api route beyond the action itself.
- Keep the existing shadcn/ui markup and styling. Only add submit wiring.
- Disable the submit button while pending (useActionState / pending state).
- Treat any HTTP 2xx as success: show an inline success message and reset the form.
- On error, surface the JSON response’s error.message and keep the user’s input.
- Include a hidden honeypot input named exactly "_mtf_honeypot" (position:absolute;left:-9999px, tabIndex={-1}, autoComplete="off", aria-hidden="true"). Never display:none, never required.
- The endpoint URL is public and safe in client code. Do NOT invent or request an API key.