Web design companies, marketing agencies and freelancers share one common struggle: explaining to potential customers that web design costs money. A custom build calculator has the power to not only show and explain prices, but it can also filter out people who can’t afford your services. Let’s see how to make your own website cost calculator without any technical skills.
There are plenty of free online calculators that you can grab, but there are many advantages to making your own. Creating your own website price calculator allows you to:
Most websites could benefit from a price calculator. The reason most websites don’t have one is because they don’t know how easy it is to make their own calculator or even put in somebody else’s.
There are two ways to get a calculator working on your website: embedding a calculator widget into an existing page or placing a link to a calculator page into a button on your page.
Embedding a calculator widget means inserting a calculator into a part of your website.
It can look like this:
Or this:
If you’ve never embedded anything into a website, it might sound complicated, but trust me, it’s not. All you have to do is grab a snippet that looks like this:
And copypaste it where you’d like your calculator to be.
To make your embed wider/narrower or taller/shorter, you can adjust the calculator embed dimensions like this.
The second way to use this calculator would be as a link that you can put in buttons or linked text. That way you can link directly to your calculator in emails, social media or customer support chat.
So that’s how to put a calculator on your website: embed it or link it there.
Creating your own web design calculator is easier than you think. If you’ve ever used a tool to drag & drop a landing page or an email, you can do the same to build a web development calculator. involve.me is a simple, but powerful tool that lets you drag & drop a fully custom design and calculator formula without any web development skills.
So we’ll be building this price calculator with involve.me. You can see how to recreate it yourself or just grab the template right here.
There are 2 ways to build custom calculator widgets in involve.me: a one size fits all calculator or an individual result page calculator.
The first one is your typical calculator that displays results on the final page. The second one is a little smarter - it can explain each result range. Smart calculators can display different pages based on the results.
For example, if a client ends up with a very high price proposal, you can direct them straight to your sales team. For lower budget clients, you can offer to sign up for a newsletter to keep up with seasonal sales and discounts.
Since the technical aspect of making website ROI calculators is extremely straight forward, let’s start with the hard part: What questions are you going to ask?
When making a web development cost calculator, most people charge based on the following factors:
What questions you ask and how much it adds to the final price is completely up to you, which is the main advantage of making your own website cost calculator.
Now that you have figured out what questions to ask, it’s time to drag & drop them in. There are many ways to ask questions.
You can list text answers as multiple choice, you can add a slider to indicate the number of pages or you can use image answer to show different types of logos you can make.
But if the client chooses words instead of typing in numbers, how do we calculate the price with that? In involve.me you can add a price tag to each selectable answer - tick “Individual score and calculation” and add prices to each answer to be able to calculate the price.
Once your questions are in, it’s time to add a formula that takes the answers your clients picked and calculates the results.
To add this formula, drag & drop the calculator icon into the last page of your website RIO calculator. Clicking “Open formula builder” will take you to another drag & drop editor - this one is for making formulas.
On the left, you’ll see all the questions - if you don’t see some of the questions, that means there is no numerical value to count with. Go back to that question and tick “Individual score & calculation” to enter numerical values.
Once your formula is done, you can either display the results as is, or you can use them in a payment widget - this is how you’d collect payments with custom pricing.
And that is how you make a website cost calculator.
It helps to preview your design on multiple devices to make sure everything looks the way you intended it to. You can do that by clicking “Design preview” and once there, it’s a good idea to hit “Try it” to test if your formula works.
From here you can publish your website cost calculator and embed it straight away, but if you want to generate leads from having a calculator widget on your website, you should email gate the results.
To do that simply drag & drop a contact form in just before the results page/s.
This neat trick also makes it possible to send emails straight from your calculator widget without any third-party tool . What you decide to send via those emails is completely up to you. You can use email to:
One your calculator is live, you’ll get a unique embed code that you can paste into your website. More about embedding here.
Email gated calculators are a great way to capture segmented leads and speed up your sales cycle. Making your own gives you full design and functionality freedom. You add your own price tags to each question and make your own custom formula. With tools like involve.me, you can make a smart calculator that can direct people to different places based on their results.
