Looking to create a calculator in WordPress? You totally can - and with the right tools, it's easy. Here’s how to add a custom calculator to your website.
Approximate read-time: 7.5 minutes
When you think about calculators, what comes to mind? Nightmares of tax season? Flashbacks to a high school math exam? If you associate calculators with grueling math-based tasks, you aren't alone.
But we've got some good news: calculators don't have to be scary. In fact, if you run a business and have a WordPress website, calculators could become your new best friend!
There are virtually endless ways to make online calculators work for your website. We'll give you some ideas below first. Then, we'll show you how to make your own calculator in just a few easy steps.
Why create a calculator in WordPress?
For example, let’s say you run a real estate business. One of the most helpful things you can offer your customers is a website calculator.
You can provide them with a way to calculate their monthly payment and interest rate, how much they need to save, or if they’re ready to buy a house. Offering a way to figure out these amounts with a web calculator for your customers is a great way to bring organic traffic to your website.
And this is true for almost all industries!
For instance, if you’re a physical trainer, you can offer a weight-loss or BMI calculator. If you run a financial website, you can help people calculate their monthly finances.
Even bloggers can make use of calculators. For example, if you run a mommy blog, you can create an online calculator that tells expecting moms how many days are left until their baby arrives. Or if you run a budgeting blog, you can use financial calculators to help your readers estimate monthly bills.
Using a calculator is good for your website because it’s good for your visitors. Your job is to serve them. And a custom calculator for your website is a great way to do that.
Plus, you can collect users’ email addresses for email marketing and selling purposes. All you need to do is require an email to get the results of your calculator for lead generation and you are set!
So really — why wouldn't you use a calculator on your WordPress site? Which begs an even bigger question: What is the best way to add a calculator to my website?
We recommend a plugin!
Read More: 6 Ways to Use Calculators on WordPress Sites
What is the best calculator plugin for WordPress?
It's a very common scenario. While developing your WordPress site, you run into a snag trying to figure out how to add awesome features. If you can't solve the problem yourself, you either hire a programmer, learn HTML and other code, or download a plugin.
If you're reading this blog article, you're probably in the third camp. After all, plugins are made to make WordPress easier to use for everyone.
In this example, say you're looking for a cost calculator builder. You search WordPress and behold! Among a sea of WordPress plugins, you find calculator plugins a-plenty. Problem solved, right?
Not all plugins are created equal. And if your goal is a fast WordPress site, then you need to minimize the number of plugins you have installed.
WordPress plugins are both a blessing and a curse. On one hand, it's great to have so many options to extend your site. On the other, too many plugins or installing WordPress plugins of low quality can slow down your site and cause errors.
In other words, installing a single plugin for every individual feature you want to add will bog down your site and create updating issues!
🍎 Running a school website?
If not a calculator plugin, then what?
Now that you know why too many plugins are a 'no-no', what should you do? Learn to code? Hire a developer?
It's simple: one plugin to rule them all!
To create a calculator in WordPress, you don’t need to know how to code. All you need is a great WordPress form builder plugin.
To start, a good drag-and-drop form builder has everything you need to create a calculator. Cost estimation calculators, quote calculators, loan calculators - whatever! A good form plugin will come with a variety of field types so you can do that.
Also, a good form-building plugin has many advanced options that can boost traffic and create leads for any website.
What's more, a flexible form plugin can create contact forms, order forms for eCommerce price calculators, quizzes, landing pages, and tons of other features for your website.
In other words, why settle for a single cost calculator builder? Formidable's awesome form-building plugin can do everything a WordPress calculator plugin can do - plus so much more.
How do I create a calculator in WordPress using a template?
Before we take you through our step-by-step guide, let's talk about time-saving calculator templates. Formidable Forms has tons of pre-made templates so you can quickly and easily add and customize calculators on your site.
Formidable has an exhaustive library, make sure to check out this exhaustive list of calculator templates. But to give you a quick look, a few of them include:
- Simple Mortgage Calculator
- Length Conversion Calculator Form Template
- Savings and Investment Calculator Form Template
- Debt to Income Ratio Calculator
- Daily Calorie Intake Calculator Template
- Pregnancy Due Date Calculator Form Template
As you can see, we have enough calculator templates to cover a variety of industries with all sorts of input types. Your visitors can calculate the price of your product, do credit card or mortgage-related calculations, find out car loan information, and more.
In short, using either a template or a custom form, you can easily build a calculator for your site no matter what business you have. And all you need is Formidable's form-building plugin!
Note: Calculator templates are unlocked with our premium plans.
Download the Formidable Forms plugin
Ready to get started? Here’s how to add the Formidable Forms plugin:
- From your WordPress dashboard, go to the Plugins page.
- Search "Formidable Forms" and download the plugin.
- To activate the plugin, follow the installation instructions in the docs.
After connecting, you’ll see a success message. Refresh the page and you’ll be able to see the premium features.
Create and customize your simple calculator
Next, you can go to Formidable → Add New. This will show a list of our calculator templates, which you can manually scroll through or you can use the search box to find the template you need.
Once you find the simple calculator template you want, you can preview it by hitting the Preview button, or you can start customizing it by clicking Create Form. You’ll see plenty of field options you can add, like Text, Checkboxes, HTML, and others.
For this part, the ability to add whatever fields and radio buttons you'd like creates endless possibilities. For instance, you could add the ability to collect user email addresses, make it so they can leave a starred review, or turn the calculator into an interactive form that leads them through one question at a time.
How do I embed a calculator in WordPress?
After you’ve customized your calculator, you can publish it on your site using the Formidable Forms block or shortcode in a sidebar widget. (In case you're wondering, you can use Formidable with the Gutenberg block editor and other page builders.)
The easiest way to embed the calculator is to use a WordPress block. Simply choose Add New Block on whatever page or post you want the calculator to appear on, type in "calculator," and the Calculator Form block will appear.
Then you simply choose the calculator you made from the dropdown.
And that’s all you need to do. Using one of our templates, you can have a custom calculator on your WordPress site in no time.
How do I create a custom calculator for my website from scratch?
Let’s say you don't have a business plan with us, or maybe you’d rather start from scratch. That’s not a problem at all. You can still create a calculator in WordPress using Number fields and a math formula.
You should already have the Formidable Forms plugin installed (see above for instructions), so just go to Formidable → Add New and create a blank form. You'll get the field options on the left.
Then follow these steps…
Add Number fields
The first basic step is to add the fields you need.
For example, a simple percentage calculator would need three fields: the number, the percentage you want to find, and the value.
Regardless of the calculator you choose, whenever the user needs to enter a period of time (like the Loan Period for a loan payment calculator), you’ll want to set the number range. It’s also a good idea to fill out the Default Value, Placeholder Text, and Field Description boxes wherever necessary.
This will help guide the user as to how they should enter their info.
In the example below, custom fields were added to display product options and calculate the cost.
Create a Total field
Now that you’ve got the basic number fields to calculate what you need, it’s time to add a Total field. This is where the final calculation will appear. The calculated fields form will be what you use to calculate totals.
Let's go back to the percentage calculator. In that example, the Total field would represent the value (number * percentage = value).
With this Total Number field selected, go to the Advanced tab and turn on the Calculator option. Then in the Default Value (Calculation) box, enter the formula needed for your specific calculation.
The formula for a simple percentage calculator would look like this:
[NUMBER FIELD #1] * [NUMBER FIELD #2]
You would just replace the field IDs in brackets with the field IDs of your form.
If you’re building a calculator for anything else, you will have to figure out the formulas or do some Googling. Or if you don't have the time or energy to figure out the math equations, consider upgrading to use Formidable's pre-made templates. Either way, don't let the math stop you from making your calculator.
Add extra fields (optional)
Now that your calculator is complete, you can add extra fields, like an Email field to collect email addresses.
To add a new field, just look through the All Fields tab and find the one you want. Then add it to your form. It’s that easy!
At this point, you can publish the calculator the same way you would if you were using one of our templates (see above for instructions).
Wrapping up how to create a calculator in WordPress
As you can see, it can be complicated to create a WordPress calculator from scratch. It’s totally possible, but it may involve figuring out formulas and doing some math.
If doing math scares you, then we highly recommend using the calculator templates we’ve created for you. They are unlocked with our premium plans. All you have to do is click and choose the fields you want and you’ll be good to go.