June 6, 2020: Removed a rogue JS debugger statement.
Let’s say you sell business cards. Orders for these business cards must be placed in increments of 500. If you try to order 499 cards, you’re going to get 500. If you try to order 600, you’re going to get 1000 (the next increment of 500). Do you see how this works?
This snippet provides a way to round field values (particularly for Number, Quantity, and Calculation fields) up to the nearest specified increment. In addition, it provides a way to cap the increment and set a minimum.
- How do I install this snippet?
- Usage Instructions
- Custom Rounding CSS Class
- In closing
- Taking It Further
- Known Limitations
How do I install this snippet?
- You will want to be running at least Gravity Forms v.1.8 though it may work with some older versions.
- Already have a license? Download Latest Gravity Forms
- Need a license? Buy Gravity Forms
- Copy and paste the snippet into your theme’s functions.php file.
- This snippet requires no other configuration in the code. Continue reading for usage instructions.
Usage Instructions
This snippet is powered by special CSS classes which can be applied to a field via the “CSS Class Name” setting. Here are step by step instructions:
- Open your form for editing.
- Open the fielding settings for the field you would like to round incrementally.
- Navigate to the “Advanced” tab.
- Select the “CSS Class Name” setting and add the “gw-rounding-n” class, replacing n with the increment to which you would like this field to round.
All Options
gw-round-n | round to the nearest increment; will round up or down to the nearest increment example: gw-round-100 would round 1 to 0, 149 to 100, 150 to 200, etc |
gw-round-up-n | round up to the nearest increment; will always round up example: gw-round-up-50 would round 1 to 50, 511 to 100, 149 to 150, etc |
gw-round-down-n | round down to the nearest increment; will always round down example: gw-round-down-25 would round 1 to 0, 26 to 25, 51 to 50, etc |
gw-round-min-n | round up to the specified minimum if not reached example: gw-round-min-50 would round 1 to 50, 49 to 50, 51 and greater would not be rounded |
gw-round-max-n | round down to the specified maximum if exceeded example: gw-round-max-250 would round 251 to 250, 400 to 250, 250 and below would not be rounded |
gw-round-custom-n | round based on a custom function example: See the Custom Rounding CSS Class section. |
What if I’m already using the “CSS Class Name” setting for another CSS class?
No problem. The “CSS Class Name” setting supports multiple classes and that won’t interfere with the special “gw-round-n” class. Just add a space after the last class and add the “gw-round-n” class after it.
Does this work with decimals?
Yup! You can use decimal values in any of your rounding classes (e.g. gw-round-2.5
to round in increments of 2.5
).
Custom Rounding CSS Class
Rounding by Increments also supports custom rounding methods using the gw-round-custom
CSS class. Custom rounding methods require implementing the math to handle the rounding both in PHP and JavaScript. The PHP will go into your theme’s function.php file and for the JavaScript portion we recommend using our free Custom JavaScript plugin.
Below is an example of how you can use a custom rounding function to round to the nearest 9th number. First is the PHP portion that handles the calculation on the back-end:
// Include the following code in your theme's functions.php or using a custom snippet manager.
add_filter( 'gw_round_nearest9', function( $value, $rule ) {
return round( $value / 10 ) * 10 - 1;
}, 10, 2 );
And this is the JavaScript to handle the calculation on the front-end:
window.gform.addFilter( 'gw_round_nearest9', function( value, rule ) {
return Math.round( value / 10 ) * 10 - 1;
});
The filter’s name corresponds to the CSS class you’ll use on the field to activate the custom rounding. Simply take the function name and replace the underscores with dashes for the CSS class. In the case of the example functions above, the CSS class is gw-round-nearest9
.
In closing
You know the drill. If you like it, use it, or improve it, let us know!
Taking It Further
Use Rounding By Increments to Enforce Min/Max Product Totals
Say you have a form where you want to enforce a minimum or maximum total price for a product. For example, say I have a store that sells bulk widgets that has a minimum order of $500. Any number ordered that totals less than $500 is automatically rounded up to $500. On top of that, any amount ordered that totals more than $35000 is automatically rounded down to $35000. Here’s how you would set that up.
First, add a Number field to your form. This is where the user will insert the quantity of widgets they are purchasing.
Then, add a Product field. Give this Product field name like “Widget Total”, set the Field Type to Calculation, and check Disable quantity field. For the calculation, insert the merge tag for the Number field above and multiply it by your unit price.
Then, go the Appearance tab of the Product field and insert the gw-round-min-n
and gw-round-max-n
merge tags. Set the values of the merge tags to your minimum and maximum product total.
If a user buys a quantity that would total less than $500, it’s automatically rounded up, and vice versa for anything above $35000.
Known Limitations
- This snippet does not support Total or Product price fields.
Did this resource help you do something awesome with Gravity Forms?
Then you'll absolutely love Gravity Perks; a suite of 47+ essential add-ons for Gravity Forms with support you can count on.
Is there a way to use this plugin to make a number field simply round to no decimal points? If a user types 1.01 it would round down to 1, or if a user types 1.6 it would round to 2?
Hi Sarah,
Yep!
gw-round-1
should do the trick.I have tried to use this functionality in a form that is nested in another form and it seems to break the display of the nested form on the front end.
Hi Debra,
I just tested the snippet on a field in a child form, and it works without any issues. I wasn’t able to recreate the issue you’re experiencing. Here’s a documentation on how to add the snippet to your website.
If it’s still not working, and you have an active Gravity Perks license, you can contact us via our support form, so we can look at your setup and dig into the issue on your end.
Best,