How To Create Calculator Forms In WordPress

If you have a website on WordPress and want to create a calculator form, then this article is for you.

You can use form calculations to create fitness calculators, estimates & quotes calculators, price calculators for eCommerce, mortgage calculators, etc.

After reading this article, you can create any type of calculator forms on your WordPress website.

Here we’ll be using Formidable Forms to create our calculator forms. Formidable Forms is the most powerful and advanced form building plugin for WordPress, and it comes with a drag & drop form builder, which lets you create your forms in minutes.

Also, with Formidable Forms, you’ll get lots of pre-made templates.

Here are the pre-made calculator form templates that you get with Formidable Forms:

  • BMI Calculator
  • Percentage Calculator
  • Simple Mortgage Calculator
  • Advanced Mortgage Calculator
  • Car Payment Calculator
  • Age Calculator
  • Compound Interest Calculator
  • Final Grade Calculator
  • Pregnancy Due Date Calculator
  • Daily Calorie Intake Calculator
  • Length Conversion Calculator
  • Paycheck Calculator
  • Tip Calculator
  • Amortization Calculator
  • Debt to Income Ratio Calculator
  • Life Insurance Calculator
  • ROI Calculator
  • Savings and Investment Calculator

You can customize every single template according to your needs or you can create your calculator form from scratch.

Formidable Forms has two versions, free and premium. With the free version, you can’t create calculator forms. To create the calculator form, you’ll need to buy their premium plan.

So, click the link below to buy Formidable Forms:

Calculated Fields, Condition Logic
Display Form Data, Bootstrap Styling
PayPal, Stripe, Zapier, Mailchimp
Twilio, Email Logic, API Webhooks
WooCommerce Product, File Upload

How To Create Calculator Forms In WordPress

Step- 1. Install and active Formidable Forms

I assume that you already buy Formidable Forms. If not, buy it to create your calculator form on WordPress.

To Install Formidable Forms, login to your WordPress dashboard, go to Plugins > Add New, search for ‘Formidable Forms’, and click Install and Active.

After activation, go to Formidable > Global Settings and click Connect an Account, after logging in click Connect to WordPress.

formidable forms premium activate

And if you don’t purchase Formidable Forms before, click Get Formidable Now in Global Setting and purchase and connect it.

Now you have successfully installed and activated Formidable Forms on your WordPress website.

Step- 2. Choose a template or create from scratch

Go to Formidable > Add New to create your calculator form. After that, you can choose a pre-made template or create a form from scratch by selecting the ‘Blank Form’ option.

formidable forms select a template

Choose the filter option to Calculator to easily find calculator based templates. You can also preview every template before using it.

Here I’ll choose the ‘Simple Mortgage Calculator’ template to show you how Formidable Forms works.

formidable forms Simple Mortgage Calculator templates

After choosing the template, you’ll be redirected to the form customization section. Here you can edit every single part of your form, add new fields in your form, edit your form styling, edit form notification settings, give form permission, add custom HTML, and more.

formidable forms Simple Mortgage Calculator settings

First, you can see three number fields to collects:

  • Mortgage amount – The mortgage amount is the amount for the mortgage.
  • Interest rate – The interest rate is the rate for the mortgage.
  • Mortgage period – It’s the time for a mortgage. You can use a slider field or a number field.

For each field, make sure to set the number range. You should also set up a default value to help visitors understand roughly what value should go in each field. Simply click on the fields and customize it according to your needs.

Next, you can see a number field that shows a person’s monthly payment based on the input fields.

formidable forms Simple Mortgage Calculator settings2

Go to the Advanced tab > Calculator option next to the Default Value to see the formula for your mortgage calculations.

Here’s the formula for a simple mortgage calculator – you’ll just need to match the field IDs with the IDs from your own form:

[89] * ([90] / 1200) / (1 – (Math.pow(1/(1 + ([90] / 1200)), ([91]*12))))

Also, the default simple mortgage template comes with a name and email field. You can collect emails from the users to send the details in their email address.

If you want you can add additional fields into your form. To add fields, simply drag and drop the fields from left to right.

Now you’ve successfully created your mortgage form, now it’s time to customize your form settings.

Step-3. Customize form settings

To customize your form settings, just click the Settings in the top bar of your form customization dashboard.

General Settings:

In general settings, you can see these options:

formidable forms general settings
  • Form Title – Enter the title of your form.
  • Form Key – While this is automatically generated based on the form name that you first added, you can still change this if you want.
  • Form Description – Enter the description of your form. Only you can see this.
  • Embed Shortcode – You can use the shortcode to show your form anywhere on your website.
  • ON SUBMIT – Choose the action you want to show your users after they submit your form. You can show them a message, redirect them to a different URL, or redirect them to a different page. You can show the form with a confirmation message. If you don’t want to store any entries from this form you can do this by enabling the ‘Do not store entries submitted from this form’.
  • AJAX – My recommendation is to enable this setting, it helps to load and save the form without refreshing the page. You can validate the form with javascript, which checks the form field and shows success or error messages without entering the submit button.
  • MESSAGES – If you select ‘Show Message’ after clicking on the submit button, then you need to enter the message you want to show your users.

Actions & Notifications:

When your form is submitted, what action you want to take, like send a confirmation email to the users, you want to receive an email, add the user’s email to your email list, and more. Here you can do all of these.

formidable forms notification and action settings

FORM ACTIONS – Click on the action you want to add in your form and configure it according to your needs. Here I’ll show you only one action called ‘Send Email’.

If you want to send a confirmation email to your users after they submit a form or you want to receive an email when users submit your form, then you need to configure the Send Email action properly.

formidable forms send email setting
  • Action Name – Enter the action name you want.
  • To – The default email address is the admin, but you can add the user’s email by selecting the email field id. To do that click the three dots on the right side of the To field and select Email. If you only send emails to users, then you need to delete [admin_email]. To send the same notification to multiple recipients, separate the emails with a comma. If you would like others to receive a copy of the message, click CC and insert the email(s) in the CC box that appears. If you would like others to receive a copy of the message but do not want them to be shown to the recipients, click BCC and insert the email(s) in the BCC box that appears.
  • From – Enter the email which email you want to use for sending emails. By default, it sends emails from the admin email. But my recommendation is to use a business email like support@yoursite.com, contact@yourite.com, etc.
  • Reply To – If you want to reply to a different email address other than the one the message was sent from, click Reply To, then enter in the Reply To email address.
  • Subject – Enter your email subject. If you don’t enter a subject, emails will use ‘[Form name] Form submitted on [Your site name]’.
  • Message – Enter the message you want to send your users, you can use field ids to create a dynamic message.

If you want to receive a different email notification after users submit a form, you can do it by adding another ‘Send Email’ action. You can also use conditional logic and set automation into your forms.

Form Permissions:

You can set permissions on your form. Here are some features of Form Permission:

  • Limit form visibility and submission
  • Limit number of form entries
  • Allow front-end editing of entries
  • Allow logged-in users to save drafts

Form Scheduling:

With Form Scheduling, you can set your form to open at a later date or close automatically to stop accepting entries.

Styling & Buttons:

Here you can change your ‘Submit’ button text and select the style of your template. If you choose not to use Formidable styling, your form will adopt your theme styling.

With Page Turn Transitions, you can choose page load transition effects.

Customize HTML:

The Customize HTML settings allow you to customize the HTML for individual fields in your form.

So, now you successfully customized your calculator form in WordPress. In the end, don’t forget to save all of the changes you made by hitting on the Update button upper right side of your customization dashboard.

Step- 4. Add your calculator form to you site

You can add your form using the shortcode. You can also add your form in your posts or pages with the Formidable Form widget.

Formidable Forms is very comfortable with page builders, so if you’re using a page builder like Elementor, you can easily add Formidable Form anywhere you want.

Now you’ve successfully created and customized your calculator form in WordPress.

Frequently Asked Questions (FAQs)

What is the best calculator form building plugin in WordPress?

Formidable Forms, Formidable Forms is not only the best calculator form building plugin, it’s the most advanced form building plugin for WordPress.

Thanks for reading this article. If you like this article, don’t forget to share it. And if you’ve any questions about this post, let me know in the comment section below. I’ll reply to every comment.

Newsletter Updates

Get freebies, and special offers delivered directly to your inbox.

One comment

  1. I really liked your article post.Really looking forward to read more. Keep writing.

Leave a Reply