Getting started
Key features of Form Builder
- Web interface with drag and drop functionality.
- Adaptive layout.
- Built-in form validation or optional external validation.
- Built-in web components based on React Suite library.
- Easy integration of custom components.
- Export form to JSON and import form from JSON.
- Powerful internationalization.
- Custom actions.
- Computable properties.
- Templates (forms within a form).
- Camunda FormBuilder.
- Designer customization.
Overview
The basic idea behind the Form Builder is simple - an online form is a number of components organized in a tree structure.
Each component has a set of properties:
- Different CSS styles for different screen resolutions.
- Simple properties (
string,boolean,number, etc.). - Events (
onClick,onSelect,onClose, etc.). - Actions are simply functions that are called when some event occurs.
- A set of rules for validating the value of a component.
Some component properties can be calculated using a JavaScript function or translated using the Fluent localization system.
Form Builder allows you to declaratively describe such components and then use them to create forms in the form designer.
Further reading
📄️ Overview
Discover FormEngine Designer features: drag & drop builder, real-time preview, JSON export, component library, property editors, and application integration.
📄️ Installation
Install FormEngine Designer in your React application. Complete setup guide with npm, configuration, and integration with your existing codebase.
📄️ Usage
Learn how to use FormEngine Designer: create forms visually, configure properties, add validation, export JSON, and integrate with FormEngine Core.