Form Builder

Form Canvas

Properties

* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; } body { background-color: #f5f5f5; } .container { display: flex; height: 100vh; } .sidebar { width: 250px; background-color: #2c3e50; color: white; padding: 20px; overflow-y: auto; } .sidebar h2, .canvas h2, .properties-panel h2 { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .form-elements { display: flex; flex-direction: column; gap: 10px; } .form-element { background-color: #34495e; padding: 10px; border-radius: 4px; cursor: grab; transition: background-color 0.2s; } .form-element:hover { background-color: #3d566e; } .canvas { flex: 1; padding: 20px; background-color: #ecf0f1; overflow-y: auto; } .form-preview { min-height: 300px; background-color: white; padding: 20px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .properties-panel { width: 300px; background-color: #34495e; color: white; padding: 20px; overflow-y: auto; } .form-field { margin-bottom: 15px; padding: 10px; background-color: #2c3e50; border-radius: 4px; position: relative; } .form-field:hover { outline: 2px solid #3498db; } .form-field.selected { outline: 2px solid #3498db; background-color: #3d566e; } .form-field .delete-btn { position: absolute; top: 5px; right: 5px; background-color: #e74c3c; color: white; border: none; border-radius: 3px; padding: 2px 5px; cursor: pointer; font-size: 12px; } .property-group { margin-bottom: 15px; } .property-group h3 { margin-bottom: 10px; font-size: 16px; } .property-row { margin-bottom: 10px; } .property-row label { display: block; margin-bottom: 5px; font-size: 14px; } .property-row input, .property-row select, .property-row textarea { width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ddd; background-color: #2c3e50; color: white; } .property-row textarea { min-height: 60px; } .btn { padding: 8px 15px; background-color: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; } .btn:hover { background-color: #2980b9; } document.addEventListener('DOMContentLoaded', function() { const formElements = document.querySelectorAll('.form-element'); const formCanvas = document.getElementById('form-canvas'); const formPreview = document.getElementById('form-preview'); const propertiesPanel = document.getElementById('properties-panel'); const propertiesForm = document.getElementById('properties-form'); let draggedElement = null; let selectedField = null; // Add drag events to form elements formElements.forEach(element => { element.addEventListener('dragstart', function(e) { draggedElement = this; e.dataTransfer.setData('text/plain', this.dataset.type); setTimeout(() => { this.style.opacity = '0.4'; }, 0); }); element.addEventListener('dragend', function() { this.style.opacity = '1'; }); }); // Canvas drop events formCanvas.addEventListener('dragover', function(e) { e.preventDefault(); }); formCanvas.addEventListener('dragenter', function(e) { e.preventDefault(); }); formCanvas.addEventListener('drop', function(e) { e.preventDefault(); const elementType = e.dataTransfer.getData('text/plain'); if (elementType) { addFormField(elementType, e.clientX, e.clientY); } }); // Add form field to canvas function addFormField(type, x, y) { const field = document.createElement('div'); field.className = 'form-field'; field.dataset.type = type; const deleteBtn = document.createElement('button'); deleteBtn.className = 'delete-btn'; deleteBtn.textContent = '×'; deleteBtn.addEventListener('click', function(e) { e.stopPropagation(); field.remove(); if (selectedField === field) { propertiesPanel.style.display = 'none'; selectedField = null; } }); field.appendChild(deleteBtn); let fieldContent; switch (type) { case 'text': fieldContent = createTextField(); break; case 'email': fieldContent = createEmailField(); break; case 'number': fieldContent = createNumberField(); break; case 'select': fieldContent = createSelectField(); break; case 'checkbox': fieldContent = createCheckboxField(); break; case 'radio': fieldContent = createRadioField(); break; case 'textarea': fieldContent = createTextareaField(); break; case 'button': fieldContent = createButtonField(); break; default: fieldContent = document.createElement('div'); fieldContent.textContent = 'Unknown field type'; } field.appendChild(fieldContent); formPreview.appendChild(field); // Position the field near the drop point const rect = formCanvas.getBoundingClientRect(); field.style.position = 'absolute'; field.style.left = (x - rect.left - 10) + 'px'; field.style.top = (y - rect.top - 10) + 'px'; // Make field draggable within canvas makeDraggable(field); // Select field when clicked field.addEventListener('click', function(e) { if (e.target !== deleteBtn) { selectField(field); } }); } // Create different field types function createTextField() { const container = document.createElement('div'); const label = document.createElement('label'); label.textContent = 'Text Input'; const input = document.createElement('input'); input.type = 'text'; input.placeholder = 'Enter text'; container.appendChild(label); container.appendChild(input); return container; } function createEmailField() { const container = document.createElement('div'); const label = document.createElement('label'); label.textContent = 'Email Input'; const input = document.createElement('input'); input.type = 'email'; input.placeholder = 'Enter email'; container.appendChild(label); container.appendChild(input); return container; } function createNumberField() { const container = document.createElement('div'); const label = document.createElement('label'); label.textContent = 'Number Input'; const input = document.createElement('input'); input.type = 'number'; input.placeholder = 'Enter number'; container.appendChild(label); container.appendChild(input); return container; } function createSelectField() { const container = document.createElement('div'); const label = document.createElement('label'); label.textContent = 'Dropdown'; const select = document.createElement('select'); const option1 = document.createElement('option'); option1.value = 'option1'; option1.textContent = 'Option 1'; const option2 = document.createElement('option'); option2.value = 'option2'; option2.textContent = 'Option 2'; select.appendChild(option1); select.appendChild(option2); container.appendChild(label); container.appendChild(select); return container; } function createCheckboxField() { const container = document.createElement('div'); const label = document.createElement('label'); const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; const span = document.createElement('span'); span.textContent = 'Checkbox'; label.appendChild(checkbox); label.appendChild(span); container.appendChild(label); return container; } function createRadioField() { const container = document.createElement('div'); const label = document.createElement('label'); const radio = document.createElement('input'); radio.type = 'radio'; radio.name = 'radio-group'; const span = document.createElement('span'); span.textContent = 'Radio Button'; label.appendChild(radio); label.appendChild(span); container.appendChild(label); return container; } function createTextareaField() { const container = document.createElement('div'); const label = document.createElement('label'); label.textContent = 'Text Area'; const textarea = document.createElement('textarea'); textarea.placeholder = 'Enter text here...'; container.appendChild(label); container.appendChild(textarea); return container; } function createButtonField() { const container = document.createElement('div'); const button = document.createElement('button'); button.className = 'btn'; button.textContent = 'Button'; container.appendChild(button); return container; } // Make fields draggable within canvas function makeDraggable(element) { let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; element.onmousedown = dragMouseDown; function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // Get the mouse cursor position at startup pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); // Calculate the new cursor position pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; // Set the element's new position element.style.top = (element.offsetTop - pos2) + 'px'; element.style.left = (element.offsetLeft - pos1) + 'px'; } function closeDragElement() { // Stop moving when mouse button is released document.onmouseup = null; document.onmousemove = null; } } // Select field and show properties function selectField(field) { if (selectedField) { selectedField.classList.remove('selected'); } field.classList.add('selected'); selectedField = field; propertiesPanel.style.display = 'block'; // Clear previous properties propertiesForm.innerHTML = ''; // Add general properties const generalGroup = document.createElement('div'); generalGroup.className = 'property-group'; generalGroup.innerHTML = '

General

'; const idRow = document.createElement('div'); idRow.className = 'property-row'; idRow.innerHTML = ` ID `; const nameRow = document.createElement('div'); nameRow.className = 'property-row'; nameRow.innerHTML = ` Name `; const labelRow = document.createElement('div'); labelRow.className = 'property-row'; labelRow.innerHTML = ` Label `; const requiredRow = document.createElement('div'); requiredRow.className = 'property-row'; requiredRow.innerHTML = ` Required `; generalGroup.appendChild(idRow); generalGroup.appendChild(nameRow); generalGroup.appendChild(labelRow); generalGroup.appendChild(requiredRow); propertiesForm.appendChild(generalGroup); // Add type-specific properties const typeGroup = document.createElement('div'); typeGroup.className = 'property-group'; typeGroup.innerHTML = '

Type Specific

'; switch (field.dataset.type) { case 'text': case 'email': case 'number': addInputProperties(typeGroup, field); break; case 'select': addSelectProperties(typeGroup, field); break; case 'checkbox': case 'radio': addCheckboxRadioProperties(typeGroup, field); break; case 'textarea': addTextareaProperties(typeGroup, field); break; case 'button': addButtonProperties(typeGroup, field); break; } propertiesForm.appendChild(typeGroup); // Add style properties const styleGroup = document.createElement('div'); styleGroup.className = 'property-group'; styleGroup.innerHTML = '

Style

'; const widthRow = document.createElement('div'); widthRow.className = 'property-row'; widthRow.innerHTML = ` Width `; const borderRadiusRow = document.createElement('div'); borderRadiusRow.className = 'property-row'; borderRadiusRow.innerHTML = ` Border Radius `; styleGroup.appendChild(widthRow); styleGroup.appendChild(borderRadiusRow); propertiesForm.appendChild(styleGroup); // Add event listeners to property inputs setupPropertyListeners(field); } function getFieldLabel(field) { const label = field.querySelector('label'); return label ? label.textContent.replace('×', '').trim() : ''; } function addInputProperties(container, field) { const placeholderRow = document.createElement('div'); placeholderRow.className = 'property-row'; placeholderRow.innerHTML = ` Placeholder `; container.appendChild(placeholderRow); } function addSelectProperties(container, field) { const optionsRow = document.createElement('div'); optionsRow.className = 'property-row'; optionsRow.innerHTML = ` Options (comma separated) `; container.appendChild(optionsRow); } function getSelectOptions(field) { const options = field.querySelectorAll('option'); return Array.from(options).map(opt => opt.textContent).join(', '); } function addCheckboxRadioProperties(container, field) { const valueRow = document.createElement('div'); valueRow.className = 'property-row'; valueRow.innerHTML = ` Value `; container.appendChild(valueRow); } function addTextareaProperties(container, field) { const placeholderRow = document.createElement('div'); placeholderRow.className = 'property-row'; placeholderRow.innerHTML = ` Placeholder `; const rowsRow = document.createElement('div'); rowsRow.className = 'property-row'; rowsRow.innerHTML = ` Rows `; container.appendChild(placeholderRow); container.appendChild(rowsRow); } function addButtonProperties(container, field) { const textRow = document.createElement('div'); textRow.className = 'property-row'; textRow.innerHTML = ` Button Text `; const typeRow = document.createElement('div'); typeRow.className = 'property-row'; typeRow.innerHTML = ` Button Type `; container.appendChild(textRow); container.appendChild(typeRow); } function setupPropertyListeners(field) { // General properties document.getElementById('field-id')?.addEventListener('change', function() { field.id = this.value; }); document.getElementById('field-name')?.addEventListener('change', function() { field.dataset.name = this.value; const input = field.querySelector('input, select, textarea'); if (input) input.name = this.value; }); document.getElementById('field-label')?.addEventListener('change', function() { const label = field.querySelector('label'); if (label) label.textContent = this.value; }); document.getElementById('field-required')?.addEventListener('change', function() { field.dataset.required = this.checked; const input = field.querySelector('input, select, textarea'); if (input) input.required = this.checked; }); // Type-specific properties switch (field.dataset.type) { case 'text': case 'email': case 'number': document.getElementById('field-placeholder')?.addEventListener('change', function() { const input = field.querySelector('input'); if (input) input.placeholder = this.value; }); break; case 'select': document.getElementById('field-options')?.addEventListener('change', function() { const select = field.querySelector('select'); if (select) { select.innerHTML = ''; this.value.split(',').forEach(opt => { const option = document.createElement('option'); option.value = opt.trim().toLowerCase().replace(/\s+/g, '-'); option.textContent = opt.trim(); select.appendChild(option); }); } }); break; case 'checkbox': case 'radio': document.getElementById('field-value')?.addEventListener('change', function() { const input = field.querySelector('input'); if (input) input.value = this.value; }); break; case 'textarea': document.getElementById('field-placeholder')?.addEventListener('change', function() { const textarea = field.querySelector('textarea'); if (textarea) textarea.placeholder = this.value; }); document.getElementById('field-rows')?.addEventListener('change', function() { const textarea = field.querySelector('textarea'); if (textarea) textarea.rows = parseInt(this.value) || 4; }); break; case 'button': document.getElementById('field-text')?.addEventListener('change', function() { const button = field.querySelector('button'); if (button) button.textContent = this.value; }); document.getElementById('field-button-type')?.addEventListener('change', function() { const button = field.querySelector('button'); if (button) button.type = this.value; }); break; } // Style properties document.getElementById('field-width')?.addEventListener('change', function() { field.style.width = this.value; }); document.getElementById('field-border-radius')?.addEventListener('change', function() { field.style.borderRadius = this.value; }); } });