Drag & Drop Form Builder

Form Canvas

Created Forms

Form Name	Actions
Form 1
Form 2

// --- State --- let formElements = []; let selectedElementId = null; let idCounter = 1; // --- DOM Elements --- const canvas = document.getElementById('canvas'); const draggables = document.querySelectorAll('.draggable'); const propertiesForm = document.getElementById('propertiesForm'); const exportBtn = document.getElementById('exportBtn'); const exportArea = document.getElementById('exportArea'); // --- Drag & Drop from Sidebar --- draggables.forEach(draggable => { draggable.addEventListener('dragstart', e => { draggable.classList.add('dragging'); e.dataTransfer.effectAllowed = 'copy'; e.dataTransfer.setData('text/plain', draggable.dataset.type); }); draggable.addEventListener('dragend', () => { draggable.classList.remove('dragging'); }); }); canvas.addEventListener('dragover', e => { e.preventDefault(); canvas.classList.add('drag-over'); }); canvas.addEventListener('dragleave', e => { canvas.classList.remove('drag-over'); }); canvas.addEventListener('drop', e => { e.preventDefault(); canvas.classList.remove('drag-over'); const type = e.dataTransfer.getData('text/plain'); if (type) { addElement(type); } }); // --- Add Element --- function addElement(type) { const id = 'el_' + idCounter++; let element = { id, type, label: capitalize(type) + ' Label', placeholder: '', options: type === 'select' || type === 'radio' ? ['Option 1', 'Option 2'] : undefined, required: false, value: '', name: id, rows: type === 'textarea' ? 3 : undefined, buttonText: type === 'button' ? 'Submit' : undefined, style: { backgroundColor: '#eebbc3', borderRadius: 8, borderColor: '#232946', borderWidth: 2, borderStyle: 'solid', color: '#232946' } }; formElements.push(element); selectedElementId = id; renderCanvas(); renderProperties(); } // --- Render Canvas --- function renderCanvas() { canvas.innerHTML = ''; formElements.forEach(el => { const wrapper = document.createElement('div'); wrapper.className = 'form-element' + (el.id === selectedElementId ? ' selected' : ''); wrapper.tabIndex = 0; wrapper.addEventListener('click', e => { e.stopPropagation(); selectedElementId = el.id; renderCanvas(); renderProperties(); }); // Apply custom styles if (el.style) { wrapper.style.background = el.style.backgroundColor || ''; wrapper.style.borderRadius = (el.style.borderRadius ?? 8) + 'px'; wrapper.style.borderColor = el.style.borderColor || ''; wrapper.style.borderWidth = (el.style.borderWidth ?? 2) + 'px'; wrapper.style.borderStyle = el.style.borderStyle || 'solid'; wrapper.style.color = el.style.color || ''; } // Remove button const removeBtn = document.createElement('button'); removeBtn.className = 'remove-btn'; removeBtn.title = 'Remove'; removeBtn.innerHTML = '×'; removeBtn.addEventListener('click', e => { e.stopPropagation(); formElements = formElements.filter(f => f.id !== el.id); if (selectedElementId === el.id) selectedElementId = null; renderCanvas(); renderProperties(); }); // Render element switch (el.type) { case 'text': wrapper.appendChild(createLabel(el)); wrapper.appendChild(createInput(el)); break; case 'textarea': wrapper.appendChild(createLabel(el)); wrapper.appendChild(createTextarea(el)); break; case 'checkbox': wrapper.appendChild(createInput(el)); wrapper.appendChild(createLabel(el)); break; case 'radio': wrapper.appendChild(createLabel(el)); el.options.forEach((opt, idx) => { const radio = document.createElement('input'); radio.type = 'radio'; radio.name = el.name; radio.disabled = true; wrapper.appendChild(radio); const optLabel = document.createElement('span'); optLabel.textContent = opt; optLabel.style.marginRight = '8px'; wrapper.appendChild(optLabel); }); break; case 'select': wrapper.appendChild(createLabel(el)); const select = document.createElement('select'); select.disabled = true; el.options.forEach(opt => { const option = document.createElement('option'); option.textContent = opt; select.appendChild(option); }); wrapper.appendChild(select); break; case 'button': const btn = document.createElement('button'); btn.type = 'button'; btn.textContent = el.buttonText || 'Submit'; btn.disabled = true; btn.style.background = el.style.backgroundColor || ''; btn.style.borderRadius = (el.style.borderRadius ?? 8) + 'px'; btn.style.borderColor = el.style.borderColor || ''; btn.style.borderWidth = (el.style.borderWidth ?? 2) + 'px'; btn.style.borderStyle = el.style.borderStyle || 'solid'; btn.style.color = el.style.color || ''; wrapper.appendChild(btn); break; } wrapper.appendChild(removeBtn); canvas.appendChild(wrapper); }); } function createLabel(el) { const label = document.createElement('label'); label.textContent = el.label || ''; if (el.style && el.type !== 'button') { label.style.color = el.style.color || ''; } return label; } function createInput(el) { const input = document.createElement('input'); input.type = el.type === 'checkbox' ? 'checkbox' : 'text'; input.placeholder = el.placeholder || ''; input.disabled = true; if (el.style) { input.style.borderRadius = (el.style.borderRadius ?? 8) + 'px'; input.style.borderColor = el.style.borderColor || ''; input.style.borderWidth = (el.style.borderWidth ?? 2) + 'px'; input.style.borderStyle = el.style.borderStyle || 'solid'; input.style.background = el.style.backgroundColor || ''; input.style.color = el.style.color || ''; } return input; } function createTextarea(el) { const textarea = document.createElement('textarea'); textarea.rows = el.rows || 3; textarea.placeholder = el.placeholder || ''; textarea.disabled = true; if (el.style) { textarea.style.borderRadius = (el.style.borderRadius ?? 8) + 'px'; textarea.style.borderColor = el.style.borderColor || ''; textarea.style.borderWidth = (el.style.borderWidth ?? 2) + 'px'; textarea.style.borderStyle = el.style.borderStyle || 'solid'; textarea.style.background = el.style.backgroundColor || ''; textarea.style.color = el.style.color || ''; } return textarea; } // --- Render Properties Panel --- function renderProperties() { propertiesForm.innerHTML = ''; const el = formElements.find(f => f.id === selectedElementId); if (!el) return; // Label propertiesForm.appendChild(formRow('Label', 'label', el.label, 'text')); // Placeholder if (['text', 'textarea'].includes(el.type)) { propertiesForm.appendChild(formRow('Placeholder', 'placeholder', el.placeholder, 'text')); } // Options if (['select', 'radio'].includes(el.type)) { const row = document.createElement('div'); row.className = 'form-row'; const label = document.createElement('label'); label.textContent = 'Options (comma separated)'; row.appendChild(label); const input = document.createElement('input'); input.type = 'text'; input.value = el.options.join(', '); input.addEventListener('input', e => { el.options = e.target.value.split(',').map(s => s.trim()).filter(Boolean); renderCanvas(); }); row.appendChild(input); propertiesForm.appendChild(row); } // Rows for textarea if (el.type === 'textarea') { propertiesForm.appendChild(formRow('Rows', 'rows', el.rows, 'number', 1)); } // Button text if (el.type === 'button') { propertiesForm.appendChild(formRow('Button Text', 'buttonText', el.buttonText, 'text')); } // Required if (['text', 'textarea', 'checkbox', 'select', 'radio'].includes(el.type)) { const row = document.createElement('div'); row.className = 'form-row'; const label = document.createElement('label'); label.textContent = 'Required'; row.appendChild(label); const input = document.createElement('input'); input.type = 'checkbox'; input.checked = el.required; input.addEventListener('change', e => { el.required = e.target.checked; }); row.appendChild(input); propertiesForm.appendChild(row); } // --- Style Section --- const styleSection = document.createElement('div'); styleSection.className = 'style-section'; const styleTitle = document.createElement('div'); styleTitle.className = 'style-section-title'; styleTitle.textContent = 'Style'; styleSection.appendChild(styleTitle); // Background Color styleSection.appendChild(styleRow('Background', 'backgroundColor', el.style.backgroundColor, 'color')); // Text Color styleSection.appendChild(styleRow('Text Color', 'color', el.style.color, 'color')); // Border Color styleSection.appendChild(styleRow('Border Color', 'borderColor', el.style.borderColor, 'color')); // Border Radius styleSection.appendChild(styleRow('Border Radius', 'borderRadius', el.style.borderRadius, 'number', 0, 'px')); // Border Width styleSection.appendChild(styleRow('Border Width', 'borderWidth', el.style.borderWidth, 'number', 0, 'px')); // Border Style styleSection.appendChild(styleRow('Border Style', 'borderStyle', el.style.borderStyle, 'select', undefined, undefined, [ { value: 'solid', label: 'Solid' }, { value: 'dashed', label: 'Dashed' }, { value: 'dotted', label: 'Dotted' }, { value: 'double', label: 'Double' }, { value: 'groove', label: 'Groove' }, { value: 'ridge', label: 'Ridge' }, { value: 'inset', label: 'Inset' }, { value: 'outset', label: 'Outset' }, { value: 'none', label: 'None' } ])); propertiesForm.appendChild(styleSection); } function formRow(labelText, key, value, type = 'text', min, unit) { const row = document.createElement('div'); row.className = 'form-row'; const label = document.createElement('label'); label.textContent = labelText; row.appendChild(label); const input = document.createElement('input'); input.type = type; if (type === 'number' && min !== undefined) input.min = min; input.value = value ?? ''; input.addEventListener('input', e => { const el = formElements.find(f => f.id === selectedElementId); if (!el) return; el[key] = type === 'number' ? parseInt(e.target.value, 10) : e.target.value; renderCanvas(); }); if (unit) { const unitSpan = document.createElement('span'); unitSpan.textContent = unit; row.appendChild(input); row.appendChild(unitSpan); } else { row.appendChild(input); } return row; } function styleRow(labelText, styleKey, value, type, min, unit, options) { const row = document.createElement('div'); row.className = 'style-row'; const label = document.createElement('label'); label.textContent = labelText; row.appendChild(label); let input; if (type === 'select') { input = document.createElement('select'); options.forEach(opt => { const option = document.createElement('option'); option.value = opt.value; option.textContent = opt.label; input.appendChild(option); }); input.value = value || options[0].value; } else { input = document.createElement('input'); input.type = type; if (type === 'number' && min !== undefined) input.min = min; input.value = value ?? (type === 'color' ? '#ffffff' : ''); } input.addEventListener('input', e => { const el = formElements.find(f => f.id === selectedElementId); if (!el) return; if (type === 'number') { el.style[styleKey] = parseInt(e.target.value, 10) || 0; } else { el.style[styleKey] = e.target.value; } renderCanvas(); }); row.appendChild(input); if (unit && type === 'number') { const unitSpan = document.createElement('span'); unitSpan.textContent = unit; row.appendChild(unitSpan); } return row; } // --- Export HTML --- exportBtn.addEventListener('click', () => { const html = generateFormHTML(); exportArea.value = html; exportArea.style.display = 'block'; exportArea.select(); }); function styleToString(style) { if (!style) return ''; let s = ''; if (style.backgroundColor) s += `background:${style.backgroundColor};`; if (style.borderRadius !== undefined) s += `border-radius:${style.borderRadius}px;`; if (style.borderColor) s += `border-color:${style.borderColor};`; if (style.borderWidth !== undefined) s += `border-width:${style.borderWidth}px;`; if (style.borderStyle) s += `border-style:${style.borderStyle};`; if (style.color) s += `color:${style.color};`; return s; } function generateFormHTML() { let html = '<form>\\n'; formElements.forEach(el => { const styleStr = styleToString(el.style); switch (el.type) { case 'text': html += ` <label style="${styleStr}">${el.label}${el.required ? ' *' : ''}<input type="text" name="${el.name}" placeholder="${el.placeholder || ''}"${el.required ? ' required' : ''} style="${styleStr}"></label>\\n`; break; case 'textarea': html += ` <label style="${styleStr}">${el.label}${el.required ? ' *' : ''}<textarea name="${el.name}" rows="${el.rows || 3}" placeholder="${el.placeholder || ''}"${el.required ? ' required' : ''} style="${styleStr}"></textarea></label>\\n`; break; case 'checkbox': html += ` <label style="${styleStr}"><input type="checkbox" name="${el.name}"${el.required ? ' required' : ''} style="${styleStr}"> ${el.label}</label>\\n`; break; case 'radio': html += ` <label style="${styleStr}">${el.label}${el.required ? ' *' : ''}</label>\\n`; el.options.forEach(opt => { html += ` <label style="${styleStr}"><input type="radio" name="${el.name}" value="${opt}"${el.required ? ' required' : ''} style="${styleStr}"> ${opt}</label>\\n`; }); break; case 'select': html += ` <label style="${styleStr}">${el.label}${el.required ? ' *' : ''}<select name="${el.name}"${el.required ? ' required' : ''} style="${styleStr}">\\n`; el.options.forEach(opt => { html += ` <option value="${opt}">${opt}</option>\\n`; }); html += ' </select></label>\\n'; break; case 'button': html += ` <button type="button" style="${styleStr}">${el.buttonText || 'Submit'}</button>\\n`; break; } }); html += '</form>'; return html; } // --- Utility --- function capitalize(str) { return str.charAt(0).toUpperCase() + str.slice(1); } // --- Deselect on canvas click --- canvas.addEventListener('click', () => { selectedElementId = null; renderCanvas(); renderProperties(); }); // --- Initial Render --- renderCanvas(); renderProperties(); ``` body { font-family: sans-serif; margin: 0; display: flex; height: 100vh; } .container { display: flex; flex-grow: 1; } .sidebar { width: 250px; background-color: #f4f4f4; padding: 20px; border-right: 1px solid #ccc; } .sidebar.right { border-left: 1px solid #ccc; border-right: none; } .main { flex-grow: 1; padding: 20px; } .draggable-list { display: flex; flex-direction: column; } .draggable { background-color: #fff; border: 1px solid #ccc; padding: 10px; margin-bottom: 8px; cursor: grab; } .draggable:hover { background-color: #eee; } .dragging { opacity: 0.5; } .canvas { border: 2px dashed #ccc; min-height: 300px; padding: 20px; } .drag-over { background-color: #f0f8ff; border-color: #42a5f5; } .form-element { border: 1px solid #ccc; padding: 15px; margin-bottom: 10px; cursor: pointer; position: relative; } .form-element.selected { border-color: #42a5f5; box-shadow: 0 0 5px #42a5f5; } .form-element:focus { outline: none; border-color: #42a5f5; box-shadow: 0 0 5px #42a5f5; } .remove-btn { position: absolute; top: 5px; right: 5px; background: none; border: none; font-size: 16px; color: #888; cursor: pointer; } .remove-btn:hover { color: #333; } .properties-form .form-row, .style-section .style-row { display: flex; flex-direction: column; margin-bottom: 15px; } .properties-form label, .style-section label { margin-bottom: 5px; font-weight: bold; } .properties-form input[type="text"], .properties-form input[type="number"], .properties-form input[type="color"], .properties-form select, .style-section input[type="text"], .style-section input[type="number"], .style-section input[type="color"], .style-section select { padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; } .properties-form input[type="checkbox"] { margin-top: 5px; } .form-row input[type="number"] + span, .style-row input[type="number"] + span { margin-left: 5px; } .style-section { border: 1px solid #ccc; border-radius: 5px; padding: 10px; margin-top: 20px; } .style-section-title { font-weight: bold; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px; } .export-btn { padding: 10px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; margin-top: 20px; } .export-btn:hover { background-color: #45a049; } .export-area { width: 100%; min-height: 150px; margin-top: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; display: none; /* Hidden by default */ } /* Forms Table Styles */ .forms-table-container { margin-top: 20px; padding: 20px; } .forms-table { width: 100%; border-collapse: collapse; margin-top: 10px; } .forms-table th, .forms-table td { border: 1px solid #ccc; padding: 8px; text-align: left; } .forms-table th { background-color: #f0f0f0; } .forms-table tbody tr:nth-child(even) { background-color: #f9f9f9; } .forms-table button { padding: 8px 12px; margin-right: 5px; border: none; border-radius: 4px; cursor: pointer; } .forms-table .edit-btn { background-color: #2196F3; color: white; } .forms-table .save-btn { background-color: #4CAF50; color: white; } .forms-table .delete-btn { background-color: #f44336; color: white; } ``` ```