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
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.

Copy your form UUID from MyFormConnect

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

Log in to your MyFormConnect dashboard
Open the form you want to use
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.

Add the form HTML to your page

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

Open your HTML file (e.g. index.html, contact.html)
Locate where you want the form to appear
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.

Upload and test

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

Save your HTML file
Upload to your web server via FTP, file manager, or git push
Clear browser cache and visit your site
Fill in the form and click Submit
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.

Add loader.js to your site header

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

Open your main HTML template or index.html
Find the <head> section
Add the loader script before the closing </head> tag
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.

Add forms without script tags

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

Add forms to any page using the HTML structure below
Each form needs the correct form-specific UUID in the action attribute
Add data-mfc="true" to each form element
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

Still having issues?

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

Contact Support

Related Integrations

References & Official Documentation

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

Need Help?

Our support team is here to help you with your integration.

Contact Support

Prerequisites

A MyFormConnect account - Sign up here
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.

Copy your form UUID from MyFormConnect

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

Log in to your MyFormConnect dashboard
Open the form you want to use
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.

Add the form HTML to your page

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

Open your HTML file (e.g. index.html, contact.html)
Locate where you want the form to appear
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.

Upload and test

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

Save your HTML file
Upload to your web server via FTP, file manager, or git push
Clear browser cache and visit your site
Fill in the form and click Submit
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.

Add loader.js to your site header

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

Open your main HTML template or index.html
Find the <head> section
Add the loader script before the closing </head> tag
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.

Add forms without script tags

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

Add forms to any page using the HTML structure below
Each form needs the correct form-specific UUID in the action attribute
Add data-mfc="true" to each form element
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

Still having issues?

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

Contact Support

References & Official Documentation

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

Static Sites Integration Guide

Prerequisites

Integration Methods

HTML Form (Recommended)

Copy your form UUID from MyFormConnect

Important Note

Add the form HTML to your page

Important Note

Upload and test

Important Note

Site-wide loader.js

Add loader.js to your site header

Important Note

Add forms without script tags

Important Note

Troubleshooting

Still having issues?

Related Integrations

References & Official Documentation

Next Steps

Configure MyFormConnect

Advanced Features

Need Help?

Static Sites Integration Guide

Prerequisites

Integration Methods

HTML Form (Recommended)

Copy your form UUID from MyFormConnect

Important Note

Add the form HTML to your page

Important Note

Upload and test

Important Note

Site-wide loader.js

Add loader.js to your site header

Important Note

Add forms without script tags

Important Note

Troubleshooting

Still having issues?

Related Integrations

References & Official Documentation

Next Steps

Configure MyFormConnect

Advanced Features

Need Help?

MyFormConnect - Request Demo

Thank you for scheduling a demo!

MyFormConnect - Any issues?

Thank you for your request!

MyFormConnect - Tailored Solution