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.
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.
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.
You could look for a calculator plugin, but why bother when you can do this in Formidable Forms? 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.
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.
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 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.
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.
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.
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.
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.
Find out more about the great range of features that make Formidable Forms the best form builder for WordPress!
Leave a Reply