I have a quick dirty solution by adding a hidden field to each section and filling each hidden field on each section with a unique step image by inserting a background image in CSS. It's a shame we don't have an image option for the forms.
Ideally I would want something that auto generates at the top based on how many sections whether it be just numbers eg. 1 - 6 or pulling the titles eg: 1. Your Details, 2. Your occupation etc.
The progress bar/steps wouldn't have to be clickable (I have seen older solutions where someone has created a cookie and can navigate from step 3 back to 1 by clicking the step). The solutions I am finding seem to be very outdated and on Contour so has anyone done something like this recently? Would we need JS to assist with this?
One more thing is when you click Next or Previous the page seems to reload briefly. Would there be a way we could animate to the next step like the codepen above or does the page need to refresh to go forward/back?
Adding a visual progress bar/steps to Umbraco paged forms?
Does anyone know how we can add a progress bar to the top of a paged form? I'm using Umbraco 8.8+ and Umbraco Forms 8.2.
I was really looking for something like this: https://codepen.io/atakan/pen/gqbIz
I have a quick dirty solution by adding a hidden field to each section and filling each hidden field on each section with a unique step image by inserting a background image in CSS. It's a shame we don't have an image option for the forms.
Ideally I would want something that auto generates at the top based on how many sections whether it be just numbers eg. 1 - 6 or pulling the titles eg: 1. Your Details, 2. Your occupation etc.
The progress bar/steps wouldn't have to be clickable (I have seen older solutions where someone has created a cookie and can navigate from step 3 back to 1 by clicking the step). The solutions I am finding seem to be very outdated and on Contour so has anyone done something like this recently? Would we need JS to assist with this?
One more thing is when you click Next or Previous the page seems to reload briefly. Would there be a way we could animate to the next step like the codepen above or does the page need to refresh to go forward/back?
is working on a reply...