All Collections
Blocks
Quote Calculator Block
Quote Calculator Block
Patrick avatar
Written by Patrick
Updated over a week ago

With Frontly's Quote Calculator Block, you can create a custom web app for your internal team or clients to get real-time calculations based on your own calculations right from a Google Sheet!

This tutorial will show you just how fast and easy it is to set up.


Preparation

Step 1: Sheet Setup

With Frontly's Quote Calculator block, you don't actually need any particular configuration in your sheet to make it work.

In this example, I'll be creating a quoting calculator for an electrical business to calculate the cost of a job based on a few factors:

I have 3 Input fields marked in blue. These are the fields I will create in the Calculator block to allow users to fill in to customize their quote:

  • Number Of Units

  • Wattage

  • Size

In grey, I have 2 fields that I need in my sheet to facilitate my calculations, but don't want the customers to see:

  • Price Per Unit

  • Size Cost

In green, I have 2 Results fields that will be updated when the Input fields changed, and that I want to send back to the user with updated values to finish the 'Quote':

  • Total Price

  • Estimated Delivery Days

Important Note:

The actual fields and calculations in your sheet can be whatever you want. The Google Sheet formulas can be as complex as you need. As long as the fields you'll be using for Inputs (in my case, the blue ones) are plain-text values and do not contain formulas themselves, everything will work well.


Step 2: Importing The Spreadsheet

Once this is ready, I'll head over to the Spreadsheets page in Frontly and import this sheet by pasting the link to the Google Doc.

Note: Whenever you import a sheet, Frontly will add a frontly_id column to the first column of your sheet. You can generally ignore this, but it's used for our system's functionality.


Step 3: Calculator Block Setup

In your dashboard, create a new blank page by going Create => New Page => Create From Scratch.

Click the Browse Blocks button or find the More Blocks icon in the header:

Find the Quote Calculator block and click on it to add it to your page:

In the Spreadsheets dropdown in the Block settings, select your newly imported spreadsheet.


Step 4: Adding Inputs

Inputs are the fields that the user will see in a Form to fill in and submit. Add an Input by clicking the '+' symbol on the right side.

As you can see, I've set up my 3 inputs:

When I click on a specific input in the list I created, I see the Input Settings:

For my Number Of Units field, I entered C1 because that is the location of that particular cell in my Google Sheet post-import:

Adjusting Inputs

Inputs have a few Field Type options, including a 'Select' field with static options. For my 'Size' field, I only want Small and Large value options:

Add Results

Results are calculated fields in your Google Sheet that you want to return the updated values from to the user after they submit your form.

Results are added in the exact same way as inputs, except they only have a Label and Cell field.

I've set up my results:


Step 5: Save & Publish

That's all the setup we need! Let's try it out.

I'll hit save and publish, then view my live app:

We have a Form on the left with our 3 inputs. I'll fill them in and hit 'Get Quote' to see the results:

As you can see, in the 'Results' Section, we now have live-calculated values based on my inputs, all in a slick user interface that doesn't overwhelm users with ugly spreadsheets or give them access to your sheet.

Let's try one more set of inputs to prove my point:


Mobile View

To top it off, the Quote Calculator looks great on mobile too:


Storing Inputs and Results with Custom Actions

While the Quote Calculator block is designed to process your Inputs and calculate your Results in real time, you can use connect either of these values as Dynamic Variable for your Submit Action.

The simplest example of this is creating a log of these values into the same spreadsheet or another using the Google Sheet action. An important reminder though that if you want Frontly to create new rows of data into your Sheets, you will need to set-up your data in a format that our platform is able to.


โ€‹Click here to learn more about Frontly's Google Sheet Setup.

Click here to learn more about Frontly's Custom Actions.

In your Google Sheets action modal, you will use the {{inputs.Cell}} and {{results.Cell}} dynamic variables to store their values into the spreadsheet you've designated.

Click here to learn more about Frontly's Data Sources.

If done successfully, you should be able to see your Sheet rows displayed like this:

That's it! Use these variables for our other actions, and let us know if you have any questions!

Did this answer your question?