Streaming live at 10am (PST)

Form progress bar

Hi guys :slight_smile:

I created this designer profile-form: https://jobboard-7a3498.webflow.io/submit-talent-main
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: > https://preview.webflow.com/preview/jobboard-7a3498?utm_medium=preview_link&utm_source=dashboard&utm_content=jobboard-7a3498&preview=3d6a29aec824a5c3aa1a28fdd0e31fa1&mode=preview
(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,
Brandon

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

F

Hi @sure13,

Check out this university training: https://university.webflow.com/article/intro-to-interactions

It should guide you on your quest.

Love that training @WebDev_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)”

22%20

  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.

17%20

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: https://jobboard-7a3498.webflow.io/submit-talent-main

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:

50%20

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: