How to Create a Gravity Forms Quote Calculator

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 you’ll need

To build a basic quote calculator, all you’ll need is Gravity Forms. However, if you want to save quote requests and manage them from the front end of your website, you’ll need Gravity Forms and GravityView.

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.

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.

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

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. 

To do this, we’ll open the field settings, scroll down and check the box that says “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!

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.

That’s it!

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

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

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.

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. 

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

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. 

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.

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

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.

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.

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.

💡 Pro tip: See a live demo of how this works on the front end and get your own free trial site preloaded with all GravityKit add-ons!

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!