Form Examples

Real-world patterns across industries. Each example shows the controls used, the schema structure, and the real-world outcome.

SaaS · Multi-step · Validation

SaaS Customer Onboarding

A multi-step wizard that collects account details, verifies email, and connects to the approval workflow — saving 6–8 weeks of development per release cycle.

stepper text email select multiselect checkbox password
// Step 1 of stepper — account details { id: "step_1", type: "stepper", label: "Create Your Account", settings: { steps: [ { label: "Account", controlIds: ["email", "password", "company"] }, { label: "Profile", controlIds: ["first_name", "last_name", "role"] }, { label: "Plan", controlIds: ["plan_type", "interests"] } ], validateOnNext: true // block advance if step invalid } }
Mode usage
Users see the form in edit mode. After submission, the same schema renders in view mode for the approver — read-only, no code changes needed.
Validation
Email uses built-in email validator. Password uses pattern validator for strength. An async custom validator checks email availability against the API.
Draft save
The storage-js package auto-saves the draft after each step. If the user closes the browser and returns, their progress is restored from IndexedDB.
Workflow integration
On submission, a Flow Engine workflow is triggered. The same form schema is used as the Form Trigger node in Flow — no duplication, single source of truth.
Result: SaaS companies save 6–8 weeks of dev time per form release. 95% automation rate from form submission to account creation.
Financial Services · Compliance · Conditional Logic

Financial Loan Application

A 100+ field loan application with conditional sections, compliance tracking, and full audit trail — reducing processing time from 4 weeks to 10 days.

text number date select file-upload accordion checkbox data-table
// Conditional visibility — show co-applicant section only if toggled { id: "co_applicant_section", type: "accordion", label: "Co-Applicant Details", hidden: false, settings: { visibilityCondition: "values.has_co_applicant === true" } }, { id: "has_co_applicant", type: "switch", label: "Include a co-applicant", defaultValue: false, order: 5 }
Conditional logic
The co-applicant accordion is shown only when the switch is toggled. Conditions are schema-level expressions — no custom component code.
Compliance & audit
Every field change is logged with timestamp, user ID, and before/after value. The audit trail is stored in Data Ocean and satisfies KYC/AML requirements.
Admin mode
Loan officers access the same form in admin mode, which shows additional fields (risk score, internal notes) hidden from applicants.
File upload
The file-upload control handles income proof, ID documents, and bank statements with type validation and size limits configured in schema settings.
Result: Processing time reduced from 4 weeks to 10 days. 100% audit compliance. Zero manual data re-entry errors.
Healthcare · HIPAA · Real-time Validation

Healthcare Patient Intake

Digital patient intake on tablets. Reduces 30-minute paper check-ins to 5 minutes with 99% complete data and zero transcription errors.

text date select radio textarea multiselect signature (custom)
// Custom control — digital signature { id: "patient_signature", type: "signature-pad", // custom registered control label: "Patient Signature", required: true, order: 20, settings: { penColor: "#000", backgroundColor: "#fff", outputFormat: "base64-png" } } // Visibility: only show allergy details if allergies reported { id: "allergy_details", type: "textarea", label: "Please describe your allergies", settings: { visibilityCondition: "values.has_allergies === 'yes'" } }
Custom control
A signature pad control is registered via the plugin registry. It captures patient consent digitally and outputs base64 PNG — treated as a standard form value, stored and validated like any field.
HIPAA compliance
Multi-tenant isolation ensures each patient's data is isolated. All data encrypted in transit. XSS prevention blocks injection attacks. Audit trail per field for regulatory review.
Preview mode
Clinic administrators preview the form in preview mode with sample data before deploying to tablets — no live data required during setup.
Real-time validation
Date of birth validated against minimum age rules via a custom validator. Insurance ID format validated with a regex pattern in schema. Errors shown inline without page refresh.
Result: 5-minute check-in vs 30-minute paper process. 99% complete data on first submission. Zero transcription errors.
AI Agent · Prompt to Schema · No-Code

AI-Generated Form from Prompt

Describe a form in plain English. The AI agent generates a complete FormSchema JSON — controls, validation rules, layout, and section organisation — in seconds.

// User prompt: // "Create a vendor onboarding form with company details, // contact person, banking information, and tax ID. // Banking section should be collapsible." // AI-generated schema (excerpt): { controls: [ { id: "company_name", type: "text", label: "Company Name", required: true }, { id: "registration_number", type: "text", label: "Registration Number", validation: { pattern: "^[A-Z0-9]{6,12}$" } }, { id: "contact_name", type: "text", label: "Primary Contact Name", required: true }, { id: "contact_email", type: "email", label: "Contact Email", required: true }, { id: "banking_section", type: "collapsible-panel", label: "Banking Information", settings: { defaultExpanded: false } }, { id: "bank_name", type: "text", label: "Bank Name" }, { id: "account_number", type: "text", label: "Account Number", settings: { mask: true } }, { id: "tax_id", type: "text", label: "Tax ID / EIN", validation: { pattern: "^\\d{2}-\\d{7}$", message: "Enter Tax ID as XX-XXXXXXX" } } ] }
How it works
The AI agent uses the full 89+ control type inventory and property definitions as context. It maps your natural language description to the correct control types, sets validation rules, and organises the layout.
Output
The agent returns a valid FormSchema JSON that can be used directly with FormRenderer or imported into Atlas Form Studio for further editing. No manual schema writing needed.
Integration with Octopus
The AI form generation capability uses the Octopus multi-agent engine with a custom LLM prompt template that includes the full control property inventory as context.
Editing after generation
Generated schemas can be loaded into Atlas Form Studio for visual adjustment. Drag to reorder, double-click to reconfigure, or add controls from the palette — the JSON is the source of truth throughout.
Result: Form schema generated in seconds from a one-paragraph description. Business users build forms without involving developers.

Ready to build your forms?

Follow the get-started guide or explore the architecture.