Type: Other

CSS Enabled: ✅

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.

Frontly's Quote Calculator block currently only works with a Google Sheet setup.

Once you've created this Sheet, unlike most Frontly blocks, you won'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:

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

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':

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.

Once this is ready, I'll head over to the Data Sources tab in Frontly and import this sheet after selecting the Google Sheets option.

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.

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 Data Sources dropdown of the Block settings, select your newly imported spreadsheet.

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:

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:

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:

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:

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

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!