How to build a Gravity Forms quote calculator

How to Create a Gravity Forms Quote Calculator

Written by Casey Burridge

Last updated:

Categories How-To

Tags , ,

Do you want to build a Gravity Forms quote calculator for your WordPress site? Using Gravity Forms calculations, you can easily create a sophisticated quote calculator that will generate an estimated quote for potential clients.

If you run a business, offering free quotes to site visitors is a great way to generate new leads for your sales team to follow up on.

In this post, we’ll show you how to create a powerful quote calculator for your website using Gravity Forms. We’ll also show you how to display quotes on the front end using GravityView. 

So if you’re wondering how to make a calculator in WordPress, keep reading to find out!

What Is a Quote Calculator?

A Quote calculator is a form on your website that enables potential customers to calculate the estimated cost of your offering. Adding a quote calculator to your product page gives customers more insight into the products or services that best fit their needs. 

Quote calculators allow you to capture email addresses and generate leads that you can pass on to your sales team.

Why Build a Gravity Forms Quote Calculator

If you run a services business, one of the most common questions you’ll get from customers is “how much will it cost?”. Building an automated quote calculator for your website gives customers the information they need while saving you time having to answer the same questions again and again….

Quote calculators are also great lead generators! Here are some businesses that can benefit from having a quote calculator:

  • Consultants
  • Freelancers
  • Web design agencies
  • Insurance companies

In fact, any company that offers tailor-made services could benefit from having a quote calculator form on their site.

Creating a Simple Gravity Forms Quote Calculator 

Let’s start by creating a simple quote calculator using nothing but Gravity Forms (yes, it’s possible!).

To create a new form in Gravity Forms, we’ll hover over Forms and click New Form. after giving our form a name, we can start adding fields using the drag-and-drop editor.

The quote calculator form we’ll create is going to be for a consulting business. In order for us to send the client an estimated quote, we’ll need them to tell us a bit about their business and what they require.

With this in mind, we’ll add the following fields to our form:

  • Name (Name field)
  • Email (Email field)
  • Company size (Radio Buttons)
  • Number of projects you need help with (Radio Buttons)
  • How many consultation hours do you need? (Number)
  • Price per hour (Hidden Number field)
  • Quote estimate (Hidden Number field)

The estimated quote we give to the client is going to differ depending on their company size, number of projects and number of consulting hours needed. In order for this to work, we’ll need to attach a value to each of the different options.

Radio Buttons field settings in Gravity Forms showing the label and value for each option

As you can see from the screenshot above, we’ve attached a value (in dollars) to each company size. So, the larger the company, the more we’ll charge as a base consulting rate. 

We’ll do the same thing for the number of projects. In other words, the more projects the client needs help with, the more we’ll charge.

Radio Buttons field settings in Gravity Forms showing the label and value for each option

Okay, next, we ask the client how many consulting hours they think they’ll need. For this we’re using a Number field so the client can input any number of hours they like. We’ll need to attach a dollar value to this, so for that we’ll use a hidden field containing our standard hourly rate (e.g. $50).

A hidden field with the label 'Price per hour'

If the user enters 10 hours, then the overall cost should amount to $500. So far, so good.

Finally, we’ll add another Number field to our form labeled “Quote estimate” and set the visibility to “Hidden”. Now all we need to do is write a formula that works out the estimated quote in dollars. 

A Hidden field with the label 'Quote estimate'

To do this, we’ll open the field settings, scroll down and check the box that says “Enable Calculation”.

A checkbox labeled 'Enable Calculation'

We can now use Gravity Forms merge tags to write a formula that works out the estimated quote. Here’s how it’ll work: First, we add together the cost associated with the company size, and number of projects. Next, we multiply the number of hours they need with our hourly rate; and finally, we add those numbers together!

A calculation written using Gravity Forms merge tags

The next step is to take the estimated quote amount and display it in the confirmation message after the user submits our form. To do that, we’ll hover over Settings, click Confirmations and edit the Default Confirmation.

The Gravity Forms Confirmation text editor. Inside it says 'Here's an estimate quote'.

That’s it!

Now, when a potential client submits our form, like this:

Gravity Forms quote calculator form on the front end

They’ll see a message with their estimated quote, along with a link to contact us so we can start working together!

A confirmation message that says 'Here's an estimated quote: $1,900. Ready to secure our services? Get in touch with us for a more detailed quote!'

Pretty cool, right? Feel free to take this example and run with it! You can build a simpler or more sophisticated quote calculator form depending on your use case.

💡 Pro tip: You can also email quotes to customers by adding the quote total inside a notification message. Learn more about Gravity Forms Notifications

Managing Leads on the Front End Using GravityView 

Offering a free quote is a great way to generate leads. But if you’re generating a lot of leads, you need a way to keep track of them. In this section, we’ll show you how to keep a record of visitors who requested quotes so you can follow up with them and track your communications.

Seeing as we already have a quote calculator form set up, all we need to do is install GravityView and create a View to display that information on the front end. GravityView’s powerful builder and search features will enable us to create a front end “lead management” tool. Let’s get started!

Configuring the View

We’ll create a new View by hovering over Views in the sidebar and clicking on New View. After giving our View a name, we’ll select our quote form as the data source and choose a View layout. For this example, we’ll use the DataTables layout.

The screen you see when creating a new View. The data source is highlighted and so is the DataTables layout type

Now we can start adding fields to our table using GravityView’s drag-and-drop editor. To add new fields, we’ll scroll down to the “Entries Fields” section and click on the ‘Add Field’ button. 

The 'Add Field' button allowing you to add fields to the View Editor

This brings up a list of all our form fields; we can click on one to add it to our layout.

The GravityView View editor showing a list of fields

As some of our Select fields assign values to the user’s choice, we can choose whether we want to display the value of the field or its label. 

A checkbox titled 'What should be displayed'. The options are either Value of input of Labl of input.

GravityView also allows users to edit form entries from the front end. To enable this functionality, all we need to do is click on the Edit Entry Layout tab at the top of the View editor and add the fields we want to be editable. After that, we’ll add a link to the Edit Entry page in our table.

The GravityView Edit Edit Layout

💡 Pro tip: To learn more about building front-end web applications with GravityView, read How to Create a CRUD System on WordPress Using Gravity Forms and GravityView.

Now we can add a search feature, allowing users to search for specific entries and filter entries by specific values. We’ll do this by adding a Search Bar widget to the Multiple Entries Layout and configuring the different search inputs.

Okay, let’s take a look at our View on the front end.

Searching leads by status in a View

As you can see, each new lead is displayed in our table, along with the information they filled out in the form. We also added a “Status” column, allowing us to track the status of each lead. This is how we know whether it’s a new lead and whether they’ve already been contacted by our marketing team.

This Status column is a hidden field in our quote form that’s editable front the front end using GravityView.

The 'Status' column

To update the status of an entry, all we need to do is click on the Edit Entry link. This takes us through to the Edit Entry screen where we can update entry fields from the front end.

Editing an entry on the front end

Pretty neat, right? Now our sales team can see new leads without having to log in to the backend of our site. They can also track their statuses and update information as required.

Build a Gravity Forms Quote Calculator Today!

Creating an automated quote calculator for your website is a great way to entice people to give you their email address and generate valuable leads.

In this post, we showed you how to build a Gravity Forms quote calculator that will help you generate valuable leads through your website. We also showed you how to display leads on the front end and build a “lead management” tool using GravityView for your sales team to use.

If you found this article helpful, learn how to build a Gravity Forms mortgage calculator next, or check out other Gravity Forms tutorials on our blog!