Using Loader.js

Transform any HTML form into a powerful, secure, and user-friendly experience with our enhanced JavaScript loader

Quick Start

Add this single line to your HTML to enable AJAX conversion, real-time validation, and security:

<script src="https://myformconnect.io/loader.js" data-client-id="your-domain-uuid"></script>

Important: Add data-mfc="true" to any form you want the loader to enhance.

AJAX Conversion

Automatically converts normal forms to AJAX with loading states and smooth UX

Real-time Validation

Instant field validation with elegant error messages and visual feedback

Security Protection

Built-in protection against XSS, SQL injection, and malicious content

Honeypot Protection

Dynamic honeypot fields to detect and block bot submissions

Success/Error Popups

Beautiful popups instead of redirects with form clearing on success

Form Data Persistence

Automatically save and restore form data to prevent data loss

Easy Integration

Works with any HTML form - no framework dependencies required

How to Use

1. Add the Script to Your HTML

Include the MyFormCapture loader script in your HTML page:

HTML 
<script src="https://myformconnect.io/loader.js" data-client-id="your-form-or-domain-uuid"></script>

Use the full absolute URL for your MFC host (e.g. https://myformconnect.io/loader.js), not a relative path like /loader.js or ../loader.js.

data-client-id is required on the script tag. For the standard loader, your form UUID (from the form action /f/…) or your domain UUID both work. CAPTCHA is resolved from the form action URL, not from data-client-id.

2. Configure Features (Optional)

Customize loader behavior with data attributes:

<script src="https://myformconnect.io/loader.js" 
        data-client-id="your-form-or-domain-uuid"
        data-validation="true"
        data-honeypot="true"
        data-captcha="auto"></script>

Enable CAPTCHA in the dashboard under Settings → Spam Protection (setup guide). With data-captcha="auto" (default), the loader fetches your form's CAPTCHA config and renders reCAPTCHA, hCAPTCHA, or Turnstile before the submit button.

Configuration Options:

  • data-validation - Enable/disable real-time validation (default: true)
  • data-honeypot - Enable/disable honeypot protection (default: true)
  • data-captcha - CAPTCHA mode: auto|true|false (default: auto)
  • data-localstorage - Save/restore form data (default: false)

3. That's It!

Your forms will automatically be enhanced with AJAX, validation, and security:

Example Form 
<form data-mfc="true" action="https://myformconnect.io/f/your-form-uuid">
  <input type="text" name="name" placeholder="Your Name" required>
  <input type="email" name="email" placeholder="Your Email" required>
  <textarea name="message" placeholder="Your Message"></textarea>
  <button type="submit">Submit</button>
</form>

✨ What happens automatically:

  • Form converts to AJAX submission
  • Real-time field validation
  • Honeypot fields added for bot protection
  • Success/error popups
  • Loading states and visual feedback

Enhanced Loader.js Features

AJAX Conversion

Automatically converts normal forms to AJAX with loading states and smooth UX

Real-time Validation

Instant field validation with elegant error messages and visual feedback

Honeypot Protection

Dynamic honeypot fields to detect and block bot submissions

Success/Error Popups

Beautiful popups instead of redirects with form clearing on success

Security Protection

Built-in protection against XSS, SQL injection, and malicious content

Configurable Features

Enable/disable features via data attributes for maximum flexibility

Loader Targeting Rules

The loader enhances a form only when data-mfc="true" is present on the form and any one of the following is true:

  • The form's class contains mfc_ (e.g., class="mfc_your-form-uuid").
  • The form's id starts with mfc_ (e.g., id="mfc_your-form-uuid").
  • The form action contains myformconnect.io or myformcapture.com.
  • The form action contains /f/ (for same-origin/app endpoints).

Add data-mfc="true" to opt-in explicitly, then match any one of the above for enhancement.

Usage Examples

Basic HTML Form with Enhanced Features

<!-- Add the enhanced loader script -->
<script src="https://myformconnect.io/loader.js" 
        data-client-id="your-domain-uuid"
        data-validation="true"
        data-honeypot="true"
        data-localstorage="true"></script>

<!-- Your form (works with any HTML form) -->
<form data-mfc="true" action="https://myformconnect.io/f/your-form-uuid" class="mfc_your-form-uuid" id="mfc_your-form-uuid">
  <input type="text" name="name" placeholder="Your Name" required>
  <input type="email" name="email" placeholder="Your Email" required>
  <textarea name="message" placeholder="Your Message"></textarea>
  <button type="submit">Submit</button>
</form>

This form will automatically be converted to AJAX with real-time validation, honeypot protection, success popups, and form data persistence.

Minimal Configuration

<!-- Minimal setup with defaults -->
<script src="https://myformconnect.io/loader.js" data-client-id="your-domain-uuid"></script>

Uses all default settings: validation enabled, honeypot enabled, success/error popups enabled, CAPTCHA auto-detect.

Production with Obfuscation

<!-- For production with obfuscation -->
<script src="https://myformconnect.io/loader.obf.js" data-client-id="your-domain-uuid"></script>

Frequently Asked Questions

Do I need to modify my existing forms?

No! The loader works with your existing HTML forms. Just add the script tag and your forms will be automatically converted to AJAX with enhanced features.

What should I use for data-client-id?

Use your form UUID (from action="https://myformconnect.io/f/YOUR_FORM_UUID") or your domain UUID from the dashboard. Both work with the standard loader script.

How do I enable CAPTCHA on my form?

Configure spam protection in the dashboard, add data-mfc="true" to your form, and include the loader with data-captcha="auto". Do not add your own fetch() submit handler — the loader must handle submission to attach CAPTCHA tokens. See the CAPTCHA setup guide.

My form is hidden until the user clicks a button (tabs, accordion, modal). Will CAPTCHA work?

Yes. The loader waits until the form becomes visible, then mounts the CAPTCHA widget. If you reveal the form dynamically after page load, call MyFormCapture.utils.initializeForm(formElement) once when the panel opens.

What happens when validation fails?

You'll see an error popup with details when validation fails. The form won't submit until all validation passes.

Can I disable certain features?

Yes! Use data attributes to disable features: data-validation="false", data-honeypot="false".

Does it work with all frameworks?

Yes! The loader works with any HTML form, including those created with React, Vue, Angular, or plain HTML.

How does form data persistence work?

When enabled, the loader automatically saves form data to localStorage as users type. If they refresh the page or navigate away, their data is restored when they return. Data is encrypted and namespaced by domain and form UUID for security.

Is it secure?

Absolutely! The loader provides built-in security protection against XSS, SQL injection, malicious content, and bot submissions via honeypot fields. Form data is encrypted before being stored in localStorage.

Need Help?

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

Contact Support