Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Mark Pickard 23 posts 116 karma points
    Dec 09, 2020 @ 08:58
    Mark Pickard
    0

    Add a visual progress bar/steps to the Umbraco Forms

    Does anyone know how we can add a progress bar to the top of a paged form in 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?

Please Sign in or register to post replies

Write your reply to:

Draft