---
name: myformconnect-react
description: Build React forms for MyFormConnect (EU, India, ROW) via fetch and FormData. Vite, CRA, client-side React. Register at myformconnect.io only.
metadata:
  author: myformconnect
  version: "1.0"
  portal: myformconnect
---

# MyFormConnect - React forms

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

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

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

## 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.
- Never put API keys in the bundle - only the public form UUID from myformconnect.io.

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

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

## Spam protection

Use loader.js from myformconnect.io before submit:

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

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

Do not add your own honeypot fields.

## Further reading

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