---
name: myformconnect-html
description: Build HTML forms for MyFormConnect (EU, India, Rest of World). Static pages, Framer embeds, multi-step flows, file uploads. Register at myformconnect.io only.
metadata:
  author: myformconnect
  version: "1.0"
  portal: myformconnect
---

# MyFormConnect - HTML forms

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

MyFormConnect is a form backend. You build the HTML; we store submissions, send notifications, and run integrations. No server code required.

**Do not use myformcapture.com URLs in this skill.** That is a separate US/Canada portal. If the user registered on myformcapture.com, use `https://myformcapture.com/skills/myformcapture/html/SKILL.md` instead.

## Before you start

1. Create a form at [myformconnect.io](https://myformconnect.io) and copy the **Form UUID**.
2. Add your site's domain to allowed domains (Settings -> Domains).
3. Replace `YOUR_FORM_UUID` everywhere below.

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

**Loader:** `https://myformconnect.io/loader.js`

## Basic contact form

```html
<form action="https://myformconnect.io/f/YOUR_FORM_UUID" method="POST">
  <input type="text" name="name" placeholder="Your name" required />
  <input type="email" name="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message" required></textarea>
  <button type="submit">Send</button>
</form>
```

## Recommended: loader.js for spam protection

Bots still count against your quota even if filtered later. **Use loader.js from the start** so CAPTCHA and honeypot checks run before the request is sent.

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

<form data-mfc="true" action="https://myformconnect.io/f/YOUR_FORM_UUID" method="POST">
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>
```

- `data-client-id` - domain UUID from the myformconnect.io dashboard.
- `data-mfc="true"` - enables AJAX submit, validation, CAPTCHA.
- `data-captcha="auto"` - loads CAPTCHA config from the form settings.

See [Using Loader.js](https://myformconnect.io/docs/using-loader) and [Advanced spam & captchas](https://myformconnect.io/docs/advanced-spam-captchas).

**Do not** add your own honeypot fields - loader injects them automatically.

## AJAX / fetch submit

```html
<form id="contact-form">
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>
<p id="status"></p>

<script>
  document.getElementById('contact-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = e.target;
    const status = document.getElementById('status');
    status.textContent = 'Sending...';

    try {
      const res = await fetch('https://myformconnect.io/f/YOUR_FORM_UUID', {
        method: 'POST',
        body: new FormData(form)
      });
      if (!res.ok) throw new Error('Submission failed');
      status.textContent = 'Thanks - we got your message.';
      form.reset();
    } catch (err) {
      status.textContent = 'Something went wrong. Please try again.';
    }
  });
</script>
```

Rules: use `FormData`, do not set `Content-Type`, call `e.preventDefault()`.

## File uploads

```html
<form action="https://myformconnect.io/f/YOUR_FORM_UUID" method="POST" enctype="multipart/form-data">
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <input type="file" name="resume" accept=".pdf,.doc,.docx" />
  <input type="file" name="documents[]" multiple accept=".pdf,.png,.jpg" />
  <button type="submit">Submit</button>
</form>
```

**Highly recommended:** select and enable CAPTCHA in the dashboard (reCAPTCHA or hCaptcha) before accepting uploads. Use loader.js with `data-captcha="auto"` so verification runs before files are sent.

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

## Multi-step forms

Keep all fields in one `<form>`, show/hide steps in JS, submit once at the end.

More: [shared multi-step guide](../../shared/references/multi-step-forms.md)

## Scored quizzes

One question at a time, client-side scoring, optional POST of the final score to `https://myformconnect.io/f/YOUR_FORM_UUID`. No quiz server.

More: [shared scored quiz guide](../../shared/references/scored-quiz.md)

## Typeform-style questionnaires

One question at a time for data collection (Secret Santa, intake, RSVP). Submit once. Optional POST to `https://myformconnect.io/f/YOUR_FORM_UUID`.

More: [shared questionnaire guide](../../shared/references/typeform-questionnaire.md)

## Tables and choice matrices

Repeating rows (orders, expenses) or a rating grid (satisfaction, Likert). Submit once. Optional JSON snapshot in `table_rows`.

More: [shared tables guide](../../shared/references/form-tables.md)

## Framer Embed

- Inline CSS and JS only (loader.js from myformconnect.io is OK).
- Paste into Framer Insert -> Embed -> HTML.

Example AI prompt:

```
Build a multi-step contact form for Framer Embed matching: [YOUR_SITE_URL]
Submit to MyFormConnect UUID: YOUR_FORM_UUID
Skill: https://myformconnect.io/skills/myformconnect/html/SKILL.md
Include https://myformconnect.io/loader.js with data-captcha="auto" and data-mfc="true"
Return one self-contained HTML snippet (inline CSS + JS only).
```

## Field naming

More: [shared field naming](../../shared/references/field-naming.md)

## Pre-fill from URL params

```html
<script>
  const params = new URLSearchParams(window.location.search);
  const plan = params.get('plan');
  if (plan) document.querySelector('[name="plan"]').value = plan;
</script>
```

## Redirect after submit

Set redirect URL in dashboard settings. Default thank-you page: `https://myformconnect.io/thanks.html`

## Things that break

| Mistake | Fix |
|---------|-----|
| Using myformcapture.com URLs | Use myformconnect.io only for this portal |
| Placeholder UUID in production | Use real UUID from myformconnect.io dashboard |
| Domain not whitelisted | Add site domain in form settings |
| File upload without `enctype` | Add `enctype="multipart/form-data"` |
| No spam protection on public forms | Add loader.js + CAPTCHA before launch |

## Further reading

- [Field naming](../../shared/references/field-naming.md)
- [Multi-step forms](../../shared/references/multi-step-forms.md)
- [Scored quizzes](../../shared/references/scored-quiz.md)
- [Typeform-style questionnaires](../../shared/references/typeform-questionnaire.md)
- [Tables and choice matrices](../../shared/references/form-tables.md)
- [Online polls](../../shared/references/online-poll.md)
- [File uploads](../../shared/references/file-uploads.md)
- [File upload docs](https://myformconnect.io/docs/file-upload-example)
- [Loader.js](https://myformconnect.io/docs/using-loader)