Form progress bar

Hi guys :slight_smile:

I created this designer profile-form:
Can you help me how to make the ticks + text on the left light up with each completed slide?
And how can I change the left picture (screenshot) with every slide? ie. Each screenshot should show what the customer is filling in and how it will look like on the profile page.

On a sidenote is it safe to use this form in terms of SSL?

Thanks a lot!

Here is my site Read-Only: >
(how to share your site Read-Only link)

First off @sure13 this is an awesome form. Great work on it. Secondly, when the person clicks the next button you could have your progress area change from a red check mark to a green one and so forth. That way when you get to the end and someone presses submit the next page would be the Thank You page and all would be Green Check marks.

You already have it set most of the way, just now have to finish it off. It would be interaction of mouse click that you would use. And just change the color of the check mark.

Thats how I would do it.

lmk how it goes and Happy Designing,

Thanks Brandon.
When you say interaction of Mouseclicks. I am not clear how I can do this related to each of the steps, this is where I am struggling. The same goes for the screenshot image that should change with every step. Can you briefly help me on this?

Thank you


Hi @sure13,

Check out this university training:

It should guide you on your quest.

Love that training @QA_Brandon :slight_smile: I still remember going through it for the first time and how excited I got at what’s possible haha.

@sure13, Brandon’s solution is perfect, here’s a quick dive on how to implement:

  1. Click your “next” button while in the Designer
  2. Go to interactions and add a new one with trigger of “Mouse click (tap)”


  1. Select “start an animation” for 1st click

  1. NOW select the text/elements you want to highlight/change color (one at a time for this process), and then add a “timed action” for the aspects you want to change…

For instance, if you pick “text color,” you will then want to set the color the text should change to, and the speed and type of easing (the transition). Usually I do “in out quad” and between 0.3-0.4 for most interactions.


Hope that helps! Let me know if you have any other questions as you go through it and I’ll try to assist further if needed :slight_smile:

thats super helpful thanks. Where I am currently stuck is that I have set the button as the trigger, however I have the same 1 button (class) per step. This means that I can not connect 1 button (click) per 1 textfield to light up. Here is where I am at:

I think I have partly found a solution - i crated a new interaction for the second click on the NEXT button however I am stuck now because I can only select “Second Click” but not third, fourth etc.
Any idea?
Thank you

Hey @sure13 if you change where it says “Affect” to be “Selected Element” instead of “Class,” you can make a different interaction trigger for each instance of the button :slight_smile:


1 Like

Oh great :slight_smile: And one more question: If I want to change the left bottom image with each click on the bottom, how would you go about this? Action: opacity 0-100%? Or reveal/hide? And how would you go about the images? stack them over each other with absolute positioning or is there a better method? thanks so much! Filip

I would fade out with opacity and then hide, or reveal and then fade in with opacity (depending on whether the image is coming or going :slight_smile:). That way the transition is smooth and the image element is fully removed when it shouldn’t be visible.

Maybe easiest thing here would be to put all the images inside a div set to “grid” with only one column & one row, and set manual positioning to 1/1 on all images. Then you don’t have to mess with absolute position etc. Just make sure all images you don’t want initially visible are set to BOTH 0% opacity AND hidden. Then you add these back in with the interaction (and hide/make transparent the previous image, of course). Hope that makes sense and is helpful, but if not feel free to ask any other questions. Glad to help :slight_smile:

Hey there, so I’m a newbie to Webflow and I have been struggling to make a slider form like this one.
the problem I have run into is that I cannot seem to figure out how make the slider’s mask height auto adjust to each slide size once it comes into view. some slides have more content than others but the form does not properly shrink. Could I bother you for help on how you got your solution to work?

Nice work you’ve done with the form. I did exactly as is it is on your site. But can not figure out how to achieve that responsive height of the form.
As I can see on your site, when in designer, all slides have the same height. But on preview or on published site it is responsive in height.

Any help with that? Would much appreciate :pray: :pray:

Hi @sure13! Awesome form! I am trying to do an interaction exactly like the one in the Expertise Section, specifically in “Your Focus”. Is that a multiple selection input formated? Or how can I achieve this?

Thanks for any tips!