There are two ways you can indicate progress to your form's respondents in Weavely. This tutorial tackles both methods.
Would you rather have a Weavely team member explain this to you in a video? Check out this video tutorial:
The progress bar is a built-in Weavely form element. You can find it under the "Navigation" section as shown in the screenshot below.
You can restyle the progress bar component to your liking, after which you simply need to add it to each of your form's pages. By default the progress bar will showcase a 50% completion rate. This is purely indicative, you don't need to change this manually in your design. Weavely will automatically determine the right progress to show on each page once you publish your form. The image below showcases how we've restyled the default progress bar and created the necessary instances for our example form. We've added our progress bar at the top of each form page.
That's it! Your form is ready to be published. The result for our example form in a browser is showcased in the gif below.
Progress bars only indicate the progress your respondent is making based on which page they are. In some cases you might want more fine-grained control. For example, you might want to indicate the progress on a per-question basis. You can use Weavely's "calculated values" functionality for this.
You'll be keeping track of the respondent's progress using a calculated value. Go ahead and create one under the "Logic->Calculated Value" menu. In our case we'll want to create a numerical value, with an initial value of 0 as showcased in the gif below.
Your calculated value will need to be incremented whenever the respondent progresses through your form. In our example we will do this whenever a question is filled in by our respondent. To do this we'll create a logic rule that increments our calculated value whenever a form element is not empty (which means that it has been filled in). The following screenshot showcases such a rule.
As a final step you'll need to insert your calculated value in your form. Weavely allows you to do so using the curly braces notation. In other words, you can insert a calculated value by typing "{{name of your value}}" in any text layer in your form's design in Figma. Weavely will automatically insert the right value, and update it in real time. Mind that you that this is case sensitive! The following screenshot shows how this is done for our example.
That's it! Your form is ready to be published. The result for our example form in a browser is showcased in the gif below. Every time an answer is provided by the respondent the progress indicator at the top (i.e. {{Progress}}/5) is updated.
