Progress Percentage ($p)

Tracks the progress percentage (%) of a multi-step form.

The special $p variable tracks the progress percentage of a multi-step form, allowing you to dynamically update elements and provide visual indicators of user progress. Use it to create interactive progress bars, display conditional content, and show completion indicators.

• Access Progress Percentage: Retrieve the current progress percentage of the form.

• Dynamic Updates: Use the progress percentage to update elements dynamically.

Pro Tip

Don't forget to check out our native Progress Bar implentation for automatically generating a progress bar.

→ Read about Progress Bar

---

Example

Since Superform is built in vanilla JavaScript, you will see both HTML and Webflow examples, it's practically the same — works with Webflow's Custom Element and elements inside Code Embed.

1. Update Progress-bar Text

HTML Example

index.html

<div sf-el="progress-bar" class="progress_bar">
 <div>
<span sf-react="text($p)">percentage</span>
 %</div>
</div>

Webflow Example

Pro Tip

Use the $p variable to create interactive and visually engaging forms. Seamlessly integrate it within progress bars, conditional content, and completion indicators for a dynamic user experience.