Make a fully custom look and design for your brand 🎨
10th December 2020 by Monika Ben
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
Get Started with Web CalculatorsWith One Of Our 200+ Templates
Email Marketing ROI Calculator
Website Cost Calculator
Car Loan Calculator
Ad Spend ROI Calculator
Website ROI Calculator
Personal Loan Calculator
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:
✓ Set your own prices for each type of service
✓ Put your branding on the calculator
✓ Link to your own original content
✓ Gather leads from calculators
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
How do you put a price calculator on your website
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:
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
So that’s how to put a calculator on your website: embed it or link it there.
How to make a website cost calculator
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
1. Does the client need a logo? If so what kind?
2. What type of website is he expecting? Is a tweaked template enough or are going fully
3. How big of a website are we talking? Just a glorified homepage or a complex 10+ page
4. Should the design be responsive?
5. Do they need help with SEO?
6. Does the website need to be shoppable?
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:
- send booking links to schedule calls
- send answer summaries
- send confirmations that you’ve received the answers
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.
Get Started with Web CalculatorsWith One Of Our 200+ Templates