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://myformcapture.com/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://myformcapture.com/loader.js" data-client-id="your-domain-uuid"></script>

2. Configure Features (Optional)

Customize loader behavior with data attributes:

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

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://myformcapture.com/api/v1/forms/your-form-uuid/responses">
  <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 myformcapture.com.
  • The form action contains /api/v1/forms/ (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://myformcapture.com/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://myformcapture.com/api/v1/forms/your-form-uuid/responses" 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://myformcapture.com/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://myformcapture.com/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.

How do I get my domain UUID?

Log into your MyFormCapture dashboard, go to your domain, and copy the Domain UUID from the domain you want to use.

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