Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
25 Million+
Websites using our plugins
Years of WordPress experience
WordPress tutorials
by experts

How to Create a Custom Calculator in WordPress (Step by Step)

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Interactive elements like calculators can enhance the user experience on your WordPress site. They can serve many purposes, such as generating leads through email capture, fostering user engagement, and addressing visitor queries.

By providing valuable tools that directly answer user needs, you can keep users on your site longer, deepen their online experience, and ultimately achieve your website’s goals.

At WPBeginner, our team tested multiple tools and plugins to find the one that makes it easiest to add a calculator for any purpose, such as simplifying complex calculations, providing personalized recommendations, or capturing leads for future marketing efforts.

In this article, we will show you how to create a custom calculator in WordPress easily and step by step.

Create A Custom Calculator In WordPress

Why Add a Custom Calculator in WordPress?

A custom calculator allows users to quickly calculate things without leaving your website.

For instance, if you have a health and fitness blog, then you might add a BMI calculator so that users can see their BMI and decide which subscription plan or product to purchase from your website.

An example of a BMI calculator

If you sell worldwide, then an online calculator that converts metric units to imperial units can also get you more sales by helping customers check if a product is the desired size or weight.

You can also build trust and reduce cart abandonment by offering a shipping calculator. This way, customers won’t be surprised with unexpected costs at checkout.

Or, you can add a mortgage calculator to your real estate website or a car payment calculator to your vehicle dealership site.

An example of a car payment calculator

These custom calculators are also a great way to generate leads. For instance, you can ask users to enter their email address so you can send them their results. In this way, a calculator can help you build an email list in WordPress.

Having said that, let’s take a look at how to easily create a custom calculator in WordPress.

How to Create a Custom Calculator in WordPress

You can easily create a custom calculator in WordPress with WPForms. It is the best custom calculator plugin and form builder on the market.

It comes with a drag-and-drop builder, 1800+ premade templates, and complete spam protection. This makes it easy to create any form you want, including a mortgage calculator, shipping discount, age calculator, and more. Plus, it is super user-friendly.

First, you need to install and activate the WPForms plugin. For detailed instructions, see our beginner’s guide on how to install a WordPress plugin.

Note: WPForms also has a free plan. However, you will need the pro version of the plugin to unlock the Calculations addon.

Upon activation, you must visit the WPForms » Settings page from the WordPress admin sidebar to enter your license key.

You can get this key from your account on the WPForms website.

WPForms license key

After that, head to the WPForms » Addons page from the WordPress dashboard and find the ‘Calculations Addon’.

Once you do that, simply click the ‘Install Addon’ button to activate it on your site.

Install and activate the Calculations addon

Next, head over to the WPForms » Add New page from your admin dashboard.

This will take you to the ‘Select a Template’ page, where you can start by typing a name for the form you are about to create.

After that, you can click the ‘Calculator’ option from the left column to open the 87+ premade calculator templates offered by WPForms, including:

  • Mortgage Calculator Template
  • Tip Calculator Template
  • Lease Calculator Template
  • BMI Calculator Template
  • Savings & Investments Calculator Template

From here, you can click the ‘Use Template’ button under any form template you like. For this tutorial, we will be creating a simple ‘Shipping Discount Calculator’ Form.

Choose the shipping discount calculator form template

This will open the form builder on your screen. Here you will notice a form preview on the right side with form fields in the left column.

You can now easily add more fields from the left panel and also drag them to rearrange their order.

Calculator form template will open in the form builder with form fields on the left

Next, scroll down to the ‘Available Items’ section and click on this field to open its settings in the sidebar.

Once you do that, you can add the title, image, and pricing for all the items that you are selling in your ecommerce store.

However, keep in mind that if you want to add images for the items that you are selling, then you will have to toggle on the ‘Use Image Choices’ option.

You can also click the ‘+’ button to add more items or the ‘-‘ button to remove an item from the section.

Add the price, image, and name for the items that you want to sell in the form

Next, you must click on the ‘Shipping’ field to open its settings in the left column. This field will calculate the shipping discount based on your product total. If you delete this field, then the calculator won’t work for your users, so make sure that you keep it in the form.

By default, the Shipping field offers an automatic 10% discount on purchases less than $50 and then multiplies the discount by 0.25% as your total increases.

However, if you want to change the shipping discount, then switch to the ‘Advanced’ tab from the left column and scroll down to the ‘Formula’ section.

Here, you can replace the value of 10 with the discount percentage that you want to offer. You can also change the product totals.

If you want to further customize the shipping discount, then you can click the ‘Cheatsheet’ link at the top. This will take you to the ‘Calculations Formula Cheatsheet’ page, where you can better understand the rules and strings to use.

Change the shipping discount value

After that, you can also configure the settings for all the other field options in the same way.

Once you are done, don’t forget to click the ‘Save’ button at the top to store your settings.

Save your custom calculator form

Next, you must open the WordPress page or post where you want to add the shipping calculator form in the block editor.

From here, click the add block ‘+’ button in the top left corner to open the block menu and embed the WPForms block.

Once you do that, just choose the shipping discount calculator form from the dropdown menu within the block itself.

Add calculator form on a page

Finally, click the ‘Update’ or ‘Publish’ button at the top to store your settings. Now, you can visit your WordPress website to view the custom calculator form in action.

Here, the shipping field will automatically calculate the shipping cost according to the pricing of the different items that your customer is ordering from your site.

Shipping discount calculator form preview

Customizing Your Calculator Form in WordPress

At some point, you might try changing the calculator to see if you can get more conversions. For example, you may want to make the ‘Email’ field mandatory.

To make these changes, simply visit the WPForms » All Forms page from the WordPress dashboard.

Once you are there, click the ‘Edit’ link under the form name to launch it in the form builder again.

Click the Edit link under form name

You can now customize the form fields or add new fields by following the process described above.

When you are finished, simply click on the ‘Save’ button, and these changes will appear on your business website or blog automatically.

Viewing Your Calculator Form Entries

Whenever someone completes a form on your website, WPForms automatically saves their entry to your WordPress database. This allows you to see how people are using the form and view the contact information for your visitors.

To see this information, simply go to the WPForms » Entries page in the WordPress dashboard and scroll down to the ‘Form Name’ section.

After that, click on the calculator form to view the entries.

Choose the custom calculator form on the entries page

This will open a list of all the form entries on your page. From here, you can click the circle icon to mark an entry as read.

You can also click the ‘View’ link next to each entry to view all the form details, including the email address, phone number, ordered items, shipping discount, and more.

View the calculator form entries

Sometimes, you may want to share a form’s data with people who don’t have access to your WordPress dashboard. For example, you might run a WordPress development agency and manage multiple websites for clients.

With WPForms, you can export all your data as a CSV or XLSX file by clicking on the ‘Export All’ link at the top.

This will open a new screen where you can select all the form fields whose data you want to export. After that, click the ‘Download Export File’ button to save your form data as an XLSX file.

Choose the form fields whose data you want to export as a CSV file

Bonus: Create Complex Custom Calculators With Formidable Forms

If you are looking to create more complex calculators on your WordPress website, then we recommend using Formidable Forms. It is an advanced form plugin that comes with a drag-and-drop builder, premade templates, and dynamic fields.

Additionally, the plugin can perform advanced calculations like using formulae, conditional calculations, number formatting, and more, making it a great calculator builder.

Formidable forms

You can use the plugin to create different types of calculators like a percentage calculator, price calculator, loan calculator, age calculator, life insurance calculator, and compound interest calculator.

For example, if you sell courses online, then you might add an ROI calculator form to show users how buying your course can increase their earning potential.

Adding a custom calculator to WordPress

Some of Formidable Forms’ other features include conditional logic, progress indicators, multi-page forms, and a ChatGPT field that helps users fill out the form more quickly.

Formidable Forms can even integrate with different email marketing services to grow your email list. For more information, just see our complete Formidable Forms review.

We hope this article helped you add a custom calculator in WordPress. You may also want to see our step-by-step guide on tracking conversions in WordPress and our top picks for the best WordPress contact form plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

2 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Anne says

    Wanted to create a BMI calculator on my health website too, but doesn’t have the WP Forms Pro version. Plan to buy in the future and follow your easy guide. Well, you guided me very well and convinced me to buy this plugin.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.