search

umbraco / Umbraco.Forms.Issues

Public issue tracker for Umbraco Forms
30 stars 0 forks source link

Multi-Step Form Progress Visualisation #281

Open jstrugnell opened 4 years ago

jstrugnell commented 4 years ago

It's quite common with multi-page form processes to have an idea of where you are in the process. These may or may not be navigable links but essentially they give the user context of where they are in the overall process. It would be very useful if this feature was available in Umbraco Forms.

If they were to be navigable "links" I appreciate that would throw up extra considerations around validation and missing pages out. In the past I've implemented logic that tracks which pages the user has successfully completed, and then only enable the links back to those pages, and the one that is next to complete.

As a first-step a read-only progress visual would be great. There are plenty of examples here - https://www.w3tweaks.com/multi-step-html-forms.html

Alternatively, if you can provide guidance on how we can achieve this, we can maybe create a package.

Thanks.

nul800sebastiaan commented 4 years ago

I believe there's a previous/next button in the output now, if you play with those a little bit you might be able to get somewhere with this, but I am not sure. 🙈

We love your suggestion though! This one is also going on our ideas list for new features to implement in the future. Please keep an eye on our roadmap, it will give you an idea of where our software products are going.

jstrugnell commented 4 years ago

Thanks, I'll certainly look into the Next/Previous buttons to see how they're working.

37berntsen commented 3 years ago

Hey!

Wondering the same thing, did you find a solution? :)

catiarodriguescosta commented 3 years ago

Inside Form.cshtml try this:

` int currentPageNumber= 0; int pagesTotal = 1;

@if (Model.IsMultiPage){ int i= 0; foreach (var page in Model.Pages){ i++; // defines current page number if (Model.CurrentPage.Fieldsets[0].Id == page.Fieldsets[0].Id){ currentPageNumber= i; } } pagesTotal= i; }`

Myster commented 8 months ago

We've had a client request the ability to view all the pages before beginning (using a hypothetical step-navigation). The idea is a user would click through the steps to see what is required and go away and gather it beforehand.

It is a 4 page form with various conditional fields, mostly of the type "does X apply?" then if yes show a followup question, rather than anything that affects which pages show.