---
name: myformconnect-html
description: HTML forms for MyFormConnect (myformconnect.io). Ask for FORM_UUID and DOMAIN_UUID; use loader.js; never use myformcapture.com URLs.
metadata:
  author: myformconnect
  version: "1.1"
  portal: myformconnect
---

# MyFormConnect - HTML forms

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

Portal: **myformconnect.io only**. myformcapture.com is a separate portal — never mix URLs.
If the user signs in at myformcapture.com, use https://myformcapture.com/skills/myformcapture/html/SKILL.md instead.

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

## Ask the user for these (never guess or leave placeholders)

1. **FORM_UUID** from the dashboard → endpoint `POST https://myformconnect.io/f/FORM_UUID`
2. **DOMAIN_UUID** → `data-client-id` for loader.js
3. Confirm the site's domain is in the form's allowed domains (Settings → Domains)

## Default pattern

```html
<script src="https://myformconnect.io/loader.js"
        data-client-id="DOMAIN_UUID" data-captcha="auto"></script>
<form data-mfc="true"
      action="https://myformconnect.io/f/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"` — AJAX submit, validation, CAPTCHA
- `data-captcha="auto"` — loads CAPTCHA config from form settings

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

**Do not** add your own honeypot fields — loader.js injects them.

## Rules

- Keep the project's own HTML and CSS. There is no form builder.
- Input `name` attributes become dashboard columns. Prefer clear names: `name`, `email`, `phone`, `message`.
- Custom `fetch()`: send `FormData`, do NOT set `Content-Type`, call `e.preventDefault()`.
- File uploads: add `enctype="multipart/form-data"` and enable CAPTCHA in the dashboard first.
- Redirect after submit: set in the dashboard. Default thank-you page: `https://myformconnect.io/thanks.html`
- Never ship a placeholder UUID.

## Verify

Submit one test entry. If it does not appear in the dashboard, check allowed domains first.

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

## File uploads

```html
<form action="https://myformconnect.io/f/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>
```

Enable CAPTCHA in the dashboard before accepting uploads. Prefer loader.js with `data-captcha="auto"`.

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

## Multi-step, quizzes, questionnaires, tables

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

- [Multi-step](../../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)
- [Field naming](../../shared/references/field-naming.md)

## Framer Embed

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

```
Build a multi-step contact form for Framer Embed matching: [YOUR_SITE_URL]
Submit to MyFormConnect UUID: 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).
```

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

## Things that break

| Mistake | Fix |
|---------|-----|
| Using myformcapture.com URLs | Use myformconnect.io only |
| Placeholder UUID | Real UUID from myformconnect.io dashboard |
| Domain not whitelisted | Add site domain in form settings |
| File upload without `enctype` | Add `enctype="multipart/form-data"` |
| Custom honeypot fields | Remove them — loader.js injects honeypots |
| No spam protection on public forms | Add loader.js + CAPTCHA before launch |

## Further reading

- [AGENTS.md](https://myformconnect.io/AGENTS.md)
- [Loader.js](https://myformconnect.io/docs/features/using-loader)
- [Booking widget](https://myformconnect.io/docs/features/booking-widget)
- [File upload docs](https://myformconnect.io/docs/features/file-upload)