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.

Download Gravity Forms
  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.

Hire the best developers for Gravity Forms

If you’re looking for good and experienced Gravity Forms developers to help you with your questions about Gravity Forms (like Percentage sign Gravity Forms Number Field) and other add-ons, we advice you to hire experts on Codeable. Codeable is by far the most professional, dedicated and fun community to find the freelancer you need to help you with your WordPress questions.

Click here to visit Codeable