How to Create a Calculator in WordPress

Looking to create a calculator in WordPress? You totally can - and with the right tools, it's easy. Here’s how to add a calculator to your WordPress site.

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 are not to be feared. In fact, if you have a WordPress website, calculators could become your new best friend!

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

There are virtually endless ways to make 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 would you need a calculator on your site?

Let’s say you run a real estate business. One of the most helpful things you can offer your customers is a calculator.

Whether people want to know their monthly payment, how much they need to save, or if they’re ready to buy a house, you can provide a free calculator for them to use.

And this is true for almost all industries!

If you’re a physical trainer, you can offer a weight-loss 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 a calculator that tells expecting moms how many days are left until their baby arrives.

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 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 calibrate your calculator for lead generation and you are set!

So really — why wouldn't you use a calculator on your WordPress site?

What is the best calculator plugin?

It's a very common scenario. While developing your WordPress site, you run into a snag. If you can't solve the problem yourself, you download a plugin.

In this case, your site might need a cost calculator. And behold! Among a sea of WordPress plugins, you'll find calculators a-plenty. Problem solved, right?

Wrong!

This is something we talk about a lot at Formidable. 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 can slow your site down and cause site-breaking conflicts.

🍎 Running a school?

Learn to build a college application form in WordPress

If not a calculator plugin, then what?

So if you agree that too many plugins is a 'no-no', then what should you do? Learn to code? Hire a developer? What's the solution here?

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 plugin.

A drag and drop form builder with a variety of field types has everything you need to create a calculator and much more. Cost estimation calculators, quote calculators, loan calculators - whatever! A form plugin can do that. Also, it has many advanced options that you'll find useful.

What's more, a form plugin can create contact forms, order forms for eCommerce, and tons of other things for your website. Formidable can do everything a WordPress calculator plugin can do - plus more.

How to add a calculator in WordPress using a template

Before we take you through our step-by-step guide, let's talk about time-saving templates. Formidable Forms (our great form plugin) has tons of templates so you can quickly and easily add and customize calculators on your site.

We have a long list of calculator templates, but a few of them include:

As you can see, we have enough calculators to cover a variety of industries. Your visitors can calculate the price of your product, do credit card or mortgage-related calculations, find out car loan information, and more.

So no matter what business you have, there’s probably a calculator template for your site. All you need is our plugin!

Note: Calculator templates are unlocked with our premium plans.

Download the Formidable Forms plugin

Here’s how to add the Formidable Forms plugin:

From your WordPress dashboard, go to the Plugins page.
Search "Formidable Forms" and download our 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 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 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.

Just to give you an idea of what's possible, this is where you’d add the feature that will collect users’ email addresses.

Publish your custom calculator

After you’ve customized your calculator, you can publish it on your site using the Formidable Forms block or shortcode. (In case you're wondering, you can use Formidable with the Gutenberg block editor and other page builders.)

The easiest way to add the calculator is to use a WordPress block. You would simply choose Add New Block on whatever page or post you want the calculator to appear on, choose the Formidable Forms feature, then choose your calculator from the drop-down box.

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 to add a custom calculator in WordPress 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.

For this walk-through, the same steps generally apply to any type of calculator you need, whether it's a simple mortgage calculation form, an ROI calculator, or a percentage calculator.

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.

Create a Total field

Now that you’ve got the basic numbers to calculate what you need to calculate, it’s time to add a Total field. This is where the final calculation will appear.

Revisiting the example of a percentage calculator, 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. This is exactly why we built templates -- math can get confusing and you probably don't have time to deal with it.

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 would just publish the calculator the same way you would if you were using one of our templates (see above for instructions).

Wrapping up

As you can see, it can be complicated to create a calculator in WordPress from scratch. It’s totally possible, but it may involve figuring out formulas and doing some math.