Wondering how best to do a multiple user selected process in one page? hidden div's?

Hi

I’m helping my buddy redo his site, and they have a pricing page where there is a 3 steps process to get to the pricing.

The user needs to first select (3 Steps to checkout)

  1. Type of property / 3 options = House, Condo, Commercial
  2. Type of listing / 2 options = Sale or Lease
  3. Pricing Options / = Basic, Standard, Premier

The specifics don’t really matter, its really how best to create the user experience so its easy and not too many options (hard on eyes / friction)

I envision only giving the user each Step at a time, so I’m thinking of a hidden Div workflow, that once a user makes a selection of the 3 options in step 1, then show step #2 and so on for #3

In my attached screenshot, I’m thinking of using the red text #1 space for the first two steps, and then show Step 3 in the red text #2 upon user selection.

any feedback or guidance of how maybe you’ve done this in webflow would be greatly appreciated.

Here is a screenshot of the actual packages (only after the user has selected 1 & 2 of the steps

Hi @clickryan,

Great question! One approach/workaround to this UX pricing flow would be to use interactions to show/hide sections of your form. I’ll try to whip up a tutorial on this in the near future! :smile:

thanks :wink:

If you need any help, design help or use case, just let me know as I’d love to get your take on things sooner than later.