Rounding by Increments with Gravity Forms

• 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.

1. How do I install this snippet?
2. Usage Instructions
   1. All Options
   2. What if I’m already using the “CSS Class Name” setting for another CSS class?
   3. Does this work with decimals?
3. Custom Rounding CSS Class
4. In closing
5. Taking It Further
   1. Use Rounding By Increments to Enforce Min/Max Product Totals
6. Known Limitations

How do I install this snippet?

1. 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
2. Copy and paste the snippet into your theme’s functions.php file.
3. 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:

1. Open your form for editing.
2. Open the fielding settings for the field you would like to round incrementally.
3. Navigate to the “Advanced” tab.
4. 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.

Adding the 'gw-round-n' class to your field

All Options

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.

Example of multiple classes with the 'gw-round-n' class

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.