How to paginate a long user input form?

Dear all, I have a pretty long input form in my app where the user gets asked 20+ questions. As I don’t want to have them all on one page (super bad UX) I wonder how I can implement “pagination” in a popup layout?
1 answers

Hey there,

normally the quick answer would be using a wizard, but those are only user friendly when having multiple pages and multiple pop-ups is the exact opposite of course ^^”


What you could do is play around with conditional visibility.

  1. Start with creating category groups of questions
  2. Create a non-persistent entity with either a boolean per category or an enumeration with values for the categories
  3. place containers within the pop-up per category with the questions you want to show
  4. Use conditional visibility to only show one category at once (starting with the first category)
  5. Have a next button (or an on change action on the fields) that checks what the current step is and activates the next one (switching a boolean or changing the step enumeration) and refresh the object
  6. This should then activate the conditional visibility

Et Voila, you have a small wizard within a pop up


I hope this gives you some inspiration, feel free to comment what you think


With kind regards,

Geoffrey (Mx dev & design)