FormBuilder for PGE CMS
Tool for building dynamic forms
Form-building tool with drag & drop interface, field dependency support, and ability to define custom actions after submission. FormBuilder was integrated with the capital group's internal CMS.
Overview
FormBuilder is a tool allowing content editors to create complex forms without developer involvement. The admin panel built with Angular enables visual form design, which is then exported as JSON and rendered by the Symfony backend. On the browser side, I created a dedicated TypeScript engine that, based on the dependency graph, recreates all dynamic behaviors defined in the builder.
- ✦Enable editors to create forms independently
- ✦Implement field dependency system
- ✦Create an intuitive drag & drop interface
- ✦Ensure full client-side and server-side validation
- ✦Build a dependency graph engine to recreate dynamic behaviors
Key Features
Drag & Drop
Intuitive dragging of form components onto canvas
Field Dependencies
Define conditions for showing and hiding fields
Dependency Graph Engine
Dedicated TypeScript engine recreating dependencies based on field connection graph
Custom Actions
Configure behavior after form submission
Validation
Real-time validation on the client side
JSON Export
Form structure exported to JSON for backend
Tech Stack
Frontend
Backend
Project Implementation Process
From initial business discussions to production deployment
Business Discussions
Week 1-2
The project began with a series of meetings with the business team and content editors. I wanted to understand their daily problems and frustrations related to the current form creation process. It turned out that each new form required IT tickets and waiting up to several weeks for implementation.
Conducted interviews with 8 content editors from different companies in the group
Identified the main problem - too long time from idea to form publication
Gathered requirements regarding field types and dependencies between them
Established feature priorities with the product owner