Multi Step Form hack

Community resources Webflow Tips
1

Hello Webflow community! :waving_hand:

I need your expertise to find out whether what I want to do is possible, and if anyone has already dealt with a similar case.

I have a multi-step form on the following site : Webflow - LRD copie 1232235356559961532365, and I’d like the user to be able to go back to a previous step not by clicking “previous,” but instead by clicking directly on the icon/title of the step on the left side.
For example, if they’re on step 4 “Vos envies” and want to go back to step 1 “Le projet” they should be able to click it and return directly. Also, any answer changes they make along the way should still be taken into account when the form is submitted.
ChatGPT tells me I’ll need to add some JavaScript for that to work, but despite several tests, I still can’t get it working.

Any ideas by any chance? :thinking:

Also, if one of the steps has a question with a single possible answer (like a multiple choice with only one selection), do you think it’s possible to move to the next step automatically when the user clicks on an answer — without having to click the “Next” button?

Thanks in advance for reading and for any help you can offer! :folded_hands: :slightly_smiling_face:

2

Everything you’ve described is possible but it involves a fair bit of programming.

A few tips..

There are always complication in forward v. backwards navigation logic. You probably don’t want the user to skip steps forward unless the steps in-between are already answered.

One relatively clean way to do that is to wrap each step in a <fieldset> so that you can use native Javascript form validation for that subsection of the form.

Then your code can accept clicking on any step, and navigate there, but only if all of the prior steps 1 to n-1 validate. It makes it easy to check without requiring a complex user-progression tracking system.

For your auto-step complete, you’d build a custom listener for that set of controls ( radio buttons, checkboxes, etc. ) and just do a validate and next().

All of this basically involves building a “multi-step form controller” to oversee the validation and progression, plus the final submit.

It’s not actually that complex but it’s all code, and it’s all specific you your form design and field choices.