Tekmir Forms Documentation
Build, manage, and deploy powerful legal intake forms with Smart Blocks and workflows.
Overview
Tekmir Forms is a comprehensive form management platform designed for legal professionals. It consists of two main applications that work together to create a complete form lifecycle:
Form Builder
Design and configure forms using reusable Smart Blocks, workflow logic, and API integrations.
Form Renderer
Public-facing application that displays forms to end users and handles data submission.
Architecture: The Form Builder serves as your development environment, while the Form Renderer is the production environment where end users interact with your forms.
Quick Start
Get up and running with your first form in under 10 minutes.
Create a Smart Block
Navigate to Smart Block Designer and create a basic contact information form using AI prompts.
Build a Form
Use the Form Builder to drag your Smart Block into a single-step form.
Preview and Test
Use the preview function to test your form before publishing to the renderer.
Forms & Workflows
Forms
A Form is the user-facing interface that clients interact with. Every form is backed by a workflow, even simple single-step forms. Forms are organized by campaigns and can be tagged for easy discovery.
Workflows
A Workflow defines the execution logic and step sequence for a form. Workflows contain one or more FormSteps, each referencing a Smart Block. They support:
- Sequential step progression
- Conditional branching logic
- Data validation between steps
- Progress tracking and save states
FormSteps
A FormStep represents a single step in the workflow and references exactly one Smart Block. FormSteps can have dependencies on previous steps and conditional display logic.
Example Workflow Structure
Smart Blocks
Smart Blocks are reusable, self-contained UI components built with React and Tailwind CSS. They encapsulate both presentation logic and data validation, making them the building blocks of all forms.
Key Characteristics
- Self-contained: Include their own validation, styling, and logic
- Campaign-assigned: Each Smart Block is assigned to a specific campaign when created
- Multi-form usage: Can be used across multiple forms within workflows
- Configurable: Accept props for customization without code changes
- Responsive: Built with mobile-first design principles
Common Smart Block Examples
Smart Blocks are typically named to reflect their campaign, function, and intended workflow usage:
zantac-contact-intake-v1
Contact information collector for Zantac intake workflow
camp-lejeune-eligibility-screen-v2
Eligibility determination for Camp Lejeune qualification workflow
paraquat-medical-history-v1
Medical background collector for Paraquat case assessment
cerebral-damages-calculator-v1
Damage assessment for Cerebral arbitration workflow
zantac-document-upload-v1
Document collection for Zantac case documentation workflow
camp-lejeune-review-summary-v1
Final review step for Camp Lejeune intake completion
Campaigns & Organization
Campaigns
A Campaign is a group of like matters. A campaign for mass torts will often have a corresponding multidistrict litigation, but not all matters within the campaign will be in the multidistrict litigation.
Campaign Examples
Campaigns serve as the primary organizational structure for grouping related forms and Smart Blocks within the Tekmir Forms platform. Each Smart Block is assigned to a specific campaign when created, helping maintain organization as your caseload grows.
Functions
Functions describe the role or purpose of a Smart Block within a workflow. Common functions include:
Tags
Tags are user-defined labels for filtering and categorizing Smart Blocks and forms. Use tags to mark special requirements or characteristics:
Form Builder
The Form Builder provides a visual interface for assembling Smart Blocks into complete user journeys. Use drag-and-drop functionality to arrange steps and configure conditional logic.
Features
- Visual Step Arrangement: Drag Smart Blocks to reorder workflow steps
- Step Dependencies: Define prerequisites for step visibility
- Progress Configuration: Choose between Simple mode (single Smart Block = 100% progress) or Multi-Step mode (each Smart Block tracked separately with overall completion percentage)
Smart Block Designer
The Smart Block Designer combines AI-powered generation with manual code editing to create sophisticated, reusable form components. Generate initial components with natural language prompts, then refine with direct code editing.
AI Generation
Describe your requirements in plain English to generate initial Smart Block code:
Manual Editing
Access full React/TypeScript code for custom modifications. The editor provides:
- Syntax highlighting and error detection
- Live preview of changes
- Tailwind CSS autocomplete
- Component prop validation
Tip: Start with AI generation to get the basic structure, then use manual editing for fine-tuning and advanced features.
API Definitions
Connect your forms to external systems without writing backend code. Upload OpenAPI specifications and map form fields directly to API endpoints using a visual interface.
Setup Process
Upload OpenAPI Specification
Import your openapi.json file to automatically discover available endpoints and schemas.
Browse Endpoints
Explore available API methods, view request/response schemas, and test endpoints directly.
Map Form Fields
Use the visual field mapper to connect Smart Block outputs to API parameters.
Field Mapping
The field mapper provides a visual interface for connecting form data to API parameters. Supports data transformation, validation, and error handling.
Mapping Example
Form Renderer Overview
The Form Renderer is the production environment where end users interact with your forms. It handles form display, user input validation, progress tracking, and data submission.
Key Features
- Step-by-step Navigation: Guides users through multi-step workflows
- Real-time Validation: Validates inputs using Smart Block validation logic
- Progress Tracking: Shows completion status and allows save/resume
- Responsive Design: Optimized for desktop and mobile devices
- API Integration: Automatically submits data based on field mappings
Important: The Form Renderer is read-only. Users cannot modify forms directly. All changes must be made in the Form Builder and then deployed to the renderer.
User Experience
The Form Renderer provides a streamlined experience for end users completing intake forms. Understanding the user journey helps you design better workflows.
User Journey
Form Access
User accesses form via direct link or embedded iframe
Step Completion
User completes each step with real-time validation feedback
Progress Tracking
System saves progress and allows users to resume later
Submission
Data is validated and submitted to configured APIs
Performance Considerations
- Forms load in under 2 seconds on standard connections
- Step transitions are instantaneous with client-side validation
- Data is saved automatically every 30 seconds during completion
- Mobile optimization ensures usability on all device sizes
Design Patterns
Smart Block Design
✓ Descriptive Naming
Use clear, functional names that describe what the block does and its intended campaign
✓ AI-First Validation
Generate validation logic using AI prompts, then refine manually as needed
✗ Monolithic Components
Avoid creating massive Smart Blocks that handle multiple concerns or functions
Workflow Organization
✓ Logical Progression
Order steps from general to specific (contact → eligibility → details)
✓ Early Qualification
Place eligibility screens early to avoid wasted user effort on unqualified cases
✓ Comprehensive Detail Collection
Don't hesitate to create longer workflows when legal requirements demand thorough documentation
Naming Conventions
Recommended Patterns
Performance & Scale
Smart Block Optimization
- Minimize Dependencies: Keep Smart Blocks lightweight with minimal external dependencies
- Lazy Loading: Use dynamic imports for heavy components that aren't immediately visible
- Efficient Validation: Implement client-side validation to reduce server requests
- Image Optimization: Use appropriate image formats and sizes for form elements
Workflow Performance
- Step Preloading: Preload next step components while user completes current step
- Data Persistence: Save form data locally to prevent loss during network issues
- Conditional Loading: Only load Smart Blocks when their conditions are met
- API Batching: Batch API calls when possible to reduce network overhead
Scaling Considerations
Team Scale
- • Establish shared component libraries
- • Document Smart Block APIs
- • Use consistent tagging strategies
- • Regular cleanup of unused components
Usage Scale
- • Monitor form completion rates
- • Optimize high-traffic workflows
- • Implement caching strategies
- • Plan for peak usage periods
Glossary
Campaign
A matter type or case category used to organize related forms and Smart Blocks (e.g., "Zantac Litigation").
Form
The user-facing interface that clients interact with, backed by a workflow structure.
FormStep
A single step in a workflow that references exactly one Smart Block and may have conditional logic.
Function
A categorization that describes the role of a Smart Block (e.g., "eligibility", "contact-info", "damages").
Smart Block
A reusable, self-contained UI component built with React and Tailwind CSS that includes validation and logic.
Tag
User-defined labels for filtering and categorizing Smart Blocks and forms (e.g., "hipaa", "required").
Workflow
The execution structure that defines step sequence, conditional logic, and data flow for a form.