A Step-By-Step Guide to Building an Instant Quote Calculator for Your Website

One of most popular questions we get asked by our customers is, “How can we build an instant quote calculator for the services we are selling?” This might seem like an overtly ‘techy’ or complex question, but believe me - it’s not!

To prove my point, I’m going to show you how to do it, step-by-step. To make this guide consistent and easy to understand I’ll follow the same example throughout - an instant online quote calculator for a home cleaning service. Perhaps the service you’re offering has absolutely nothing to do with cleaning, but no matter what your offer is, this example should definitely provide some valuable insights and get you started on your own calculator.

My goal is to show you the thinking patterns or logic to follow. Of course, there is more than one way or standard when it comes to instant online quote calculators; this is just the most common approach my colleagues and I use to help our customers.

Here’s what we’ll cover:

• Preparation
• Logic of instant quote calculator
• Practical guide to building your interactive calculator

Preparation

What question do you want to answer?

Your customers might have many questions to ask, but since this article is about instant quote calculators, let’s focus on the most pertinent one: How much will service X cost? And since we’ve already agreed to sticking to the example of a home cleaning service, the question we’ll be focusing on is: How much will this cleaning service cost me?

And you don't want this to be the question that will stop your prospect from moving forward in you customer journey. Using a quoting sofware you can answer related questions instantly on your website, and without a support team!

Who is asking (Persona)?

It’s imperative to understand your audience or target persona. Doing so allows you to make a direct connection with potential clients. Plus, understanding your target persona allows you to speak their language – you don’t want to alienate potential customers with jargon they don’t understand, nor do you want to bore people by pointing out the obvious to them. So, who is this person?

In our example of the cleaning service it’s quite possible that there is more than one persona, but for the sake of this topic let’s just say that we’re targeting: John, a 28 -year-old single man with no children who is fully dedicated to business, and values his free time, which he spends with friends or playing sports. John lives in an apartment in New York and is considered to be an upper middle-income earner.

What can we take away from this? Perhaps John lives in a relatively small apartment, is not familiar with complex cleaning terminology, nor does he know the specific number of shelves he needs cleaned. The fact that he values his free time can lead us to believe that John would consider a service that saved his time to be a logical investment for him.

What stage of the user journey is your persona at?

How much does your prospect knows about the service you’re offering, and what level along the decision-making process is he at?

In our example, John is at the bottom of the customer journey – he saw an add on Facebook about the cleaning service, read a few statements about where and how the service is delivered, and thinks that it would probably make his life easier. Given this, the calculator should be placed on the service page.

Result you are seeking

What is the best-case scenario once the customer calculates the price of your service? Or in other words, what exact action would you like the user to take?

In our case, we want to get the initial order form filled in, and to define the final cost as well as your availability to deliver the service.

Information you have

Now, let’s review your shelves or computer drive. What information do you have? Pricelists, or maybe you have an excel calculator or online calculator examples.

Having a good grasp of how your pricelist or excel calculator work would be helpful for the next step – defining the calculation logic.

Having a previous example could prove to be valuable. It might be an inspiring example or it might serve as a basis or starting point on which to create your personalized calculator perfectly suited for your business.

Instant quote calculator logic

The secret formula

The secret formula of an effective process to define the logic of your calculator is really simple – just write down the answer to your persona’s question.

Question: How much will this house cleaning service cost me?

So, the typical answer to John’s question would be: The total cost depends on the size of your apartment, what needs to be cleaned and how often you require the service. This is fine, but this answer ultimately generated more questions, not a concise answer. Let’s try reformulating it as a clear answer: Typically, the basic cleaning service for a small apartment costs from $95 each time.

Now we can go into some deeper questions.

What does the “basic cleaning service” consist of?

• Cleaning floors and carpets
• Dusting furniture and other surfaces
• Scrubbing sinks, tubs, showers, and toilets
• Cleaning mirrors and polishig chrome
• Emptying trash cans

But there are extra options:

• Cleaning the inside of the Fridge +$35
• Cleaning the inside of the Oven +$35
• Cleaning interior windows +$60

How is a “Small apartment” defined?

• 1 x bedroom
• 1 x kitchen
• 1 x living room
• 1 x bathroom

If the apartment is bigger, the cleaning service will cost more:

• +$18 for each extra bedroom
• +$24 for each extra bathroom

So, why “from $95 for each cleaning”?

$95 is the lowest price for cleaning if it is done every week. It can be done at other frequencies, but prices vary:

• Every 2 weeks = $105 per time
• Every 4 weeks = $125 per time
• Deep Clean (one time) = $295

These prices are taken from the pricelist. It’s clear that if you use the service less frequently it will cost more each time; this means the price is based on quantity.

What else?

Did we forget anything? Or maybe there are special conditions for something? Let’s say there are no such conditions for the sake of our example. However, this question is still relevant, because sometimes it might have a huge impact on subsequent steps. No one likes to refactor things many times, even if it’s simple to do.

Summarize the information

The answers not only give us components, but also meaningful insights - the bigger picture. Let’s write everything down on a table.

Important. In our example, we don't specify a price for each task and room, so it’s taken as a constant - all listed base services for base rooms cost $95. So, the Service base and the Rooms base are defined as $0, and the price is listed into the Price base by the frequency row.

There are many alternatives that would impact on how this table might look. I took this approach because the Price base by frequency had few values. I mean, Service base and Room base are a constant set, but their cost depends on frequency.

Using the answer to our initial question will help us identify the formula and inputs required, then we’ll be 100% ready to build calculator.

Retrieving the formula

No need to be a genius to understand that the main formula is:

Result = Service base + Extra services + Rooms base + Extra rooms + Price base

Where:

Extra services = cleaning the inside of the Fridge + cleaning the inside of the Oven + cleaning interior windows

Extra rooms = n bedroom + n bathroom

Frequency = Every week or Every 2 weeks or Every 4 weeks or Deep Clean (one time)

Also, if we know that the Service and Rooms base prices are $0 we can remove those from the formula to make it simpler, but let’s leave them in place for now.

Cool, now we are ready to build an instant online quote calculator!

Practical guide to building your interactive calculator

I’ve tried describing the process independently from technologies or platforms that you might generally use to build your web calculator. Therefore, I'm not going to explore the specifics of how to set one or another component.

However, it's natural that for my example, I use our platform because it's easy to use and I'm really proud to be a part of the team developing CALCONIC :)

We will build our calculator in just a few phases. The first phase consists of the initial setup of a basic calculator. Later, we’ll add extras and additional options, and finally, improve it.

01 Start with a good title

The success of your interactive calculators will depend first of all on the title. Perhaps you remember the question: “How much will this house cleaning service cost me?” First, make it clear. Second, try to show users the benefits they will get from it – push them to use the calculator. What do you think about: “Get an instant quote for our cleaning service” or “Get the best price on our cleaning service with this instant quote calculator”

02 Describe the service

Add a short description of your service or an object of calculation. The goal is to make it 100% clear what your service is, what it includes, and what might be ‘left out’. Also, you can provide some information (if needed) about how the calculations are performed.

Try to not to make any descriptions too long, or cover every topic in one place. Use multiple shorter descriptions instead of a one huge-ass description.

03 List your services

For some pricing calculators where each service is optional, adding services as list options would be one of the first steps. In our example with the cleaning service, the service base isn’t optional, so users won’t have a chance to select or deselect services. This is why we will list our services in the description. Jumping ahead one step, we will do the same with the base price for rooms. Let’s join the service base and room base to make a nice description of our service.

04 Setting up input elements

To get any calculation, it’s necessary to create at least one input element that will allow users to pass on some information. In the cleaning example the formula is: Result = Service base + Extra services + Rooms base + Extra rooms + Price base.

We know that the base set of Service and Rooms are listed as $0. And at this phase, we don’t care about extras. A simplified formula would look like this: Result = Service base + Extra services + Rooms base + Extra rooms + Price base, or Result = Price base.

In this way, we see that the Price base is something that requires the user to input at least one thing in order to get a calculated result. On the table, we have listed one price base and three alternative options that depend on service delivery frequency:

• Every week
• Every 2 weeks
• Every 4 weeks
• Deep Clean (one time)

Because users need to pick one of four options, we could choose to offer one of two input elements: a checkbox list or a select field (drop down). I've chosen the select field here because it's more compact, but it all comes down to personal preference.

Let’s label this element: “How often do you need our cleaning service?” The next step will be to add every possible option, starting with “Every Week” – this is an option label, and will add value that will be used for the calculation if this option is selected. So, the option value for this is: 95.

The same goes for the rest of the choices.

After we have at least one input element, we can go forward with calculation results.

05 Adding a formula to see calculation results

Results are represented using the formula component. This element reads all of the calculator’s input data and calculates an output based on the formula it uses. We can label this formula element as: “Total Cleaning Price”. Second, and most importantly, is to set the calculation formula. For now, we can use the simplified formula that we defined in the previous section: Result = Price base.

In the provided example you can choose a different cleaning frequency to see how different choices affect the result.

06 Adding extra options (services)

Now we can improve our calculator by adding extra services. Following our example, there are three extra services:

• Cleaning the inside of the fridge
• Cleaning the inside of the oven
• Cleaning interior windows

We will add extra services as a list of options, which is technically called the Checkbox List. First, to make our calculator user-friendly we need to add an Element label; in other words, name the extra service list. It might be entitled “Extra services”.

Next, we will need to add each option from the list above. Let’s name the first checkbox: cleaning the inside of the Fridge. Now we need to set a value for the price increase when this checkbox is checked. From the table, we see that the checked Checkbox value is 35. The last thing we will do is set this option as “not checked” by default.

The two other options should be added in the same way in order to represent each extra service choice.

Since we have new inputs added and want them to affect our calculations we need to update our formula. The current formula is Result = Price base. Let’s include extra services - now the formula will become: Result = Price base + Extra services.

07 Adding extra rooms

As we defined earlier in our cleaning service example, there is an option to set a specific number of extra bedrooms and bathrooms. Just like we did with extra services, first we need to label this block. You could use a title like, “Extra bedrooms” but that might be a bit complicated for customer to understand that they only need to add extra rooms.

To avoid this potential ambiguity and make the calculator more user-friendly, we can change our approach – let’s ask the user: “How big is your apartment?” Below that, we can label two sliders “Bedrooms” and “Bathrooms” respectively. We just need to make a note for later to decrease the bedroom and bathroom values by 1, since the first bedroom isn’t an extra.

Since we’re defining labels, let’s start with bedrooms.

We could use a simple number input field to allow users to add the number of extra bedrooms. Or, as an alternative, we can use a slider-type input. It’s more user-friendly, much easier to use on mobile devices, and it’s just more engaging.

From our example, we know that our primary target is: John, a 28 -year-old single man with no children who is fully dedicated to business…lives in New York and is considered to be an upper middle-income earner.

So, we can assume that John can probably afford up to a 5-bedroom apartment. Let’s set the slider from 1 to 5. The minimal value is 1 and maximal is 5; and the default is set at 1.

The same goes for bathrooms. Only, now we can set the range of the slider from 1 to 3. I might be wrong, but do apartments with a bathroom for each bedroom even exist? ☺

It’s time to update the formula to calculate the results of extra rooms added.

Now we should update the formula to: Result = Price base + Extra services + Extra rooms. Earlier, we defined that Extra rooms = n bedroom + n bathroom This means that we will multiply each extra bedroom by 18 and extra bathroom by 24. But only extra rooms, as we defined earlier we need to decrease the input by 1. The formula will now look like this: Extra rooms = (n-1) bedroom + (n-1) bathroom. And the complete formula will become: Result = Price base + Clean inside the Fridge + Clean inside the Oven + Clean interior windows + (n-1) bedroom + (n-1) bathroom.

08 Capture leads or collect a payments

To finish up our instant quote calculator we need to ensure that potential customers could go further once they’ve made their calculations. The result we are seeking was defined at the beginning: ‘get the initial order form filled in’.

For this purpose, it's necessary to add an order form to capture potential sales leads. It will be a simple order form with just a few input fields: name, email, phone number, address and a text area for notes. And only email will be required. The shorter the form the better, but sometimes you just need more information to deliver better service. Such a feature is very important to all specialists offering custom services. If we are talking about photography pricing or copywriter service, capturing leads is a crucial part of expanding your customer base and planning your future schedule.

The form will be shown after users click on the primary call to action button, which we will call: ‘Place order now’.

Also, I would suggest adding an activating text above a CTA button. It should push your customer to click the button and place the order. It might be: ‘Get up to a 30% personal discount for your first cleaning!’

However if you have a few more steps before letting the client make an order, you can add a mailing form to not let go of the hot lead on your site. That way when the user ends the calculations he or she may have them sent to their email by putting their contact details in the added field. Then you can contact them any time using your new lead database and share the news about discounts, special offers and similar increasing chances to convert!

09 Test and Improve

After you finish reviewing and testing our result, we can make few improvements.

I don’t really like the order of elements, so I would change it. The first clear and simple question that is easy for users to add could be: ‘How big is your apartment?’ Next, some extra options and lastly: ‘How often does the user need the cleaning service?’

‘Extra services’ doesn’t sound attractive, I would suggest taking a friendly human approach, like: ‘Can we help you with anything else?’

To support price transparency it’s good to show the price for each extra service. So, I updated the checkbox name to: cleaning the inside… (+$35).

Add some extra benefits that your customer won’t be able to resist.

Ah, and of course a couple of styling touches to make it look perfect ♥

Now it’s done! A final result with last improvements is placed at the beginning of this post. The calculator is ready to be embedded to your webpage or simply shared through a link. For more info on how to embed your calculator or get a sharable link, take a look at our dedicated knowledge base articles.

Summary

It’s easier than it seems.

• Understand what and why you want to build before creating it
• Define what question your calculator should answer
• Write down the answer to the question and supplement it with details
• Build a calculator in phases, from basic calculations to extra options. Input = result.
• Make it work so that it not only calculates, but it also captures leads
• Review and test it to make it 100% clear for your customers

Good luck! Build your calculator with our platform to make the process simple and enjoyable. We have a free plan, too, so give it a try. Create your free account today!

☟

p.s. You can use our premade price quote calculator template as a starting point and customize it to fit your needs. Get all the answers to tech details on our Knowledge Base.

Subscribe to our newsletter!

SUBSCRIBE

Thank you!

You have successfully joined our subscriber list.

General FAQ

What is an online quote calculator?

An online quote calculator (or online price calculator) is an interactive widget embedded into the web page. Website visitors will have an option to calculate the custom price of service or product based on their personal preferences and needs.

Why use an instant quote calculator?

Giving potential customers access to precise data and numbers empowers them to make informed decisions and can ultimately facilitate their shift from a shopping cart to checkout. In other words, the instant price quote calculator helps:

• Make pricing easy and transparent;
• Automate your work;
• Collect potential sales leads;
• Increase customer engagement.

Where can I add an online quote calculator?

An online quote calculator can be embedded in any web page, on any platform. Web calculators are fully compatible with Wordpress, Squarespace, Wix, Weebly, Shopify or any other HTML platforms.

How long does it take to create an online quote calculator?

With dedicated tools like CALCONIC_ Calculator Builder, the process can take from 15 minutes up to a couple of hours. It depends on the complexity of a web calculator that you are creating.