Multi-Step Form Progress Bar

WHAT IT DOES

Multi-Step Form Progress Bar adds a visual progress indicator to any multi-step form on the web, showing you exactly where you are in the sequence and how many steps remain. The extension automatically detects form sections, steps, or paginated form elements on any webpage and overlays a clean progress bar with step indicators. Current step, total steps, and percentage completion are displayed prominently. You can navigate between steps using Previous/Next buttons or jump directly to any step by clicking its number on the progress bar. The bar updates automatically when you move through the form, whether by clicking buttons, using URL hash changes, or when form sections are shown or hidden dynamically. This eliminates the frustration of getting lost in long, multi-page forms and gives you complete visibility into your progress.

WHERE IT RUNS

The extension works on every website with multi-step forms, including job applications, insurance forms, checkout processes, registration flows, survey platforms, onboarding sequences, tax filing applications, and any other form that spans multiple pages or sections. It runs locally in your browser, scanning the DOM for step structures and overlaying the progress bar without modifying the original form content. The extension supports all major browsers and adapts to both desktop and mobile viewports seamlessly.

HOW TO USE

After installation, the extension automatically detects multi-step forms and displays the progress bar overlay when you encounter a form with multiple steps. The overlay includes a progress bar showing your percentage completion, step number indicators (1, 2, 3, etc.), and a step label showing the current step name or number. Use the "Previous" and "Next" buttons to navigate through the form. Click any step number on the progress bar to jump directly to that step. Press the Escape key to close the overlay at any time. To manually show the progress bar, open the extension panel and click "Show Progress Bar." To hide it, click "Hide Progress Bar." The panel also provides settings for auto-detection, visibility, progress bar position, and color theme customization.

THE ACTUAL MECHANISM — DOM STRUCTURE ANALYSIS WITH MULTI-PATTERN DETECTION

The extension employs a comprehensive form detection pipeline that analyzes the page DOM using multiple heuristics. First, it searches for elements with step-related class names, data attributes, or semantic indicators such as `[class*="step"]`, `[data-step]`, `[class*="Step"]`, `.step-wrapper`, `.step-container`, `.form-step`, and `.form-page`. If no step elements are found, it falls back to scanning forms for child sections (DIV, FIELDSET, SECTION) that are displayed, identifying them as potential steps if at least two are found. As a third pattern, it looks for pagination or step indicator elements (`.pagination`, `.steps`, `.step-indicators`, `.form-progress`) and attempts to map them to corresponding step content sections. Once steps are identified, the extension determines the current step by checking which element is visible (`display !== 'none'`) or has non-zero dimensions (`getBoundingClientRect()`). Step changes are detected through a MutationObserver that watches for DOM changes, a hashchange listener for URL-based navigation, and periodic re-evaluation when visibility changes. The progress bar overlay is built with fixed positioning at z-index 2147482000, ensuring it sits above all page content. The overlay captures keyboard events for Escape key handling and prevents page scroll during overlay display by setting `document.documentElement.style.overflow = 'hidden'`. Step navigation works by toggling the `display` and `visibility` properties of each step container, simulating the native form navigation behavior while providing a unified control interface.

THE PANEL

The settings panel is a lightweight, draggable overlay that appears in the center of your screen. You can reposition it by clicking and dragging the title bar; release it near the screen edge and it will snap into place automatically. To collapse the panel into a compact title bar, click the minimize button, expanding it again with the same control. The panel is fully responsive, adapting to different screen resolutions with a minimum width of 300px and a maximum of 480px. Press the Escape key at any time to dismiss the panel without applying changes. All controls—show/hide progress bar, auto-detect toggle, visibility toggle, position selector, color picker, and scan button—are accessible within a clean, high-contrast interface that respects your system's color scheme.

PLEASE NOTE

This extension requires the free BotGentz companion extension to be installed and active, which provides the underlying DOM access and overlay engine. Because websites frequently update their form structures and step implementations, certain complex web applications may occasionally require script updates to maintain full detection functionality. The extension will automatically check for updates weekly and notify you when a new version is available. No personal data, browsing history, or form content is ever collected, stored, or transmitted. All settings are saved using the browser's storage API and remain solely on your device. The extension does not inject ads, trackers, or analytics of any kind.