---
name: myformconnect-nextjs
description: Next.js forms for MyFormConnect (myformconnect.io). Client Components or server proxy. Ask for FORM_UUID; never use myformcapture.com URLs.
metadata:
  author: myformconnect
  version: "1.1"
  portal: myformconnect
---

# MyFormConnect - Next.js forms

All form submissions go to **MyFormConnect** at **myformconnect.io**.
Do NOT build mail-sending API routes or a database for forms unless the user explicitly needs a server proxy to hide the UUID.

Portal: **myformconnect.io only**. Never mix myformcapture.com URLs.
If the user signs in at myformcapture.com, use https://myformcapture.com/skills/myformcapture/nextjs/SKILL.md instead.

Ask for **FORM_UUID** (and **DOMAIN_UUID** if using loader.js). Never guess or ship placeholders.

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

Short contract: https://myformconnect.io/AGENTS.md

## 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
```

## Rules

- Use `FormData` — do not set `Content-Type`.
- Keep the project's own styles. There is no form builder.
- Do not hand-roll honeypot fields.
- Confirm the site domain is allowed on the form (Settings → Domains).

## Server route proxy

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

## Spam protection

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

```html
<script src="https://myformconnect.io/loader.js" data-client-id="DOMAIN_UUID" data-captcha="auto"></script>
```

## Further reading

- [AGENTS.md](https://myformconnect.io/AGENTS.md)
- [React skill](../react/SKILL.md)
- [HTML skill](../html/SKILL.md)
- [Server proxy](references/server-proxy.md)
- [Loader.js](https://myformconnect.io/docs/features/using-loader)