Form Builder
Create and manage form layouts
Components
History
{{ isPreview ? 'Form Preview' : 'Form Canvas' }}
Field Settings
No Field Selected
Click on any form field in the canvas to configure its settings here.
{{ getComponentTypeName(formStore.selectedComponent.type) }}
{{ formStore.selectedComponent.props.label || formStore.selectedComponent.props.name || 'Untitled' }}
Quick Settings
Create a New Form
Get started by creating a new form or navigate back to manage your existing forms.
Submit Button Configuration
Configure the default submit button that appears at the bottom of your form. Note: If you add a custom submit button component to your form, the default button will be hidden automatically.
When enabled, a submit button will appear at the bottom of your form unless you add a custom submit button component.
Preview
This is how your submit button will appear in the form.
Custom JavaScript
Write custom JavaScript to add dynamic behavior to your form. Scripts run securely in a sandboxed environment with access to form fields and utility functions.
📚 Core Functions
getField('name') - Get field valuesetField('name', value) - Set field value and trigger eventshideField('name') - Hide a fieldshowField('name') - Show a fielddisableField('name') - Disable a fieldenableField('name') - Enable a fieldvalidateField('name') - Trigger field validationgetAllFieldValues() - Get all form values as objectonFieldChange(['field1', 'field2'], callback) - Listen for field changes🎨 UI & Notifications
showSuccess('message') - Display success notificationshowError('message') - Display error notificationshowInfo('message') - Display info notificationquerySelector('selector') - Safe DOM querying within form⚡ Conditional Logic Optimization
onFieldChange with the same trigger field:🛠️ Utilities
Math.* - Mathematical functions (Math.round, Math.max, etc.)Date - Date object for date/time operationsNumber(), String(), Array - Type conversionsetTimeout(), setInterval() - Timing functionsconsole.log(), console.warn() - Debug loggingCustom CSS
Add custom styles to enhance your form appearance. Use .form-container to target the form.
🎨 CSS Selectors
.form-container - Main form wrapper.form-field - Individual form fields.form-field[data-name="fieldName"] - Specific field.form-section - Form sections.form-submit - Submit button.info-display - Info display components⚡ Performance Optimization
onFieldChange handlersForm Events
Configure when your custom scripts should run. Field change events are detected automatically in real-time when users interact with form fields.
onFieldChange() callbacks to work in your scripts.
Event Triggers
Script Execution Mode
Form Configuration
This section displays the complete form configuration as JSON for developers.
Warning: Direct JSON Editing
Changes made to JSON directly will replace your form configuration when you click "Apply JSON Changes". Ensure the JSON is valid before applying changes.
You have unsaved changes
Are you sure you want to leave? Your changes will be lost.
Basic Inputs
- • Text, Number, Email, Password
- • Text Area, URL, Phone
- • Date, Time, Date & Time
- • Color Picker, Range Slider
Selection Inputs
- • Dropdown, Radio Buttons
- • Checkboxes, Switch Toggle
- • File Upload, Drop Zone
- • OTP Verification
Layout Elements
- • Headings, Paragraphs
- • Dividers, Form Sections
- • Information Display
- • Action Buttons
Advanced Features
- • Dynamic Lists
- • Repeating Groups
- • Conditional Logic
- • Custom Scripts
Quick Settings (Right Panel)
- • Label: Field name displayed to users
- • Name: Internal field identifier
- • Placeholder: Hint text in empty fields
- • Required: Make field mandatory
- • Width: Control field size (S, M, L, XL)
Advanced Settings (Settings Icon)
- • Validation: Add custom validation rules
- • Conditional Logic: Show/hide based on other fields
- • Custom Scripts: Add JavaScript functionality
- • Button Links: Configure process links and iframe parameters
Link Configuration
- • No Link: Regular button behavior
- • Custom URL: Link to any website
- • Process Link: Link to published workflows
Iframe Integration
- • Debug Mode: Control UI visibility (OFF = iframe mode)
- • Hide Completion: Auto-advance to next step
- • Theme: Apply custom themes (Dark/Light)
- • Custom Parameters: Add additional URL parameters
Keyboard Shortcuts
- • Ctrl+S Save form
- • Ctrl+Z Undo changes
- • Delete Remove selected field
Best Practices
- • Use descriptive field names
- • Group related fields together
- • Test your form in preview mode
- • Save your work frequently
Click the Preview button to see how your form will look to users. In preview mode:
- • Test form functionality and validation
- • Check responsive design on different devices
- • Verify all field configurations work correctly
- • Test button links and iframe integrations