Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Kara Copple / Last Updated September 21, 2022

How to Create a Price Calculator for WordPress

Do you want to build a form with product options that change the total price?  You'll need to create a price calculator for your WordPress website.

How to Create a Price Calculator for WordPress

Shopping online is now an everyday occurrence for many people, and that's not likely to change. In fact, Statista forecast that online shopping will grow to 2.14 billion digital buyers by the year 2021.

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

That's excellent news for eCommerce businesses. There's a lot of money to be made by selling items online. All you need is an order form or plugin for WordPress that handles eCommerce to help you along the way.

However, if you're still relying on basic order forms that don't include price calculations or even payment options, your business will suffer.

Here’s some good news: Formidable Forms has all the features of a form builder and a WordPress calculator plugin. With Formidable, you can build a cost calculator on your website in no time at all.

Today, we want to share our tutorial on how to build a price calculator for WordPress that calculates a total with different product options.

👉 Read More: 6 Ways to Use Calculators on WordPress Sites

Why is it important to use price calculators for WordPress?

Sometimes it's beneficial to let customers choose things like quantities or colors when buying a product. But if there's no way for the form to calculate what the customer wants, then it's up to you.

You'll have to go in manually and log each order form and come back with a cost estimation.

That's way too much legwork for a busy entrepreneur and definitely too much time for a customer who is used to getting results instantly. The last thing you want is for customers to go elsewhere where the buying process is more convenient.

Save yourself and your customers some time and hassle by following the instructions below to automatically calculate product options.

👉 Learn more: Best WordPress Calculator Plugins

Step 1 - Create an order form

Creating a form with Formidable Forms is fast and simple. You can either select a template or create one from scratch. We also have a step by step tutorial on how to create an order form for your website.

Step 2 - Add dropdown, radio, or checkbox fields

The simplest way to add product options to your forms are via dropdown, radio, or checkbox fields.

First of all, open your form builder and drag and drop one of these field types into the form. Repeat this until you have as many product option sections as you need.

Pricing Checkboxes Radio Buttons

Step 3 - Set separate values for each option

To set the values of each pricing option, click on the field to pull up the Field Options on the left.

You'll find a couple of boxes that include 'Option 1' and 'Option 2' as the default. Change these to whatever you want and add any more options you need.

Below that, check the Use Separate Values box. This will bring up new options beside each of the pricing options. This is where you can insert the price for each option.

In the screenshot below, a piece of gold jewelry is worth $25 and a silver one is worth $15.

Field Calc Separate Values
The form will use these values to calculate the totals later. The price of the item should be included at the end of each option. Make sure the saved value for each option is unique.

Step 4 - Add a Number field for the total price calculation

In order to calculate and display the total price, you will need to add in a Number field.

You can name this field whatever you want, but something like "Total Price" might be best.

Pull up the Field Options and check the Read Only box. This ensures that a user can't edit the field.

Under Advanced Options, you'll see a Default Value section. Click on the calculator icon and then the menu icon (the three dots), as shown below.

Price Calculator Form with Separate Values

This will pull up the Calculate Default Value settings. Select the number of decimal places you want to use. In most cases it'll be 2 if you want to calculate a price.

Here is the part where it comes together in the calculator form. Use the Field List section to find the fields you'd like to calculate. Click the name or id of each field to insert it into your calculation.

If you want to change how the total field looks in your form, you can alter the form layout and style with CSS classes such as frm_total. This class will make a read-only field display the text in bold without a border, making it ideal for showing the total price.

You can learn more about CSS classes in our form layout documentation.

This field is now setup to calculate the total that updates based on a user's selection. Below, you'll see an example of how it will look.

WordPress form Calculate Price

Step 6 - Add payment options

Now that you've got a total price, you can collect a payment too. Stripe or Authorize.net will both allow you to add a credit card field to your form and collect payments directly on your site. If you want to offer different payment methods, PayPal is another option.

Step 7 - Publish your new price calculator form

The last step is to publish your order form. You could publish it on individual product pages or a shopping cart.

To place the form on a page, click on the Add Block icon in the top left of your page builder (if using the block editor). Then select Formidable Forms. Choose your calculator form from the dropdown list to add it to the page.

If you use the Classic editor, select the icon for Formidable on the top of your WordPress editor. This will give you the option to select the form of your choice to insert on the page.

That's all there is to it. Now you should have a fully operational cost calculator for WordPress, ready for your customers to use.

For more examples on how you can use field calculations, take a look at our documentation. Formidable field calculations aren't limited to just calculating prices. There is plenty more you can do with them, such as build a mortgage calculator or even automatically combine first and last names as a text calculation in a contact form. Check out the calculator form templates we have built for you.

We hope this tutorial has helped you build a form with price calculations for WordPress. Just remember to check and test that the calculations are working correctly before your order form goes live.

Read More from the Formidable Blog

More calculator blog posts

  • Best WordPress BMI Calculator Plugins 7 Best WordPress BMI Calculator Plugins for Fitness Experts!
    Read More
    Best Investment Calculator Plugins for WordPress 9 Best Investment Calculator Plugins for WordPress
    Read More
    Best Mortgage Calculator WordPress Plugins 9 Best Mortgage Calculator WordPress Plugins for Real Estate
    Read More
  • Best Cost Calculator Plugins for WordPress 8 Best Cost Calculator Plugins for WordPress for eCommerce!
    Read More
    How to generate leads with a calculator form How to Improve Your Lead Generation with a Calculator Tool [Get Many Leads from One Lead Magnet!]
    Read More
    How to create a number range slider in WordPress How to Create a Number Range Slider in WordPress Forms
    Read More
  • Best WordPress Request a Quote Plugins 7 Best WordPress Request a Quote Plugins
    Read More
    car loan calculator wordpress plugin Car Loan Calculator WordPress Plugin + More!
    Read More
    WordPress calculator creator The Ultimate WordPress Calculator Creator
    Read More
  • Calculated Fields Form Alternative for WordPress What's the Best Calculated Fields Form Alternative?
    Read More
    7 Best WordPress Calculator Plugins 7 Best WordPress Calculator Plugins to Boost Your Website
    Read More
    How to Create a Fitness Tracker in WordPress How to Create a Fitness Tracker in WordPress
    Read More
  • How to Make a Fitness Calculator in WordPress How to Make a Fitness Calculator in WordPress
    Read More
    Ways to Use Calculators on WordPress Sites 6 Ways to Use Calculators on WordPress Sites
    Read More
    Create a WordPress Custom Calculator Create a WordPress Custom Calculator: Easy, Powerful Results
    Read More

Find out more about the great range of features that make Formidable Forms the best form builder for WordPress! Still got calculators on the brain? See what makes Formidable a great WordPress calculator builder.

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Comments

  1. Marc says

    August 20, 2019 at 9:37 am

    Is there a way to make this work with repeater section? Seams as soon as I choose to have multiple products from a repeater section the calculation is wrong.

    Reply
    • Jay Wasack says

      October 25, 2019 at 8:28 am

      Separate values work great but need to have a quantity associated with the selection. As Marc says, repeater fields automatically add values to a total field and a field is added.

      Reply
  2. Dare says

    November 16, 2019 at 4:58 am

    Please I run a courier company and need a price calculator. I am base in Lagos and need to calculate the price such that delivery within Lagos but different weight will attract different price. Example: 1kg package delivery within Lagos will cost 6500naira, while 2kg package delivery within Lagos will cost 800naira, etc

    Delivery to other state but different weight will attract different price. Example delivering a package from Lagos to another state other than Lagos e.g Port harcourt while weight is 2kg cost 2500naira, delivering a package from Lagos to another state other than Lagos Port harcourt while weight is 5kg cost 4900naira etc

    Delivery from other states to Lagos with different weight will also attract different price.

    Reply
  3. Ajay Radadiya says

    December 9, 2019 at 9:41 pm

    good explanation for how to setup calculate price

    Reply
  4. Chad says

    May 5, 2020 at 1:36 am

    Hi, does the calculator offer an option to calculate in different currencies? and does it allow to manipulate variables, ie: a product costs X (with a minimum of 20 attendees) for every extra person added at a fixed value it will add Y, and should allow adding of optional extras the user can select which will add Z and gives us the total of A with the option to download the quote as a PDF

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get Email Updates

Popular Resources

    • How to Create a Searchable Database on a WordPress Site
    • Create a WordPress Custom Calculator: Easy, Powerful Results
    • How to Create a Fitness Tracker in WordPress
    • Formidable Views: The Best WordPress Custom Application Plugin
    • How To Require Email To Download Files in WordPress
    • How to Create Conditional Drop Down Lists in WordPress Forms
    • The Best Gravity Forms Alternative: Formidable Forms vs Gravity Forms
    • How to Make a Quiz in WordPress
    • WPForms Alternative: Formidable Forms vs. WPForms Compared

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews