Build a price quote calculator in 5 easy steps
It’s pretty difficult to overestimate the power of interactive web content. Embed interactive features like calculators on a website, and voilà! They become super-engaging conversion rate boosters.
Beyond interactivity, providing your audience with helpful, professional service is an effective way to build trust with potential clients before you request any contact information from them. Your website visitors need to feel that they’re dealing with an authority in the field, and when you offer personalized service, it lets people know that their needs and questions matter to you. Visitors to your site will be more likely to submit requests and contact details when they trust your business, so emphasizing relevant expertise and creating genuinely useful content will help you generate those quality leads.
So, we know that keeping your site optimized and content-rich will set you on the path to achieving your business’s goals. But what makes GRID content so powerful? Interactive GRID documents are built on top of your own spreadsheet data. This means that any documents connected to cloud-based spreadsheets will be automatically updated. Want to update your price list? Simply update your underlying spreadsheet and watch all of your GRID-built tools reflect the changes asap. What better way to provide up-to-the minute service?
Let’s make this happen. Build, customize, and easily embed!
We’ll start by showing you how easy it is to build an interactive price quote calculator using your spreadsheet data. Then we’ll take a look at some practical tips on how to embed your calculator to your website — you’ll be generating leads and driving sales in no time. Let’s dive in.
1. Prepare your spreadsheet. For this example, we’ve built a price quote calculator for a fictional Home Inspection service. Feel free to download and customize our GRID example’s accompanying spreadsheet.
2. Connect or upload your spreadsheet to a new GRID document. Take some time to play around with various layout options and decide on a setup for your calculator. You can also select colors for your sections, columns, and formula outputs. If you’re a Pro user, you can set a brand-specific background color for your document, and you also have an enhanced variety of color and font options available under the Appearance tab in Document settings.
For our example we used:
A slider for the House size value
We used Dropdown selections for the Inspection type, House type, Year built, and requested Day & Month of service
Checkboxes for additional areas of inspection, Garden and Garage
We also made an input field for the potential client’s email address, and a submit button that will send the GRID document’s owner an email notifying them of new price quote requests. (Note: Submit buttons are a Professional feature)
4. Select data for each of the interaction elements in your document. To calculate the varying base prices for each type of home inspection, we target cell D13, which contains the following formula: =IF(C13="Standard";D15;IF(C13="Quick";D14;IF(C13="Extensive";D16;0))).
Finally, create a formula output element to show the calculated total price of your options. The formula we’ve used to calculate the total price quote in our example is in cell D1: =(C4*D13)+D5+D6
5. Now here’s where your website takes flight. Once you’ve created your calculator in GRID, it’s time to embed it. GRID has great resources to help you embed easily in a variety of platforms including WordPress, Wix, and Squarespace — in case you need a helping hand.
Ensure that you’ve updated your document’s access setting to either Public or Unlisted, and then you’ll see the document’s embed code ready to be copied. But wait! Before you copy the code, select the checked options below (if desired) as they will affect the code itself.
Your final step is to simply copy your document’s embed link, switch over to your website’s content management system, and paste it into the body of your workspace. Aaaand you’re done.
We hope you’re inspired to take content creation into your own hands and see what an amazing variety of things are possible to accomplish with GRID. If you’re looking for assistance on this or any other topic, stop by our Help center for answers, tutorials, and friendly GRID team members who are ready to chat.
Have you already embedded your interactive calculator? Let us know!