Best way to create step/progress indicator bar?

Design help General
1

Hi guys,

Running into another small issue. I have 3 pages that are each a step in a profile registration process:

step 1.) basic info (forms)

step 2.) uploading image, drop down, more forms

step 3.) choose profile colouring

I’m not having an issue creating the pages to contain these 3 steps, however I’m a little stuck when it comes to creating the step/progress indicator bar styling for the 3 steps so that the user knows which step they’re on and which steps are still to go.


EXAMPLES:



I’d like the step indicator bar to have a hover/selector over each step in order to allow the user to click them to go back/forward in the creation process.

What’s a good solution to this?

Thank you!

2

Try using slides. My first idea is to have a form object in which you create a slider with different forms etc. A custom scripting could let you go back and forth as well, as let you have some fancy other stuff in there ;)

3

Thanks for the reply! I’ll read up on slides in Webflow. Currently rather than having 3 divs and forms on the same page, I’m opting to have 3 different pages with the different forms, because the information captured will be different from just standard form text boxes, and I’d like to validate each page separately.

For the step bar, I was going to create an image for each step, then have the image change for each loaded page, so that when you’re on the step 2 page, the 2nd step image is selected, but the problem here is the fact that you then couldn’t just click the image to take you to a particular step, unless I slice the steps up into 3 image and then push them against each other with Positioning… hmm

4

You can always achieve the validation every time you switch from slide to slide. Like it won’t let you go further until the validation pass. Like the one I’ve done months ago:
http://forumhelp.webflow.com/

5

Thanks @bartekkustra, I clicked ‘Question #2’ but it doesn’t take me to the discussion – I think I could use slides, but my issue with creating the progress/step graphic is still bothering me as I’m completely unsure how right now!

Just a small hurdle though :smile:

6

RIGHT, I’ve come to a semi-solution. I could use an individual link block for each of the ‘step’ circles in my indicator, then each link block will link to the step in the slider.

Creating a new topic with a new question in order to answer a few more queries about link boxes & sliders (I think it’s OK to do that?).

1 Like