Multi-Step Form Schemas & Conditional Visibility Logic
Build conversion-optimized multi-step form wizards and dynamic conditional field rules that compile cleanly to hosted forms, HTML snippets, React components, and WordPress blocks.
- Organize complex intake flows into numbered wizard steps[] with per-step validation before advancing.
- Attach field.logic rules to dynamically show or hide fields based on preceding user answers.
- Supports 12 field types: text, email, textarea, number, tel, date, select, checkbox, rating, matrix, signature, and file.
- Form Studio compiles your steps and conditional logic into standalone HTML, React, and Next.js code.
1. Multi-Step & Conditional Rule JSON Schema
FormFork stores form definitions as a declarative JSON schema consisting of steps[] and fields[]. Each field can optionally define a logic object that evaluates another field in real time.
{
"steps": [
{
"id": "step-1",
"title": "Contact & Qualification",
"description": "Tell us about your organization"
},
{
"id": "step-2",
"title": "Technical Scope & Sign-Off",
"description": "Architecture requirements and NDA signature"
}
],
"fields": [
{
"name": "inquiry_type",
"label": "Inquiry Category",
"type": "select",
"options": ["Enterprise Partnership", "Custom API Integration", "General Support"],
"required": true,
"step": 1
},
{
"name": "enterprise_budget",
"label": "Target Annual Contract Budget",
"type": "select",
"options": ["$10,000 - $25,000", "$25,000 - $100,000", "$100,000+"],
"required": false,
"step": 1,
"logic": {
"enabled": true,
"action": "show",
"operator": "equals",
"sourceField": "inquiry_type",
"value": "Enterprise Partnership"
}
},
{
"name": "urgency_rating",
"label": "Deployment Urgency (1-5)",
"type": "rating",
"required": true,
"step": 2
},
{
"name": "expedited_notes",
"label": "Expedited Launch Requirements",
"type": "textarea",
"required": false,
"step": 2,
"logic": {
"enabled": true,
"action": "show",
"operator": "greater_than",
"sourceField": "urgency_rating",
"value": "3"
}
}
]
}2. Conditional Visibility Operators & Field Types
Conditional rules are evaluated both client-side (for instant UI transitions) and when generating exportable React/HTML code.
| Operator | Evaluation Behavior | Typical Example |
|---|---|---|
| equals | Case-insensitive exact match against sourceField value. | inquiry_type equals "Enterprise Partnership" |
| not_equals | True when sourceField does not match target value. | plan_tier not_equals "Free" |
| contains | Case-insensitive substring check on text or select values. | company_domain contains ".edu" |
| greater_than | Numeric comparison for number or rating fields. | urgency_rating greater_than "3" |
| is_empty / is_not_empty | Checks whether the source field is blank or populated. | referral_code is_not_empty |
Frequently Asked Technical Questions
What happens to required validation on a field that is hidden by conditional logic?
When a field is hidden because its conditional logic rule evaluates to false, client-side step validation automatically bypasses the required constraint so users are never blocked from advancing.
How are matrix grid fields stored in submission payloads?
Matrix fields are stored as structured nested key-value objects (e.g., { "Response Speed": "Exceeds", "API Reliability": "Exceeds" }) and render as formatted sub-tables inside the submission detail viewer.