---
name: myformcapture-html
description: Build HTML forms for MyFormCapture (US & Canada). Static pages, Framer embeds, multi-step flows, file uploads. Register at myformcapture.com only.
metadata:
  author: myformcapture
  version: "1.0"
  portal: myformcapture
---

# MyFormCapture - HTML forms

Portal: **myformcapture.com** (US & Canada)

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

**Do not use myformconnect.io URLs in this skill.** That is a separate EU/India/ROW portal. If the user registered on myformconnect.io, use `https://myformconnect.io/skills/myformconnect/html/SKILL.md` instead.

## Before you start

1. Create a form at [myformcapture.com](https://myformcapture.com) 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://myformcapture.com/f/YOUR_FORM_UUID`

**Loader:** `https://myformcapture.com/loader.js`

## Basic contact form

```html
<form action="https://myformcapture.com/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://myformcapture.com/loader.js" data-client-id="YOUR_DOMAIN_UUID" data-captcha="auto"></script>

<form data-mfc="true" action="https://myformcapture.com/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 myformcapture.com dashboard.
- `data-mfc="true"` - enables AJAX submit, validation, CAPTCHA.
- `data-captcha="auto"` - loads CAPTCHA config from the form settings.

See [Using Loader.js](https://myformcapture.com/docs/using-loader) and [Advanced spam & captchas](https://myformcapture.com/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://myformcapture.com/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://myformcapture.com/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)

## Framer Embed

- Inline CSS and JS only (loader.js from myformcapture.com 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 MyFormCapture UUID: YOUR_FORM_UUID
Skill: https://myformcapture.com/skills/myformcapture/html/SKILL.md
Include https://myformcapture.com/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://myformcapture.com/thanks.html`

## Things that break

| Mistake | Fix |
|---------|-----|
| Using myformconnect.io URLs | Use myformcapture.com only for this portal |
| Placeholder UUID in production | Use real UUID from myformcapture.com 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)
- [File uploads](../../shared/references/file-uploads.md)
- [File upload docs](https://myformcapture.com/docs/file-upload-example)
- [Loader.js](https://myformcapture.com/docs/using-loader)