Jotform’s Percentage widget is a quick way to collect percentage values with ease. Instead of having users type out numbers and symbols on their own, this widget keeps everything simple and consistent. Whether you’re asking for discounts, progress tracking, or feedback scores, the Percentage widget makes your form look polished and keeps your data accurate.
Here are a few ways to use it:
- Calculate Discounts or Sales Offers — You can use the Percentage widget to automatically apply discount percentages to product prices or service fees. This helps users see the reduced price in real time.
- Compute Tax or Service Charges — The widget can calculate taxes, service fees, or gratuities based on a percentage of the total. This ensures accurate totals on order forms or invoices.
- Determine Grade or Score Percentages — For quizzes, tests, or assessments, the Percentage widget can calculate a user’s score as a percentage, making results clear and immediate.
- Track Progress or Completion Rates — You can use the widget to display progress, completion, or performance percentages for projects, tasks, or user inputs.
Note
The Percentage widget uses a circular slider, making it more engaging than a plain number field.
Adding and Setting Up the Percentage Widget
Adding the Percentage widget to your form gives users a smooth, customizable way to pick a percentage using a built-in circular slider—no extra coding or images required. This is how it’s done:
- In Form Builder, click on Add Element on the left side of the page.
- Now, in the Form Elements menu, under the Widgets tab, search for Percentage and then click on it. Or, just drag and drop it to where you want it to be on your form.
That’s it. You’ve successfully added and set up the Percentage widget to your form. Now, you have a field in your form that gives your users the option to select a custom percentage. Curious how it works on a live form? Check out this Demo Form.
To tweak how your Percentage field looks, just click the gear icon to open its settings and adjust it to your liking.
Note
For advanced styling, you can add your own custom CSS under the Custom CSS tab in the widget settings and style the Percentage field. Our guide on How to Inject CSS Codes to Widgets walks you through everything.



Send Comment: