• Skip to primary navigation
  • Skip to content

GravityWP

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

  • Tutorials
  • Forms
  • Views
  • Workflow
  • PDF
  • Charts
  • Perks
  • Show Search
Hide Search
Jurriaan Koops

Percentage sign Gravity Forms Number Field

Jurriaan Koops · Mar 23, 2018 ·

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

  • 4 quarters CSS

  • Fill in a number
  • Gravity Forms - Radio Buttons / Checkbox Images

  • JetSloth - Image Choices

  • Gravity Forms - List

  • Column 1Column 2Column 3Column 4 
    Add a new row Remove this row
  • Gravity Forms - Survey - Stars (rating)

  • GravityWiz - Copy Fields

  • Copy Field

  • Just type something here ;-)
  • Copy Address

  • GravityWiz - Unique ID

  • ovann86 Dropdown List Field

  • Simple dropdownAdvanced dropdown 
    Add a new row Remove this row
    Just click on the '+' sign to add new rows with dropdowns.
  • ovann86 List Field Number

  • US notationEU notationValuta 
    Add a new row Remove this row
  • ovann86 List Field Date

  • Date Format dd/mm/yyyyDate dd-mm-yyyy with IconDefault Date Set yyyy/mm/dd 
    Add a new row Remove this row
  • ovann86 List Field Date

  • Upload 1Upload 2 
    Add a new row Remove this row
  • Slider

  • Perk Word Count

  • Minimal 2 and maximal 6 words.
  • Maximal 144 characters
  • Maximum 1000 characters (default option in GF)
  • GF Survery Ranking

    • First Choice
    • Second Choice
    • Third Choice
    • Fourth Choice
    • Fifth Choice
    • Happy
    • Crazy
    • Not happy
  • GF Survery Likert

  • Strongly disagreeDisagreeNeutralAgreeStrongly agree
  • Strongly disagreeDisagreeNeutralAgreeStrongly agree
    First row
    Second row
    Third row
    Fourth row
    Fifth row
  • Limit Dates

  • Select your date between today and 1 month ahead. You can only select Tuesdays, Wednesdays and Thursdays in this period. That's what this plugin does, and more. For example you can set fixed dates, ranges from today, etc.
  • Merge tags gravity pdf

  • read-only-fields

  • bar-chart-gravity

  • Not required. We keep you updated about new versions if you fill in your e-mail address here.
  • Please enter a number from 1 to 99.99.
  • Percentage Sign

  • CSS List

    • Check if this is done;
    • Check if that is done;
    • And finally check if everything is done.

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

Gravity Forms

© 2019 - This website is made possible by the wonderful services of
WordPress, GravityForms, GravityView, GravityWiz, Genesis Framework & WP Engine

  • About
  • Hire GF developers
  • Cheat Sheet