Today I want to talk about WordPress Calculators.
There is a free WordPress Calculator plugin, which you can have setup in under 10 minutes but you won't find it by searching for “calculator” in WordPress.
The plugin I will show you is actually a form builder called Caldera Forms which has a calculator option which is going to be perfect for this tutorial.
Why should I care about a WordPress Calculator?
In two words. Lead Generation.
Do you know what one of the best website conversion rate optimization strategies is?
You might say headlines, or a clear call to action and focusing on benefits over features in your copy and all those are 100% true.
But something you probably are not thinking about are tool. Specifically creating helpful tools for your website visitors that makes their lives easier in some way and a calculator is an option that requires no developer.
Imagine for example that you are a real estate agent and your personal profile page has a mortgage rate calculator or return on investment calculator conveniently ready for your visitors.
It's a small thing but it can be the difference between people bookmarking your website or more importantly being remembered by a client when the time comes to buy or sell a house.
This is just one example but every industry can benefit from some type of calculator. Here is my calculator for measuring website conversion rates. Not only does it tell my potential clients what their current situation is but also what the potential of working with me would mean financially to them.
It' works so well that it now has a permanent place in my Conversion Checklist (Have you got yours yet?)
For this tutorial I will show you how I created my calculator which is a simple multiplication and division calculator.
My first calculator attempt
I watched a video on this topic that said to do a Google search because it was so easy to create a calculator online.
I went to Google and yes there are some free options that get the job done but they are clunky as you can see from my first attempt below.
There is so much wrong with this, including the whole “Inputs & Outputs wording” and more distressingly the “Powered by link” which takes people off my website which is always a bad idea.
Usually to get branding removed requires paying a fee but I couldn't justify paying a monthly fee no matter how little for something that should be basic for a WordPress user.
So I needed another solution and in the back of my head I vaguely remembered that Caldera Forms consistently gets the accolade of “Best Free Form Plugin for WordPress”.
After a quick Google search I learnt that calculation fields are included in their free version which is not a common feature in other form builders. Plus there is no branding!
Now I already had another premium WordPress form plugin called QuForm which they have a help section on how it could be used for calculations but Caldera Forms is simpler.
How to set up Caldera Forms as a WordPress Calculator Plugin
It's remarkably easy.
After installing and activating and clicking Caldera Forms in your WordPress dashboard sidebar you then click “New form”. It took me a moment to see that small button at the top so included this screenshot.
Now select the blank form template and give your form a name to help you identify it in future.
Now you will enter the form builder screen where you can drag form fields down into your form.
After dragging a field, a popup will appear displaying all the fields available to you like so. Note the “Special” field menu option on left because that is where your calculation field is.
The website conversion rate calculator I'm creating asks the user, “How much traffic their website receives?” and “How many leads they get from their website”.
The calculator divides leads by traffic and then multiplies by 100 to get a percentage value. See an example of the website conversion rate calculator.
To do this in Caldera Forms we need two Number fields for traffic and leads and then a special field (see graphic above) called Calculation. So a total of three fields for this calculator.
For each field you need to specify a name (which auto populates the slug field) and a placeholder which tells your users what to enter in the field. Set this field as required.
Repeat this for the 2nd number field which in my case I set the name as “Leads” and set it to required.
Depending on the look and feel you want, you may also want to select the “Hide Label” option which is what I chose for my live calculator. If you do this you have to set the placeholder value to guide people with what they need to enter into the field. Otherwise it will be blank.
Now we come to the calculation field.
Add a new field below the “Leads field” and then select special field and “Calculation” and you will see the following.
For this calculation field you don't need to select required as it doesn't require user participation as it just calculates automatically. I have also selected the money format so it outputs a cleaner percentage like 2.45% vs 2.449797070445%.
And then very importantly select “Manual Formula” and then enter the mathematics equation you are wanting to perform.
It can be simple addition, subtraction, multiplication and division or more complex like powers, sine etc. Full list of formulas can be found at Caldera Forms.
For this example it's division and multiplication, so the formula is:
%leads% / %traffic% * (100)
Note: The %leads% and %traffic% is what I named the slugs for those two fields for this example but you need to name it whatever is suitable for your calculator.
Now preview your form to make sure the calculation works and then you need to embed into a WordPress post or page. In Gutenberg you will find the Caldera Forms option under “Common Blocks” and in the classic editor you should see a new Caldera Forms button to add the form.
Select your form and it will then appear on the page.
Congratulations you have finished your WordPress calculator.
There you have it, your very own WordPress calculator setup in under 10 minutes!
The more unique and beneficial you make a website calculator to your audience, the more likely people will keep coming back to your website instead of a competitor.
This is a great lead generation strategy and the fact you can do it for free makes it even better.