GravityWP

The best information about Gravity Forms, GravityView, Gravity Flow and other addons

Jurriaan Koops

Percentage sign Gravity Forms Number Field

· ·

If you use the calculation function in Gravity Forms, sometimes you want to show people right away a percentage of the numbers they typed in. For example: The are a number of people that follow a study, and a number of people that passed the exam. You create a number field in Gravity Forms that calculates the percentage: people that passed the exam / total people * 100.
If you have 100 people following the exam. And 20 people that passed. You get: 20 / 100 * 100 = 20%
You probably want to show this as easy as possible: 20%
But that is not so easy in Gravity Forms. We found a solution.

Buy Gravity Forms (affiliate link)
  1. Create the Field and set rounding value
  2. Add a Custom CSS class
  3. Add CSS to your stylesheet
  4. Finetune the position of the % sign
DEMO

Gravity Forms Percentage Sign Demo

Create the Field and set rounding value

  1. Create two Number Fields for user input.
  2. Add a Number Field in your Gravity Form in which you want to show the percentage value.
  3. Add a calculation.
  4. Set rounding on zero or another fixed number, this is necessary because the field needs to have a fixed size for correct CSS styling.

Add a Custom CSS class

Add a custom css class to the number field you want to show the percentage sign in. In this example we use: gwp_percentage

Add CSS to your stylesheet

Add this to your stylesheet:
.gwp_percentage .ginput_container:after {
    content: '%';
    margin-left: 3px;
    padding: 0 !important;
    float: left;
    margin-top: 0px;
}

.gwp_percentage input {
    border: none !important;
    padding: 0 !important;
    max-width: 30px;
    padding: 0;
    float: left;
    text-align: right;
}
Why? Because we want to target only the .gwp_percentage Number Field and some stuff with that.

.gwp_percentage .ginput_container:after

This will add the % sign (percentage sign) next to the number field.

.gwp_percentage input

This will remove the border, set the padding to zero.

Finetune the position of the % sign

You may want to adjust these pixels. Please look at your final page to see if it is on the right place:

.gwp_percentage input { max-width: 35px; }

This is the maximum width that the percentage number field will be. Make it as close to 100 as possible.

.gwp_percentage .ginput_container:after { margin-left: 3px; margin-top: 0px; }

This is used to put the percentage sign in the right position… just experiment with it.