How to Add a Progress Bar to Your FormAssembly Forms

Do you need to create long forms for applications, surveys, or some other use? If you’re seeing low response rates on lengthy forms, one way to make your forms seem easier to fill out is to add a progress bar that updates as the user moves from page to page.

With a little bit of Javascript, you can easily add a progress bar for any of your FormAssembly forms. In this tutorial, we’ll show you how to make this easy improvement to your forms.

What you’ll need

• Any FormAssembly plan 
• Javascript experience is preferred, but this tutorial is fairly simple even for people with no prior experience

Instructions

1. First, pick the form you want to add a progress bar to. Ideally, you’ll pick one with lots of pages to get the most out of the progress bar.

2. Next, paste the following code into the “Custom Code” section on the Properties page of the form.

<script crossorigin="anonymous" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$( window ).on("load",function() {
function formPercent(){
//get number of pages in form
var pgCount = $('.wfPage').length + 1;
//find page labeled current and get the id associated with it
var currentPg = $('.wfCurrentPage').attr('id');
//remove the prefix to the id to be left with the page number
var currentPg = currentPg.replace('wfPgIndex-','');
//calculate percentage by dividing current page # by the # of pages
var pgPercent = Math.floor((currentPg / pgCount) * 100);
//return the percentage out of the function
return pgPercent;
}
function progressBar(){
var pbPercent = formPercent() + '%';
var pbHTMLOutput = `<div class="pb_outer"><div style="width:${pbPercent}" class="pb_inner"></div></div>`;
return pbHTMLOutput;
}
function progressBarUpdate(){
var pbPercent = formPercent() + '%';
$('.pb_inner').css('width',pbPercent);
}
$('.wForm').prepend(progressBar());
$('.wfPagingButtons input').click(function(){
progressBarUpdate();

});
})
</script>
<style>
.pb_outer{
width:100%;
height: 1.2em;
padding:3px !important;
border: solid 1px #eee;
border-radius:50px;
}
.pb_inner{
width:0;
height:100%;
border-radius: 50px;
background: rgb(25,158,255);
background: linear-gradient(90deg, rgba(25,158,255,1) 0%, rgba(0,109,241,1) 100%);
background-size: 150% 150%;
margin:.5px;
animation: gradient 3s ease infinite;
}
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>

This code will create a bright blue status bar, but you can adjust the color by changing this portion of the code to the rgb and rgba values of your choice:

background: rgb(25,158,255);
background: linear-gradient(90deg, rgba(25,158,255,1) 0%, rgba(0,109,241,1) 100%);

Next, simply save your form and test out the progress bar!

Ready for a more advanced FormAssembly tutorial? Learn how to translate your FormAssembly forms into multiple languages at the link below.