Why should you have a price quote calculator on your website?
Let's begin with the why! First, we know how time consuming the price quoting process can be. Automating the boring part of the sales process can save a lot of time. Time you can spend on meaningful things.
Next to saving time, a price quote calculator will make it easier for your customers to interact with your company, which results in more leads and/or customers.
Ok enough reasons to build one. Let's get into it and build one!
What we are going to do in this tutorial
In this tutorial we are going to pretent we are a cleaning company and we want to create a price quote calculator for our website. Our pricing is based on rooms:
- Bedrooms: $25 per room
- Studies: $20 per room
- Living rooms: $30 per room
- Hallways: $15 per room
- Stairs: $35 per room
- Badrooms / Toilets: $10 per room
The customer can decide between one-off, weekly, bi-weekly or monthly cleaning. A customer gets a dicount when selecting a recurring cleaning:
- Weekly: 10%
- Bi-weekly: 5%
- Monthly: 3%
If a customer lives in a driving distance of 5 miles, there is no call out fee. Above 5 miles the company charges $1 per mile. It won't deliver their services when the customer lives more then 50 miles away.
Before we get started
Make sure you have an account on ConvertCalculator. If you haven't set one up, do it now at https://www.convertcalculator.co. Click on "+ New calculator" and select "Start from scratch" and we are ready to begin.
Building the calculator
Room type question
For this calculator we are going to first set up an order list question, which is an easy way of collecting an "order" for multiple products. We are going to use this for the room types.
Go ahead and click on the "+" icon in the top right to see an overview of all the available elements for your calculator. Select the "Order List" question by clicking on it or dragging it into the canvas. Now you need to do the following to finish the question:
- Change the title of the question to "What rooms need cleaning?"
- Add "$" as prefix and " per room" as postfix
- Add all the rooms as "items" (there are three items added which you can edit).
Cleaning frequency question
Ok this is getting somewhere. Now add a "List" question in order for your customer to choose between a set of options (One-off, monthly etc.). Add it below the Room type question. You will need to do the following:
- Change the title of the question to "How many times do you need cleaning?"
- Change the display from "Multiple choice" to "Button group".
- Add all the frequency options. For the values you can use the percentages (one-off: 0, weekly: 0.1, bi-weekly: 0.05, monthly: 0.03)
Ok let's speed things up. You will need to create the following other questions get the all needed information from your customer:
- Date question ("When do you (first) need cleaning?")
- Place question ("Where do you need cleaning?")
- Text question ("What's your name?")
- Email question ("What's your email?)
One last thing we need to do is let the calculator now where we are based (in order to calculate the distance between our company and the cleaning job). Click on the Place question, toggle the switch "Use origin place" and type to select your location. In our example we use "Rotterdam, the Netherlands".
Creating the formula
We just need one formula in our calculator. Go ahead and add a formula to the bottom of the canvas, change the title to "Total Price" and add "$" as prefix.
Total price of rooms
We first want to get the total price of cleaning the rooms. Luckily, the Order list question is doing a lot of heavy lifting. We can get the total price of the cleaning of all the rooms by calling the reference
QAin the equation. So delete the existing equation and add
QA. If you haven't touched the order list question, it will result in 0. Go ahead and add some rooms and see what happens. Magic!
We are not done yet, because we give customers who want regular cleaning a little bit of discount. The value of
QB will be the discount so in order to subtract this we would have to do
Total Price - (Total Price * Discount), or:
QA - QA * QB
Change the equation in the formula, toggle the cleaning frequency question and see what happens.
Depending on where the customer is located, we will calculate the call-out fee. The first step is to add some variables:
Variable A: Base Price incl. Discounts
Copy/paste the equation from the formula in the first variable:
QA - QA * QB
Variable B: Call-out fee
The value of
QH will be the distance in meters. When the customer is located 5 miles above from your place, the call out fee will be $2.5 per kilometer:
IF (AND(QH>5000, QH < 50000),ROUNDDOWN(QH / 1000)*2.5,0)
In this equation, we first check if the amount of meters is more then 5000 and less than 50.000. If it is, we divide the amount of meters by 1000, round the value down with the ROUNDDOWN formula, and multiply it with 2.5 If not, we simply return 0.
Adjusting the total price formula
All we have to do now is go to the “Total Price” formula and change this to:
VA + VB
This is the total sum of the base price, minus the discount and plus the call-out fee.
Creating the Call to Action
Ok, we are almost done! You need the customer to finish the purchase, so we will create the button to order securely. Go and add a “Button” (via “+”) from “Elements”. After that, complete the following blanks:
- “Button Text”: Request cleaning service
- Toggle the switch: “Use as Form Submission”
- “From response text”: Submitted successfully
- Toggle the switch: “E-mail submission to you”
- “Send to emails”: e-mail address where you want to receive requests.
- “E-mail subject”: New customer
- “E-mail message”: Fill with whatever you want to receive when you have a new customer request.
Now, if you want, you can toggle the switch “Checkout (Payments)” and connect with Stripe to receive your money.
Conditionally showing and hiding the call to action
If the customer is located more than 50 kilometers away, you will not be able to provide the service. So, you have to hide the button of “Request cleaning service” and set up a message explaining to the customer. Let’s do this:
- Click on the button and toggle the show/hide logic option. The equation will be:
IF(QH>50000, FALSE, TRUE)
When the customer is located more than 50 miles away and the “Request” button disappear, the calculator will display the message:
"We do not provide our service in your location."
To do this, you need to add a “Text” Element with the phrase and toggle the show/hide logic option. After that, complete the equation with:
IF(QH>50000, TRUE, FALSE)
When creating the “Button” on the last step, you might have noticed that there are more “Elements” that you can add to your calculator. Those elements can improve the appearance, layout and general content of the calculator. These elements are the following:
- Title: Write down your company name or whatever you consider necessary.
- Text: Add arbitrary copy anywhere in the calculator canvas.
- Image: Upload your company logo or any image. You can change the margin, width, and alignment to improve the appearance
- Divider: Add a visual divider with the color and design you want.
- Container: Create an advanced layout with columns.
- View break: If you want, you can break your calculator in multiple pages or views.
In this tutorial, we will add a “Container element” to split our questions up in a two-column layout.
Designing the calculator
Great! We are almost done! If you want to adapt your calculator with your website design, this is possible! Go to the top right and click on the “cogs icon (“Adjust calculator settings”). Here you can change the following properties:
- Color: Select the color that best suits your site or your preferences. It will change buttons and call of action colors.
- Theme: If you want to adapt the calculator to your website’s styles as much as possible, choose “None”. Otherwise, choose the theme that looks good for you.
- Number formatting: Choose the number formatting of your preference.
- System of measurement: Choose how you want to calculate distances (feet or meters). This is used in the Place and Places question.
- Language: Translate the calculator content to your language of choice.
Continuing with the design topic, the button “Container” from “Elements” enables you to select background colors, add borders, align items and more.
Congratulations, you made it! Now you and your customers will enjoy a joyful food delivery order process using Convertcalculator.