Creating an advanced gravity forms quote calculator

How to Create an Advanced Quote Calculator Using GravityView and Math for Gravity Forms

Written by Casey Burridge

Last updated:

Categories How-To, Math by GravityView

Tags , ,

Do you want to build a Gravity Forms quote calculator for your WordPress site? Using GravityView and Math you can build an advanced quote calculator that will also allow you to receive orders directly through your website.

GravityView extends Gravity Forms, allowing you to view form entries on the front end of your website, while the Math add-on for Gravity Forms allows you to perform advanced calculations. 

In this example, we’re going to configure a simple View to display a list of quotes for our team to review. We’ll also use Math to automatically calculate the total price of each quote.

You can purchase GravityView and Math as standalone plugins, or you can opt for the GravityView All Access license to get access to both plugins along with a host of other helpful Gravity Forms add-ons and extensions.

1. Setting Up Our Form

Let’s start by setting up a simple form in Gravity Forms. We’ll add fields for Name and Email and then we’ll also include a dropdown called “Web design package” allowing customers to choose from the different options that we offer.

For now, we’ll add three options: “Starter”, “Business”, and “Elite”.

Finally, let’s add a number field called “Extra pages” which lets clients choose how many extra pages they want.

Gravity Forms quote form

2. Configuring the View

Okay, now that our form is set up, let’s create a new View by hovering over Views in the sidebar and clicking on New View. Give your view a name, select your form as the Data Source and choose a View Layout. For this example, we’ll use the Table layout.

Choosing a View Type in GravityView

In the Multiple Entries Layout tab, we’ll add our form fields to the Entries Fields section by clicking the + Add Field button and selecting the fields we need. We will also include the “Date Created” field so we can see when quotes were submitted.

Adding a Custom Content field to a GravityView View

3. Using [gv_math] to Calculate the Quote Total

Now that we’ve added our fields, we’re going to use Math to calculate the total price of the quote.

To do this, add a Custom Content field to the Entries Fields section of your View by clicking the + Table Column button and selecting “Custom Content”. Click on the gear icon and give the field a label, something like “Quote total”.

We’re going to use the [gvlogic] shortcode along with [gv_math] to calculate the price of each quote. [gvlogic] is a feature of GravityView and allows us to use conditional logic inside of a View. The other shortcode, [gv_math], lets us do advanced calculations in Gravity Forms.

Note: [gv_math] does not require Gravity Forms or GravityView to work.

Inside of our Custom Content field, we’re going to build out an “if” statement that allows us to check which package the customer signed up for and calculate the overall cost, including any extra pages they need.

Note: An “if” statement is a conditional statement that, if proved true, performs a certain action.

You can use merge tags inside of [gvlogic] and [gv_math] by clicking on the down arrow on the right-hand side of the custom content input box. 

In our example, we’ll charge $100 for the Starter package, $200 for the Business package, and $350 for the Elite package. We’ll also add an extra $50 for each additional page.

Here’s what our finished “if” statement looks like:

Code for the Gravity Forms quote calculator

Note: To learn more about [gvlogic], read Using the [gvlogic] shortcode.

Let’s save our View and check it out on the front end:

Gravity Forms quote calculator output in a View on the front end

Gravity Forms Quote Calculator: Taking it a Step Further

For more complicated forms that include more options, we can use multiple shortcodes at the same time to construct more advanced “if” statements.

To do this we can nest the [gvlogic2] and [gvlogic3] shortcodes within our [gvlogic] shortcode to output calculations based on several conditions.

For example, let’s say we added a new checkbox field to our form, asking customers if they require website security and maintenance services. If they check the box, we will add $100 to their quote.

Gravity Forms checkbox field

Here’s what the code would look like:

[gvlogic if="{Web design package:11}" is="Starter"] 
	[gvlogic2 if="{Do you require website security and maintenance?:20}" is="yes"]
		$[gv_math scope="entry"] 100 + ({Extra pages:18} * 50) + 100 [/gv_math]
	[else]
		$[gv_math scope="entry"] 100 + ({Extra pages:18} * 50) [/gv_math]
	[/gvlogic2]
[/gvlogic]

As you can see, [gvlogic] together with [gv_math] is a powerful combination!

Final Thoughts

Math is a powerful plugin that allows you to do advanced calculations on your WordPress website. It also integrates with Gravity Forms and GravityView, giving you the ability to build a variety of powerful applications.

In this post, we showed you how to build a Gravity Forms quote calculator and receive orders directly through your website. For more ways to use Math by GravityView, check out How to Build a Gravity Forms Mortgage Calculator.