Composition / Full form builder

Full form builder scene

Drag-design surface for the Mufflermen quote intake form. The FieldPalette sits on the left, the FormCanvas centres the active page, the FieldConfigPane edits the selected row. Above sits the MultiPageFormWizard. Below the canvas — the ConditionalLogicVisualizer. The right-hand rail also surfaces the SubmissionAnalyticsCard.

Production answer

Full form builder scene is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Full form builder scene states
Generative search brief

Full form builder scene: Drag-design surface for the Mufflermen quote intake form. The FieldPalette sits on the left, the FormCanvas centres the active page, the FieldConfigPane edits the selected row. Above sits the MultiPageFormWizard. Below the canvas — the ConditionalLogicVisualizer. The right-hand rail also surfaces the SubmissionAnalyticsCard.

Pages

Multi-page form

4 pages · 6 fields total
Form canvas

Quote intake form

Page 1 of 4 · Your vehicle
  1. Vehicle make*Pick your make
  2. Vehicle model*e.g. Hilux SR5 2.8 TD
  3. Suburb*e.g. Oak Flats
  4. Sound preference
  5. Vehicle photos
  6. Signature*
Logic flow

Visualised dependencies

Source fields drive conditions which toggle target visibility.

Source
Vehicle make
Sound preference
Suburb
Vehicle model
Conditions4
Target
Sound preference
Vehicle photos
Suburb
Signature
showhideskip torequire
Field inspector

Sound preference

Multi-select
RequiredOptional
Validation rules
RequiredMin length≥ 2Max length≤ 80Regex^[A-Z]Email formatAU phone format
Submissions · last 30 days

How the form performed

Total submissions1,284+12%
Average time-to-complete1m 48sper respondent
62%Completion
Drop-off by fieldLower bars = more abandonment
  • Vehicle make98%
  • Vehicle model92%
  • Suburb84%
  • Sound preference71%
  • Photos47%
  • Signature38%