---
name: myformconnect-nextjs
description: Connect Next.js forms to MyFormConnect (EU, India, ROW). Client Components or server proxy. Register at myformconnect.io only.
metadata:
  author: myformconnect
  version: "1.0"
  portal: myformconnect
---

# MyFormConnect - Next.js forms

Portal: **myformconnect.io** (EU, India, Rest of World)

**Do not use myformcapture.com.** US/Canada: `https://myformcapture.com/skills/myformcapture/nextjs/SKILL.md`

**Endpoint:** `POST https://myformconnect.io/f/YOUR_FORM_UUID`

## Client Component (App Router)

```tsx
'use client';

import { useState, FormEvent } from 'react';

const ENDPOINT = `https://myformconnect.io/f/${process.env.NEXT_PUBLIC_MYFORM_UUID}`;

export default function ContactForm() {
  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');

  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus('loading');
    try {
      const res = await fetch(ENDPOINT, {
        method: 'POST',
        body: new FormData(e.currentTarget),
      });
      if (!res.ok) throw new Error('Failed');
      setStatus('success');
      e.currentTarget.reset();
    } catch {
      setStatus('error');
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" required />
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button type="submit" disabled={status === 'loading'}>Send</button>
      {status === 'success' && <p>Sent!</p>}
      {status === 'error' && <p>Try again.</p>}
    </form>
  );
}
```

`.env.local`:

```env
NEXT_PUBLIC_MYFORM_UUID=your-form-uuid
```

## Server route proxy

Hide UUID server-side. See [server-proxy.md](references/server-proxy.md).

## Spam protection

Configure CAPTCHA in myformconnect.io dashboard. Use loader.js in layout or `data-mfc="true"` forms.

Do not hand-roll honeypot fields.

## Further reading

- [React skill](../react/SKILL.md)
- [HTML skill](../html/SKILL.md)
- [Server proxy](references/server-proxy.md)