My app has lots of fields that the user will need to fill out (100+). I could be boring and just put 20 inputs per page and have the user click from page to page, filling out the information. But I’d like to make a more dynamic form that feels more like a wizard. Something like www.typeform.com.
I was thinking about using named popup containers, but I would need at least a dozen and managing all of those could get messy. There has to be a better way. Any thoughts or ideas?
You can do a decent job replicating the Typeform experience by creating groups containing your sets of questions and controlling their visibility and behavior using states and animations. A great benefit of using states is that you can store information client-side until the data needs to be saved so only one workflow count is added verses numerous, though that might not be a good idea since you have quite a large number of fields. Get to tinkering and see how you do!
I’ve found a solution that kind of works. I use custom states, buttons, and collapsible groups. There are workflows on the buttons that increases or decreases the custom state of the parent group. I created a custom state (type integer) called “wizard state”. The buttons have workflows that increase/decrease the wizard state. Within the parent group, I have sub groups, each with a question and an input. I made sure to check the box to collapse the groups when not visible. I then use conditions on the individual question groups to hide/show, based on the “wizard state”.
For example, question #1 is visible when the wizard state is 1. When you click the “next” button, the workflow saves the data from question one and changes the wizard state to 2. This hides all the questions except for question #2. I have all my question groups arranged vertically within the parent group (this causes a lot of scrolling when you’re editing it), but if they are collapsible when not visible, the visible question rises to the top of the parent group.
I will say that there might be a more elegant way to do this. It probably involves using more than one page. You have to map out your questions/wizard states and it can be tedious if you need to insert a question into the middle. Anybody else have a better way of doing this?