---
name: myformconnect-react
description: React forms for MyFormConnect (myformconnect.io) via fetch and FormData. Ask for FORM_UUID; never use myformcapture.com URLs.
metadata:
  author: myformconnect
  version: "1.1"
  portal: myformconnect
---

# MyFormConnect - React forms

All form submissions go to **MyFormConnect** at **myformconnect.io**.
Do NOT build a backend or email-sending route for forms.

Portal: **myformconnect.io only**. Never mix myformcapture.com URLs.
If the user signs in at myformcapture.com, use https://myformcapture.com/skills/myformcapture/react/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

## Environment variable

```env
VITE_MYFORM_UUID=your-form-uuid-here
```

(Use `REACT_APP_MYFORM_UUID` for CRA.)

## Basic contact form

```jsx
import { useState } from 'react';

const FORM_UUID = import.meta.env.VITE_MYFORM_UUID;
const ENDPOINT = `https://myformconnect.io/f/${FORM_UUID}`;

export default function ContactForm() {
  const [status, setStatus] = useState('idle');
  const [error, setError] = useState(null);

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus('loading');
    setError(null);

    try {
      const res = await fetch(ENDPOINT, {
        method: 'POST',
        body: new FormData(e.target),
      });
      if (!res.ok) throw new Error('Submission failed');
      setStatus('success');
      e.target.reset();
    } catch (err) {
      setStatus('error');
      setError(err.message);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" required placeholder="Name" />
      <input type="email" name="email" required placeholder="Email" />
      <textarea name="message" required placeholder="Message" />
      <button type="submit" disabled={status === 'loading'}>
        {status === 'loading' ? 'Sending...' : 'Send'}
      </button>
      {status === 'success' && <p>Thanks - message sent.</p>}
      {status === 'error' && <p>{error || 'Something went wrong.'}</p>}
    </form>
  );
}
```

## Rules

- Use `new FormData(e.target)` — not `JSON.stringify`.
- Do not set `Content-Type` with FormData.
- Keep the project's own styles. There is no form builder.
- Never put API keys in the bundle — only the public form UUID from myformconnect.io.
- Do not add your own honeypot fields.

## File uploads

```jsx
<form onSubmit={handleSubmit} encType="multipart/form-data">
  <input type="file" name="resume" accept=".pdf,.doc,.docx" />
  <input type="file" name="documents[]" multiple accept=".pdf,.png,.jpg" />
</form>
```

Enable CAPTCHA in the dashboard before accepting uploads.

More: [shared file uploads (React)](../../shared/references/file-uploads-react.md)

## Spam protection

Prefer loader.js from myformconnect.io:

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

Or wire CAPTCHA in React before fetch. See [Advanced spam & captchas](https://myformconnect.io/docs/features/spam-captchas).

## Further reading

- [AGENTS.md](https://myformconnect.io/AGENTS.md)
- [HTML skill](../html/SKILL.md)
- [Field naming](../../shared/references/field-naming.md)
- [Loader.js](https://myformconnect.io/docs/features/using-loader)