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
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🛠️ 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 componentsForm 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.