# Static Sites Integration Guide

Complete guide to integrate MyFormConnect with Static Sites

      Setup time: **5 minutes
      Difficulty: **Easy
        Compatible versions: **All HTML/CSS/JS sites**

Add MyFormConnect forms to any static website built with HTML, CSS, and JavaScript. Works with custom-built sites, GitHub Pages, Netlify, Vercel, and other static hosting platforms.

## ** Prerequisites

- ** A MyFormConnect account - [Sign up here](/users/sign_up)
- ** A form created in your MyFormConnect dashboard with its UUID copied
- ** Access to your website's HTML files
- ** Basic understanding of HTML structure
- ** FTP access or file manager (for hosted sites)

## ** Integration Methods

### HTML Form (Recommended)

                5 minutes

                Easy

Add a simple HTML form that posts directly to MyFormConnect. Optional: include loader.js for AJAX submission and validation.

                  1

#### Copy your form UUID from MyFormConnect

                    You will need the unique UUID that MyFormConnect assigned to your form.

1. Log in to your MyFormConnect dashboard
2. Open the form you want to use
3. Copy the form UUID from the form URL or settings page (e.g. `550e8400-e29b-41d4-a716-446655440000`)

##### Important Note

                            Each form has a unique UUID. Using the wrong UUID will send submissions to the wrong form.

                  2

#### Add the form HTML to your page

                    Insert the form HTML where you want it to appear on your page.

1. Open your HTML file (e.g. `index.html`, `contact.html`)
2. Locate where you want the form to appear
3. Paste the form code below, replacing `YOUR_FORM_UUID` with your actual UUID

```
<form action="https://myformconnect.io/f/YOUR_FORM_UUID" method="POST" data-mfc="true">
  <p>
    <label for="name">Name *</label><br>
    <input type="text" id="name" name="name" required>
  </p>
  <p>
    <label for="email">Email *</label><br>
    <input type="email" id="email" name="email" required>
  </p>
  <p>
    <label for="message">Message</label><br>
    <textarea id="message" name="message" rows="4"></textarea>
  </p>
  <button type="submit">Send Message</button>
</form>

<!-- Optional: add loader.js for AJAX submission and validation -->
<!-- Remove the script tag below for a plain HTML form POST -->
<script src="https://myformconnect.io/loader.js" data-client-id="YOUR_FORM_UUID"></script>
```

##### Important Note

                            Replace both instances of `YOUR_FORM_UUID` with your actual form UUID. The `data-mfc="true"` attribute tells the loader script which form to enhance.

                  3

#### Upload and test

                    Upload your updated HTML file and verify submissions are reaching your MyFormConnect dashboard.

1. Save your HTML file
2. Upload to your web server via FTP, file manager, or git push
3. Clear browser cache and visit your site
4. Fill in the form and click Submit
5. Check your MyFormConnect dashboard under **Leads** or **Form Responses** to confirm the submission arrived

##### Important Note

                            If using loader.js, the form will submit via AJAX and show success/error messages without page reload.

### Site-wide loader.js

                8 minutes

                Easy

Load loader.js once in your site header if you have multiple MyFormConnect forms across different pages.

                  1

#### Add loader.js to your site header

                    Place the loader script in the `<head>` section of your HTML template.

1. Open your main HTML template or `index.html`
2. Find the `<head>` section
3. Add the loader script before the closing `</head>` tag
4. Replace `YOUR_DOMAIN_UUID` with your domain UUID from MyFormConnect dashboard

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Website</title>

  <!-- Your existing head content -->

  <!-- MyFormConnect loader.js (site-wide) -->
  <script src="https://myformconnect.io/loader.js" data-client-id="YOUR_DOMAIN_UUID"></script>
</head>
<body>
  <!-- Your page content -->
</body>
</html>
```

##### Important Note

                            When loading loader.js globally, use your **domain UUID** (not a form UUID) as the `data-client-id`.

                  2

#### Add forms without script tags

                    Now each form only needs the HTML markup — no per-form script tag needed.

1. Add forms to any page using the HTML structure below
2. Each form needs the correct form-specific UUID in the `action` attribute
3. Add `data-mfc="true"` to each form element
4. Forms will automatically be enhanced by the global loader.js

```
<form action="https://myformconnect.io/f/YOUR_FORM_UUID" method="POST" data-mfc="true">
  <p>
    <label for="name">Name *</label><br>
    <input type="text" id="name" name="name" required>
  </p>
  <p>
    <label for="email">Email *</label><br>
    <input type="email" id="email" name="email" required>
  </p>
  <p>
    <label for="message">Message</label><br>
    <textarea id="message" name="message" rows="4"></textarea>
  </p>
  <button type="submit">Send Message</button>
</form>
```

##### Important Note

                            Do not include a `<script>` tag in individual forms when using the global loader approach.

## ** Troubleshooting

              Check: 1) The form UUID in the action URL is correct, 2) Your site URL is added to your MyFormConnect dashboard under Domains (optional but recommended), 3) Check browser console (F12 → Console) for any errors, 4) Verify you're checking the correct form in the dashboard.

              Ensure: 1) The form has `data-mfc="true"` on the `<form>` element, 2) The `data-client-id` on the script tag contains a valid UUID, 3) Check the browser console for script loading errors, 4) Verify the loader script URL is correct.

              Debug: 1) Check for JavaScript errors in browser console, 2) Verify the form action URL is complete and correct, 3) Test without loader.js to isolate the issue (remove script tag), 4) Check for conflicting JavaScript on your page, 5) Ensure the form method is POST.

              Check your MyFormConnect dashboard: 1) Go to Leads and check the Spam filter tab, 2) Adjust spam protection settings in Form Settings, 3) Enable CAPTCHA if needed, 4) Review the spam score details on filtered submissions.

              For file uploads: 1) Add `enctype="multipart/form-data"` to the form tag, 2) Use `<input type="file" name="file">` for uploads, 3) Check file size limits in your form settings, 4) Verify the file meets allowed format restrictions.

              Clear caches: 1) Clear your browser cache (Ctrl+F5 or Cmd+Shift+R), 2) Try an incognito/private browsing window, 3) If using Cloudflare/CDN, purge the CDN cache, 4) Verify the file actually uploaded (check file timestamp on server).

#### Still having issues?

Can't find the answer you're looking for? Our support team is here to help with your integration.

          [** Contact Support](/support)

## ** Related Integrations

      [GitHub Pages Integration Guide →](/docs/deployment/github-pages)      [Vercel Integration Guide →](/docs/deployment/vercel)      [Netlify Integration Guide →](/docs/deployment/netlify)

## ** References & Official Documentation

- ** [MDN Web Docs](https://developer.mozilla.org/) **
- ** [HTML5 Specification](https://html.spec.whatwg.org/) **
- ** [CSS Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS) **
- ** [JavaScript Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript) **

## ** Next Steps

#### ** Configure MyFormConnect

- ** Set up your timezone
- ** Configure lead notifications
- ** Set up advanced spam detection
- ** Add team members to your account

#### ** Advanced Features

- ** Use our custom form templates
- ** Try AI Insights for Leads
- ** Integrate with your CRM
- ** Set up automated workflows