How To Build A Calculator Form Easily Without Any Coding

Have you wanted to build a form on your WordPress site that performs automatic calculations? You could set them up as just a useful tool for your visitors… or even a lead generation form where the calculated results are fed into your CRM and you can follow up with them via email.

There are a lot of possibilities to this.

I recently built a couple of online calculator tools for a client. One was a tool for people in her industry to calculate their profit/loss for the week. The other was a tool to help her clients determine their session rate to bill their clients.

For those two examples, we didn’t send the data anywhere. It was just a tool for her visitors to use. However, it would be trivial to send the calculated results anywhere we want via form submission.

Here’s how it was built…

Building A Calculator Form Using Fluent Forms

Fluent Forms is my go-to forms plugin I use for almost everything – not only in my own business, but across client sites. It is simply one forms plugin that does pretty much everything.

One of the things about Fluent Forms is that it has a ton of power that you may not know is even there at first glance. There’s a lot of power hidden in those field settings. One little checkbox could unlock possibilities you didn’t think about.

One of those possibilities is that of performing in-form calculations.

There are two components that enable you to build out a calculator form:

• Use of numeric fields in your form. Could also be fields that simply output numbers, such as a range slider.
• Checking off the “Enable Calculation” checkbox on the numeric fields that you want to be automatically calculated.

You can put any other fields you want on your form, but our calculated fields work on the basis of number fields (obviously).

The “Enable Calculation” option shows up only on Numeric fields, under Advanced Settings.

Once you check the box to enable calculation, you can use the dropdown to access other fields of your form and perform calculations with them.

By using the dropdown to insert fields and then building your formulas, that field then becomes a result for whatever calculation you want.

The Fluent Forms documentation has a full list of all of the supported mathematical operations you can include in your formulas. The most common would, of course, be the 4 basic arithmetic operations. You can also use parantheses to group things together. It can get quite a bit more involved if you wished, much like using formulas in an Excel spreadsheet.

Tips For Building Your Calculator Forms With Fluent Forms

So, here’s a few tips that I found were useful and you may, too.

First off, when you are setting up Numeric fields with Fluent Forms, the default field name attribute will be something like “numeric_field_1”. As you add more of them, they just increment (i.e. “numeric_field_2”, etc.).

When you are building your formulas, you get plain-English names in the dropdown, but the formulas will use the Name Attribute. So, you could be looking at a formula that shows something like:

{input.numeric_field_1}+{input.numeric_field_2}+{input.numeric_field_3}

As your form gets more involved, it can become quite difficult to know exactly what your formulas are referring to.

So, my strong suggestion is to change the Name Attribute on your numeric fields to something which is descriptive to you. This way when you go to look at formulas later (and potentially make edits), you know what you’re looking at.

Your formula would then be more descriptive, such as:

{input.session_fee}+{input.driving_cost}+{input.auto_expenses}

It is also nice, if you’re using numbers that represent dollar amounts, to use the “Prefix Label” option for the field to put the symbol in front of the field on your form.

This will keep users from entering the dollar sign into the field itself – and just looks better. 🙂 Note that you aren’t limited to currency symbols. You can actually put any prefix label you want in there to fit your purposes. You can even put things on the end of your fields using the suffix label.

Another tip…

If you’re creating just a calculator tool of some kind and you don’t need people to actually submit the form anywhere (to save results or send you something), then you want to hide your submit button.

All forms, by default, have a submission button. However, you can hide it. Just enter the container class of “ff_force_hide” for the submit button (under Advanced Options) and it will hide the button on the front-end.

Of course, if you DO want people to submit their results, then don’t hide the button. 🙂 And, of course, you could use any of Fluent Forms’ integrations to send the data anywhere you want. For instance, collect their name and email and have them score themselves. Then, send the data into FluentCRM and you could do marketing automations based on their score.

You can also use this same method to hide the final score field of your form. This way you can have people opt-in in order to get their final test result, but you’re sending their score into the CRM.

Potential Ideas For Using Calculator Forms

There are so many uses for forms on your website. So many people get tunnel-vision into just simple contact forms, but there’s so much more you can do if you use your imagination.

These calculator forms can also be quite useful.

In the case of my client, she was just providing some calculators for her target audience. She isn’t collecting the data and sending it into her CRM. It’s just a calculator.

But, there’s much that could be done. For instance…

Years ago, I manually coded a tool for a client in the natural health and chiropractic space. It was a series of “free tests” targeting certain areas of the body. The questions would ask yes/no questions on certain symptoms the person was experiencing. The result was a graph (based on a specific algorithm) and some customized advice based on the score the person received.

Now, the setup we used for that was quite custom. Back then, it had to be because no tools like Fluent Forms existed at the time. Today, it could be created in a much simpler way. For instance, we could use the Ranger Slider field type in Fluent Forms to have the person gauge their level of pain in a particular area of the body. That range slider results in a number that could just as easily be used in calculated fields, but it is just a user-friendly way to select it.

So, the options here are many. Some ideas off the top of my head are:

• People in the natural health space building self-evaluation forms and/or diagnostic forms.
• Coaches putting an evaluation form as a lead generator where a person can evaluate themselves in certain areas. Result is a score with custom recommendations based on the final score, sent via email after they subscribe and become a lead.
• People in the finance space providing things like mortgage calculators, loan calculators, etc.
• For ongoing clients, could build a form which collects certain data points important to your service. Tally up into a score. They fill it out on routine basis, then you could track their progress trends on that score going up or down.

There are a lot of things you can do here. But, here’s some bonus tips that will really take it up a notch…

Bonus: Use These Plugins To Make Your Forms More Powerful

The company behind Fluent Forms makes many other plugins. Frankly, they don’t really market them all with the same energy, so it is easy to not be aware of some of the options that work so beautifully with Fluent Forms.

One of the things, too, I like about this company is how well their tools work together. They play well with others, but they REALLY play well with their own tools. Nothing is an island.

So, one tool to definitely be aware of is Ninja Tables.

Ninja Tables allows you to build really beautiful tables on your WordPress site. Obviously, it integrates beautifully with Fluent Forms to enable you to show Fluent Forms entries on the front-end of your website.

Using Ninja Tables, you could easily display in a table format all form entries for a particular user when they are logged into their profile on your membership site, for instance. For instance, if you are a coach and you want your clients to log into your site and post log updates on progress, you could build that form using Fluent Forms and show them their past entries using a table built with Ninja Tables.

But, here’s another plugin I only recently found out they even had…

Ninja Charts. This plugin can be used to generate charts and graphs. It integrates directly with Fluent Forms and Ninja Tables. It also happens to be a freebie. 🙂 So…

You could build a log entry form where your clients/members could post progress entries. Use form calculations to result in a score. Let them view their past log entries inside their account. And show them a graph where they can see their score trend over time. All right inside their member account.

Just sayin’. 😉

Consider Your Opportunities

I hope this tutorial showed you some of the awesome possibilities when using online forms. These things can be used for a variety of purposes, from working with existing customers to generating qualified leads.

I prefer Fluent Forms. I think it is the best “bang for the buck” forms plugin out there since all the add-ons are included and they don’t nickel-and-dime you to death and don’t put annoying upsells into their plugin interfaces. I just like the way they operate.

You could also build similar forms using competitors such as WP Forms or Gravity Forms. It is up to you.

If you would like my help to build your forms for your business, I’m available to help you out and would be happy to. I will be using Fluent Forms on your site to do it, though. 🙂

Also, Fluent Forms and Ninja Tables are both a part of my agency bundle that I make available for clients. So, if you’re a Concierge client, just hit me up and we can get things set up and build out some awesome forms for your business.