Progress Bar

Visualize form progress better with progress bars.

Setup

Attribute: sf-el = progress-bar

Where: any child div inside the Basic Form Container.

Description: Designates a div element as the progress bar for a Superform-enabled form. Styled in Webflow for design purposes, its width is dynamically adjusted by Superform to represent real-time progress through the form steps.

HTML Example

index.html

<!-- Form Container with Progress Bar -->
<div sf="myForm">
    <form>
        <!-- Progress Bar -->
        <div class="progress-container">
            <div class="progress-bar" sf-el="progress-bar"></div>
        </div>

        <!-- Step 1 -->
        <div sf-step="step1">
            <!-- Content for Step 1 -->
            <button sf-goto="next">Next</button>
        </div>

        <!-- Step 2 -->
        <div sf-step="step2">
            <!-- Content for Step 2 -->
            <button sf-goto="next">Next</button>
        </div>
    </form>
</div>

styles.css

.progress-bar {
    height: 10px;
    background-color: #4caf50;
    transition: width 0.3s ease;
}

Webflow Example

Pro Tips

• CSS Transitions: Apply CSS transitions on the width property for smooth visual effects.

• Synchronization: Align progress bar animation timings with form step animations and delays for cohesive visual flow.

• Width calculation: Superform controls the width to match the form's progress; design your progress bar in Webflow and Superform takes care of the rest.