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.
Use this.getField('fieldName') to access form fields.
📚 Available Helper Functions
this.getField('name') - Get field valuethis.setField('name', value) - Set field valuethis.hideField('name') - Hide fieldthis.showField('name') - Show fieldthis.disableField('name') - Disable fieldthis.enableField('name') - Enable fieldthis.validateField('name') - Trigger field validationthis.getAllFieldValues() - Get all form valuesCustom 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.
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.