How to Add and Set Up the Percentage Widget on Your Form

March 9, 2026

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:

  1. In Form Builder, click on Add Element on the left side of the page.
Form Builder interface highlighting the Add Element button on the left panel used to add new fields to a form
  1. 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.
Form Elements panel under the Widgets tab showing the Percentage widget being searched and added to a 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.

Form with the Percentage widget added, allowing users to select a custom percentage value

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:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Podo Comment Be the first to comment.
Still have unanswered questions?

We’re here for you 24/7, anytime you need us day or night. Have a question or need a hand with something? Our team is always ready to help out.