'; for (var i = 0; i < total; i++) { // These classes define the STATE of the step (completed, active, upcoming) var state = i + 1 < current ? 'completed' : i + 1 === current ? 'active' : 'upcoming'; var stepData = STEPS[i] || { title: 'Step ' + (i + 1), desc: '' }; html += '

'; html += '

' + (state === 'completed' ? '✓' : (i + 1)) + '

'; html += '

' + stepData.title + '' + stepData.desc + '

'; html += '

'; } html += '

'; header.innerHTML = html; } function renderLabel(current, total) { var label = document.getElementById('custom-form-label'); if (!label) return; label.textContent = 'Step ' + current + ' of ' + total; } function update() { var current = getCurrentStep(); var total = getStepCount(); renderHeader(current, total); renderLabel(current, total); } function init() { var container = document.querySelector('.formContainer'); if (!container) return; container.style.fontFamily = "'forma-djr-micro', sans-serif"; // Create header element var header = document.getElementById('custom-form-header'); if (!header) { header = document.createElement('div'); header.id = 'custom-form-header'; container.insertBefore(header, container.firstChild); } // Create label element var label = document.getElementById('custom-form-label'); if (!label) { label = document.createElement('div'); label.id = 'custom-form-label'; container.appendChild(label); } update(); // Watch for step changes to trigger re-render var stepsWrapper = document.querySelector('.formContainer #formGeneratorForm .form_generater_form_div .steps-wrapper'); if (stepsWrapper) { var observer = new MutationObserver(function () { update(); }); observer.observe(stepsWrapper, { attributes: true, subtree: true, attributeFilter: ['class'] }); } } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } })();