ajaxed-forms


A lightweight JavaScript library that converts static HTML forms into AJAX-enabled forms. Built for SleekCMS but will work for any endpoint. Simply add a data-sleekcms attribute to your form and this script handles the rest.

Features

- 🚀 Zero dependencies
- 📦 Tiny footprint (~2KB)
- 🔄 Automatic AJAX form submission
- 🎯 Dynamic form detection with MutationObserver
- ✅ Success/error message display
- 🔒 Works with SleekCMS form endpoints
- 🧪 100% test coverage

Installation

$3

Include the script in your HTML:

``html





`

$3

`bash
npm install @sleekcms/ajaxed-forms
`

Then import in your JavaScript:

`javascript
import '@sleekcms/ajaxed-forms';
`

Usage

$3

Add the data-sleekcms attribute to your form with your SleekCMS form ID:

`html


Submit


`

$3

You can specify a custom action URL using the action or data-action attribute:

`html




Send



`

$3

The data-sleekcms attribute accepts a form ID in the format formname-uniqueid (e.g., contact-abc123). The script automatically constructs the SleekCMS endpoint:

`
https://form.sleekcms.com/[your-form-id]
`

How It Works

1. The script detects all forms with the data-sleekcms attribute
2. Automatically intercepts form submission and prevents default behavior
3. Submits form data via AJAX using the Fetch API
4. Displays submission status (success/error) below the form
5. Resets the form on successful submission
6. Watches for dynamically added forms using MutationObserver

Browser Support

- Modern browsers with Fetch API support
- Chrome, Firefox, Safari, Edge (latest versions)
- Gracefully degrades in older browsers with a console warning

Development

$3

`bash
npm install
`

$3

`bash


Run tests once

npm test

Run tests in watch mode

npm run test:watch

Run tests with coverage

npm run test:coverage
`

$3

The library has comprehensive test coverage including:

- Form detection and initialization
- Dynamic form detection with MutationObserver
- Successful and failed form submissions
- Network error handling
- Multiple action URL configurations
- Edge cases and browser compatibility

Current coverage: 100% statements, 100% functions, 100% lines, 94.44% branches

API

$3

- data-sleekcms: Required. Either a form ID (e.g., contact-abc123) or "true" when using custom action URLs
- action or data-action: Optional. Custom endpoint URL for form submission
- method: Optional. HTTP method (defaults to POST)

$3

The script handles both JSON and plain text responses:

JSON Response:
`json
{
"message": "Form submitted successfully!"
}
`

Plain Text Response:
`
Thank you for your submission!
``

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.