Progress bar in forms showing the percent of completion. | Community
Skip to main content
sesmic
sesmic
Level 4
October 2, 2022
Solved

Progress bar in forms showing the percent of completion.

  • October 2, 2022
  • 2 replies
  • 1188 views

Hi all!
I've form with 3 panels & approx. 25-30 fields total. Now, I wanted to create the progress bar for this form that will show the user about the percent of form filled (based on the fields or panels filled). This would also suffice like if the all fields in panel are filled, then tab's color/img should change.
How can I implement this? Any leads would be appreciated.
Regards,
Sesmic

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Mayank_Gandhi

@sesmic You can create a custom progress bar and include it on top of the form. With each section, you can increment the value on click on next section.

 

here is the plain HTML code

 

<!DOCTYPE html>
<html>
<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {

  height: 30px;
  background-color: #04AA6D;
}
</style>
<body>

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar" style="width:10%"></div>
</div>

<br>
<button onclick="move()">Click Me</button> 

<script>
 window.i = 0;
function move() {
  if (window.i < 9) {
    	var elem = document.getElementById("myBar");
        alert();
        elem.style.width = parseInt(elem.style.width.substr(0,2)) + 10 +"%";
        alert(elem.style.width);
        window.i++
      }
    
  
}
</script>

</body>
</html>

2 replies

Mayank_Gandhi
Adobe Employee
Mayank_GandhiAdobe Employee
Adobe Employee
October 3, 2022

@sesmic Have you tried using tabbed on the left/top panel layout with the survey theme? You don't get percentage but it shows very well the progress and completed sections.

    sesmic
    sesmicAuthor
    Level 4
    October 3, 2022

    Thanks for the reply!
    I am currently using the similar theme for my form. But want some kind of statics regarding completion of forms. It can be anything like percent/fraction or if all required fields in any panel is filled the tabs color/image should change.

      Mayank_Gandhi
      Adobe Employee
      Mayank_GandhiAdobe EmployeeAccepted solution
      Adobe Employee
      October 4, 2022

      @sesmic You can create a custom progress bar and include it on top of the form. With each section, you can increment the value on click on next section.

       

      here is the plain HTML code

       

      <!DOCTYPE html>
<html>
<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {

  height: 30px;
  background-color: #04AA6D;
}
</style>
<body>

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar" style="width:10%"></div>
</div>

<br>
<button onclick="move()">Click Me</button> 

<script>
 window.i = 0;
function move() {
  if (window.i < 9) {
    	var elem = document.getElementById("myBar");
        alert();
        elem.style.width = parseInt(elem.style.width.substr(0,2)) + 10 +"%";
        alert(elem.style.width);
        window.i++
      }
    
  
}
</script>

</body>
</html>
        Terms & ConditionsAccessibility statement

        Loading footer...