Form Builder INTERACTIVE

// Initialize the form builder const builder = new FormBuilder(document.getElementById('formBuilder'), { fields: [], onSave: (formData) => { console.log('Form saved:', formData); }, onChange: (formData) => { console.log('Form changed:', formData); } }); // Load existing form builder.loadForm(existingFormData); // Get form configuration const config = builder.getFormData(); // Switch to preview mode builder.setMode('preview'); // Add custom field type builder.addFieldType({ type: 'custom', label: 'Custom Field', icon: '⚡', defaultProps: { ... } });

builder.on('field-add', (field) => { console.log('Field added:', field); }); builder.on('field-update', (field) => { console.log('Field updated:', field); }); builder.on('field-delete', (fieldId) => { console.log('Field deleted:', fieldId); }); builder.on('mode-change', (mode) => { console.log('Mode changed to:', mode); }); builder.on('validation-error', (errors) => { console.log('Validation errors:', errors); });

// Handle form submission in preview mode builder.on('submit', async (formData) => { try { const response = await fetch('/api/submit', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formData) }); const result = await response.json(); console.log('Submission successful:', result); } catch (error) { console.error('Submission failed:', error); } }); // Validate before submission const isValid = builder.validate(); if (isValid) { const data = builder.getFormValues(); // Process form data }

// Add conditional logic to fields const conditionalField = { id: 'field_2', type: 'text', label: 'Company Name', conditions: [ { field: 'field_1', operator: 'equals', value: 'business', action: 'show' } ] }; // Complex conditions const complexCondition = { logic: 'AND', // AND or OR conditions: [ { field: 'age', operator: 'greater_than', value: 18 }, { field: 'country', operator: 'in', value: ['US', 'CA', 'UK'] } ], action: 'enable' // show, hide, enable, disable };