Using progress bars and indicators in Studio Form, you can let your users know how far they've come on their journey so they don't lose interest and stay tuned.
Progress bar(s)
1. Add Element
You will want to create a progress bar wrapper that you will for example attach to the top of the page. Inside this wrapper you will want to place the actual progress bar - for simplicity follow my example from above ☝️
To get a working and beautiful animated vertical progress bar, follow the steps above, add a combo class to the progress bar wrapper and attach it to the left side ☝️
Add the attribute and click "publish"
Name data-axis
Value y
---
(In case you want to animate x & y at the same time, try:)
Name data-axis
Value xy
3.5 Enjoy!
Indicator(s)
Current Slide
1. Add Text Element
Add a text element on the page to serve as an indicator for the current slide - you can follow my example from above ☝️
2. Add Attribute
Name studio-form-0
Value current-slide
Total Slides / Minimum - Maximum slides until first possible submit
There are three different ways to display the total number of slides (note: this all makes much more sense if you have conditional logic set up):
- min-max: This shows the best of both worlds. E.g. "It might take *7 - 9* slides before you can submit". - min: This shows the fastest possible path to the submit button. E.g. "It will take at least *7* slides before you can submit". - max: This shows the slowest way to the submit button. E.g. "It takes a maximum of *9* slides until you can submit".
Name studio-form-0
Value min-max-slides
Don't forget the `-${ index }` aka `-0` if you plan to use your indicators outside the form block / studio form wrapper. ☝️
Minimum slides until first possible submit
Name studio-form-0
Value min-slides
Don't forget the `-${ index }` aka `-0` if you plan to use your indicators outside the form block / studio form wrapper. ☝️
Maximum slides until first possible submit
Name studio-form-0
Value max-slides
Don't forget the `-${ index }` aka `-0` if you plan to use your indicators outside the form block / studio form wrapper. ☝️
By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.
.png)
