jQuery Form Engine (working name: $.formEngine)

Turn any long, messy HTML form into a polished multi-step wizard with validation, draft saving, resumable file uploads, spam protection, and a hosted backend that delivers submissions to email, Slack, webhooks, or Zapier. No server code required.

Status: 📐 Spec / pre-build Business model: Freemium SaaS. Free client-side wizard + paid hosted submissions/file backend.

1. The Problem

Forms are where businesses actually make money: lead capture, quotes, applications, onboarding, bookings. Yet in jQuery projects, building a good form is surprisingly painful:

| Pain | Reality today | |---|---| | Multi-step wizards | Hand-rolled show/hide logic, step state bugs, broken back button, validation that only runs on final submit | | Validation | jQuery Validate is aging; async rules (e.g. "is this email taken?"), conditional fields, and error UX are all DIY | | File uploads | Large files time out on PHP upload_max_filesize; no progress bars, no resume on flaky connections, risky server-side handling | | Spam | reCAPTCHA hurts conversion and privacy; honeypots alone get bypassed | | Backend | Someone has to write the PHP that validates, stores, emails, and forwards submissions, and maintain it forever | | Lost data | User fills 80% of a long application, browser crashes, everything is gone |

Agencies and WordPress / static-site developers feel this most. They build dozens of forms a year and don't want to maintain a backend for each one.

2. The Solution

Two layers that work independently or together:

1. The Wizard (free, client-side): progressively enhances an existing <form> into a multi-step experience with real-time validation and draft saving.
2. The Cloud (paid, hosted): a submission endpoint that receives data and files, filters spam, stores everything, and routes it wherever the customer wants.

Zero-config wizard

<form id="apply">
  <fieldset data-step="About you">     ... </fieldset>
  <fieldset data-step="Experience">    ... </fieldset>
  <fieldset data-step="Documents">
    <input type="file" name="cv" data-max-size="25MB" accept=".pdf,.docx">
  </fieldset>
  <fieldset data-step="Review">        ... </fieldset>
</form>

<script>
  $('#apply').formEngine({
    progress: 'bar',              // bar | steps | dots
    saveDraft: true,              // localStorage resume (built on our Form Guardian plugin)
    endpoint: 'fe_live_xxx'       // optional: send to our cloud; omit to submit to your own server
  });
</script>

Declarative validation + conditional logic

<input name="email" type="email" required data-validate="email|remote:/api/email-available">
<select name="employment">
  <option>Employed</option><option>Self-employed</option>
</select>
<input name="company" data-show-if="employment=Employed" required>

JavaScript API

$('#apply')
  .on('fe:step',    (e, { from, to }) => analytics.track('step', { to }))
  .on('fe:invalid', (e, { fields }) => console.warn(fields))
  .on('fe:success', (e, { submissionId }) => location.href = '/thanks');

$('#apply').formEngine('goTo', 2);
$('#apply').formEngine('validateStep');

3. Feature Set

🆓 Wizard Core (MIT, client-side)

| Feature | Notes | |---|---| | Auto-chunking | Split by <fieldset data-step>, or automatically every N fields | | Progress UI | Bar / numbered steps / dots, clickable completed steps | | Per-step validation | Built-in rules (required, email, url, min/max, pattern, match, file type/size) + custom + async remote rules | | Conditional fields & steps | data-show-if, skip entire steps based on answers | | Accessible errors | aria-invalid, aria-describedby, focus moves to first error, live announcements | | Draft save & resume | localStorage with "Resume where you left off?" prompt | | Browser history integration | Back button goes to the previous step instead of leaving the page | | Review step | Auto-generated summary of all answers with "Edit" links | | Keyboard flow | Enter advances steps, no accidental submits | | Works with any backend | Normal POST or AJAX to your own endpoint |

💎 Cloud (paid, hosted)

| Feature | Why customers pay | |---|---| | Hosted submission endpoint | No backend code; works on static sites, WordPress, Webflow embeds, legacy PHP | | Resumable chunked uploads | Direct-to-object-storage uploads (S3/R2) with progress, pause/resume, multi-GB files, virus scanning | | Invisible spam protection | Honeypot + timing analysis + proof-of-work challenge + IP reputation. No annoying CAPTCHA puzzles. | | Routing | Email notifications, autoresponders, Slack, Discord, webhooks, Zapier/Make, Google Sheets | | Submissions inbox | Search, filter, tag, export CSV, view uploaded files | | Server-side validation | Rules mirrored from the client so nobody can bypass them with curl | | Cross-device resume | "Email me a link to finish later", with drafts stored server-side | | Analytics | Step drop-off funnel ("62% abandon on step 3"), completion time, field-level friction | | Compliance | GDPR data export/delete, retention policies, EU data region, encrypted file storage | | Team & white-label | Agency workspaces per client, custom domain for endpoints, remove branding |

4. Technical Architecture

 Browser                                   Our Cloud
┌───────────────────────────┐      ┌────────────────────────────────────────┐
│ $.formEngine              │      │ API Gateway                            │
│  - step state machine     │ POST │  - endpoint key + origin check         │
│  - validation engine      │─────►│  - spam scoring pipeline               │
│  - draft storage          │      │  - server-side validation              │
│  - upload manager ────────┼──┐   ├────────────────────────────────────────┤
└───────────────────────────┘  │   │ Submissions DB (Postgres)              │
                               │   │ Job queue → email / Slack / webhooks   │
             presigned PUT     │   │ Analytics events                       │
                               └──►│ Object storage (S3/R2) + virus scan    │
                                   └────────────────────────────────────────┘

Key engineering decisions

• Progressive enhancement first. Without JS, the form still submits normally. With JS, it becomes a wizard. This is critical for reliability and SEO.
• Step state machine. Steps, visibility conditions and validation run as a small explicit state machine, which avoids the spaghetti show/hide bugs common in jQuery wizards.
• Uploads bypass the customer's server entirely. The client gets presigned URLs and uploads chunks directly to object storage, then the submission references file IDs. This eliminates PHP upload limits and timeouts.
• Validation rules are serializable. The same rule definitions run client-side (for UX) and server-side (for security).
• Delivery is queued and retried. Email, Slack and webhook delivery run in a job queue with retries and a dead-letter log, so no submission is ever silently lost.
• Never trust the client. Origin allowlists, per-endpoint rate limits, size caps, and file-type sniffing (magic bytes, not just extensions).

5. Monetization

| Plan | Price (indicative) | Includes | |---|---|---| | Free | $0 | Wizard core (unlimited), 100 cloud submissions/mo, 100 MB files, email routing, "Powered by" badge | | Pro | ~$15 / mo | 2,000 submissions/mo, 10 GB files, all integrations, spam shield, analytics, no badge | | Agency | ~$49 / mo | 15,000 submissions/mo, 100 GB, unlimited client workspaces, white-label, custom domains | | Business | ~$149 / mo | 100k submissions/mo, 1 TB, EU region, retention policies, SLA, priority support |

• Why it's sticky: submission history, routing rules and stored files make switching costly, and forms are revenue-critical, so customers rarely churn once they're live.
• Agency multiplier: one agency account can bring 20–50 client sites, and that growth comes through word of mouth.
• Upsell trigger: the free wizard gets a developer in the door. Their first need for "where do submissions go?" or "I need file uploads" converts them to Cloud.

6. Competitive Landscape

| Product | Strength | Our angle | |---|---|---| | Formspree / Basin / Getform | Simple hosted endpoints | We add a real wizard UX, validation, resumable uploads and funnel analytics, not just a POST target | | Typeform / Tally | Beautiful hosted forms | Ours run inside the customer's own site and markup, with no iframe, full styling control, and devs keep their HTML | | Gravity Forms / WPForms | WordPress ecosystem leaders | Not limited to WordPress; works on any jQuery site; more modern uploads and spam protection | | jQuery Validate + DIY PHP | Free | Saves days per project and removes backend maintenance |

Honest risks

• Crowded "form backend" market. Differentiate hard on wizard UX + large-file uploads + drop-off analytics, and on being developer-first.
• File storage costs and abuse. Enforce per-plan quotas, virus scanning, and file-type restrictions from day one.
• Email deliverability. Use a reputable transactional provider (Postmark/SES) with proper SPF/DKIM guidance for custom domains.

7. MVP Roadmap

| Phase | Scope | Goal | |---|---|---| | v0.1 | Step state machine, fieldset chunking, progress bar, built-in validation rules | Usable free wizard | | v0.2 | Conditional logic, async rules, draft resume, history integration, review step, a11y | Public free release | | v0.3 | Cloud endpoint, Postgres storage, email routing, dashboard inbox, spam honeypot + timing | Private beta | | v1.0 | Presigned chunked uploads, Slack/webhook routing, billing, Free + Pro plans | Public launch | | v1.x | Funnel analytics, Zapier/Sheets, proof-of-work spam shield, cross-device resume | Pro value | | v2.0 | Agency workspaces, white-label, EU region, retention policies | Agency + Business tiers |

Success metrics

• Under 10 minutes from sign-up to a working multi-step form receiving submissions
• Wizard core < 15 KB min+gzip
• Spam blocked ≥ 99% with < 0.1% false positives
• 100 paying accounts within 6 months of v1.0

8. Folder Plan

jquery-form-engine/
├── client/            # the jQuery wizard plugin (steps, validation, uploads, drafts)
├── server/            # submission API, spam pipeline, upload signing, delivery queue
├── dashboard/         # submissions inbox, routing rules, analytics, billing
├── demos/             # job application wizard, quote request, large file upload
└── README.md

9. Synergy With the Rest of the Toolkit

• Form Guardian (from jquery-ui-toolkit) is a natural fit for the draft-save engine
• Stacked Toasts can be the default success/error feedback UI
• Data Grid can power the submissions inbox in the dashboard
• Multiplayer can show "a teammate is reviewing this submission" in shared agency inboxes