### [How To Create a Price Calculator For Your Website](https://wpforms.com/how-to-create-a-price-calculator-for-your-website/)

**Published:** January 18, 2024
**Author:** Hamza Shahid

**Excerpt:** Are you wondering how to create a price calculator for your website that allows users to select products and make payments instantly?

You'll be pleased to hear that WPForms allows users to create order forms for a variety of businesses and use cases that automatically calculates prices.

So, without further ado, let's dive into the steps you need to take in order to create a price calculator for your website!

**Content:**

Are you wondering how to create a price calculator for your website that allows users to select products and make payments instantly?

You’ll be pleased to hear that WPForms allows users to create order forms for a variety of businesses and use cases that automatically calculates prices.

[Create Your Price Calculator Now](https://wpforms.com/pricing/)

So, without further ado, let’s dive into the steps you need to take in order to create a price calculator for your website!

## How To Create a Price Calculator For Your Website

Creating a price calculator for your website using WPForms is incredibly straightforward. Follow the steps below to get started!

### 1. Install and Activate the WPForms Plugin

WPForms is a great tool for making forms like [contact forms](https://wpforms.com/templates/category/business-operations/contact-forms/) and [order forms](https://wpforms.com/templates/category/business-operations/payment-forms/). It has over [2,100+ WordPress form templates](https://wpforms.com/templates/) you can use.

To use the [Calculations Addon](https://wpforms.com/features/calculations-addon/), you need to get WPForms Pro. This gives you more features like order forms with customizable total fields.

![The WPForms homepage](https://wpforms.com/wp-content/uploads/2024/03/WPForms-Homepage-1600.png)

To get started, buy the [Pro license](https://wpforms.com/pricing/). Then, install WPForms on your website. If you need help, follow these instructions on [how to add a plugin to WordPress](http://www.wpbeginner.com/beginners-guide/step-by-step-guide-to-install-a-wordpress-plugin-for-beginners/).

### 2. Connect WPForms with Stripe

After you have WPForms, you need to add the [Stripe Pro Addon](https://wpforms.com/addons/stripe-addon/).

If you want, you can install the addon for another payment processor, such as [PayPal](https://wpforms.com/how-to-create-a-wordpress-registration-form-with-paypal/) or [Square](https://wpforms.com/how-to-add-square-payments-to-wordpress/), but we recommend Stripe for creating price [calculator forms](https://wpforms.com/how-to-make-a-calculator-in-wordpress/).

That said, go to **WPForms** in your WordPress menu and click on **Addons**.

![add new addon wpforms](https://wpforms.com/wp-content/uploads/2024/01/add-new-addon-wpforms.png "WPForms Addons")

Look for the **Stripe Pro Addon** and install it on your website. To do this, simply click on the **Install** button and then the **Activate** button.

![activate stripe pro addon](https://wpforms.com/wp-content/uploads/2024/01/activate-stripe-pro-addon.png)

Next, go to **WPForms » Settings** and click on **Payments**. Here, you can choose the type of currency you want to use.

![wpforms currency settings](https://wpforms.com/wp-content/uploads/2023/05/currency-settings.png "WPForms Currency Settings")

Then, connect your site to Stripe by clicking the blue button and entering your Stripe details. If you don’t have a Stripe account, you can make one now.

![connect with stripe](https://wpforms.com/wp-content/uploads/2019/09/connect-with-Stripe-live-mode-1.png "Connect With Stripe")

Once you connect to Stripe, go back to **WPForms » Settings » Payments**. You should see a green check mark showing you are connected.

![stripe connection status](https://wpforms.com/wp-content/uploads/2019/09/stripe-connection-status-2.png "Stripe Connection Status")

Now, you can [make your order form](https://wpforms.com/how-to-create-a-simple-order-form-in-wordpress/) with a price calculator feature and get payments with Stripe instantly!

### 3. Select an Order Form Template

Let’s create your order form now. Go to **WPForms** from your WordPress dashboard and click the **Add New** option**.**

![wpforms add new ](https://wpforms.com/wp-content/uploads/2023/12/add-new-form-updated.png "WPForms Add New")

After that, give your form a name and pick a template. For this guide, we’ll choose the [Billing / Order Form](https://wpforms.com/templates/billing-order-form-template/) to speed up the form creation.

![select billing form](https://wpforms.com/wp-content/uploads/2017/10/select-billing-form.png "Select Billing Form")

This template has a **Multiple Items** field and a **Total** field. You can change the form to add different kinds of products and work out the total price.

#### Making Changes to the Multiple Items Field

In this guide, we begin with a normal **Multiple Items** field and change it to include different types of shirts.

Click on the **Multiple Items** field to change what’s in it. Here’s what you can do to make the form more relevant to your business:

- **Label:** This is the name for the choices.
- **Items:** These are the different things you can choose and their costs.
- **Show price after item labels:** Check this if you want to show each item’s price.

![multiple item field order form](https://wpforms.com/wp-content/uploads/2017/10/multiple-item-field.png "Multiple Items Field Order Form")

Once you’re done, whenever someone picks a product, the total price changes right away to match what they chose.

![wpforms total amount display](https://wpforms.com/wp-content/uploads/2023/12/wpforms-total-amount-display.png "WPForms Total Amount Display")

You can also [create a coupon code](https://wpforms.com/add-coupon-fields-to-stripe-forms/), which customers can use to receive a discount on their total order amount.

#### Choosing More Than One Product

Maybe you want to let people pick more than one product. You can do that easily with various fields and customization options.

For instance, if someone wants to [buy a T-shirt and a sweatshirt](https://wpforms.com/how-to-create-a-t-shirt-order-form-in-wordpress-step-by-step/), they can pick both on the same form.

Go to the **Payment Fields** section and use the **Checkbox Items** field. Here, you can list all the products.

![wpforms choose products](https://wpforms.com/wp-content/uploads/2023/12/wpforms-choose-products.png "WPForms Choose Products")

Now, when someone picks more than one product, the total price will add up all their choices.

![total amount multiple products](https://wpforms.com/wp-content/uploads/2023/12/total-amount-multiple-products.png "Total Amount Multiple Products")

#### Adding a Stripe Credit Card Field

The most important part of an order form is letting customers pay easily online to ensure you receive the payments and can proceed with dispatching the order.

Earlier, we added Stripe Pro and connected it to WPForms to allow you to accept payments on your site. Now, it’s time to add Stripe to your form.

To set up Stripe payments on your form, find the **Stripe Credit Card** field under **Payment Fields** and add it to your form.

![add stripe credit card field](https://wpforms.com/wp-content/uploads/2023/06/Add-the-Stripe-Credit-Card-field-to-your-form.png "Add Stripe Credit Card Field")

Next, go to the **Payments** section and look at the **Stripe** settings. Turn on the option for **Enable one-time payments**.

![enable one time payments stripe](https://wpforms.com/wp-content/uploads/2019/09/enable-stripe-one-time-payments-2.png "Enable One Time Payments Stripe")

Now, your customers can pick different products, see the total price, and make their payments all in one form!

### 4. Use Custom Formulas for Advanced Totals

If you want to do more with the total prices being displayed to your customers on the order form, you can use the [Calculations Addon](https://wpforms.com/addons/calculations-addon/).

Go to **WPForms » Addons** and look for the **Calculations Addon**. Then, click on the **Install Addon** button. After that, click on the **Activate** button.

![activate calculations addon](https://wpforms.com/wp-content/uploads/2023/10/Activate-Calculations-Addon.png "Activate Calculations Addon")

Now, you can make complex formulas for your total price. For example, you can add a field for quantity or insert a sales tax deduction.

#### Adding a Quantity Field

Want to let people choose how many products they want? Add a quantity field to your form. Just move a **Dropdown** field to the form area on the right.

![select dropdown field](https://wpforms.com/wp-content/uploads/2023/12/select-dropdown-field.png "Select Dropdown Field")

Next, go to the **Field Options** for this **Dropdown** field. Change its name to “Quantity” and put in the numbers people can choose from.

![wpforms dropdown quantity field](https://wpforms.com/wp-content/uploads/2023/12/wpforms-dropdown-quantity-field.png "WPForms Dropdown Quantity Field")

Now, add a **Single Item** field to your form. You can do this by dragging and dropping it on the preview or simply clicking on it.

![single item field](https://wpforms.com/wp-content/uploads/2023/12/single-item-field.png "Single Item Field")

Change the **Label** of this Single Item field to something like “Total Price.” Then, go to the **Advanced** tab and turn on **Enable Calculation**.

![enable calculation option](https://wpforms.com/wp-content/uploads/2023/12/enable-calculation-option.png "Enable Calculation Option")

In the **Formula** box, connect the **Multiple Items** field to the quantity **Dropdown** field. You can do this with a simple multiplication formula.

`$FX_amount * $FX`

Here, `$FX` is the value of the field with ID #X, and `$FX_amount` is the price value of the payment field with ID #X.

Open the **Multiple Items** field and note down its Field ID. You’ll find this in **Field Options** under the **General** tab.

![multiple items field id](https://wpforms.com/wp-content/uploads/2023/12/multiple-items-field-id.png "Multiple Items Field ID")

Do the same for the **Dropdown** field named “Quantity.” This is important for the next step, as that’s where we create the formula.

![dropdown quantity field id](https://wpforms.com/wp-content/uploads/2023/12/dropdown-quantity-field-id.png "Dropdown Quantity Field ID")

Now, all you have to do is put these IDs into the (product price times quantity) formula. So, `$FX_amount * $FX` will become `$F5_amount * $F10`.

Type the formula `$F5_amount * $F10` into the **Formula** box of the **Single Item** “Total Price” field. Then, click on **Validate Formula** to make sure it is correct.

![validate formula option](https://wpforms.com/wp-content/uploads/2023/12/validate-formula-option.png "Validate Formula Option")

Now, when someone picks a product and its quantity, the total price will be automatically calculated, thanks to the custom formula you added!

#### Inserting a Sales Tax Deduction

Take a look at our [Sales Tax Calculator Form Template](https://wpforms.com/templates/sales-tax-calculator-form-template/) if you’d like the sales tax for your state or nation to be automatically calculated on your order forms.

When you want to figure out taxes, you usually multiply the subtotal (price of the item times the number of items) by the tax rate.

As you learned in the last step, the formula for our use case (price of the item times the number of items) is:

`$F5_amount * $F10`

Let’s assume the sales tax amount is computed as 10% of the subtotal. The standard tax calculation formula is as follows:

`0.10 * ($F5_amount * $F10)`

The grand total, which incorporates the tax, is determined by adding the subtotal and the tax. The following will represent the equation:

`($F5_amount * $F10) + (0.10 * ($F5_amount * $F10))`

This can be added anywhere you want to show the final amount. We’ll use the **Single Item** field that we’ve named “Total Price + Tax.”

![standard tax formula](https://wpforms.com/wp-content/uploads/2023/12/standard-tax-formula.png "Standard Tax Formula")

Remember, when you create a formula, you need to use the right Field ID so the math works out right. For additional information and help creating formulas, check out this [Calculations Cheatsheet](https://wpforms.com/calculations-formula-cheatsheet/)

Great job! You’ve successfully created a price calculator for WordPress with WPForms, but the benefits don’t just end there.

With the [Stripe webhook integration](https://wpforms.com/how-to-set-up-wordpress-stripe-webhook-without-woocommerce/), you can also view your [Stripe refund status](https://wpforms.com/how-to-show-stripe-refund-status-updates-in-wordpress/), subscription data, or [transaction history](https://wpforms.com/how-to-view-stripe-transaction-history-in-wordpress/) directly from your WordPress dashboard.

### 5. Publish Your Billing / Order Form

WPForms makes it easy to publish your form and take it live on your website. After you finish making your form, click on the **Save** button**.**

![save form](https://wpforms.com/wp-content/uploads/2023/12/save-form.png "Save Form")

Then, click on **Embed** next to the **Save** button. You can choose to publish your form on a new page or an existing one.

![create new page](https://wpforms.com/wp-content/uploads/2023/12/create-new-page.png "Create New Page")

WPForms will take you to the WordPress editor without you having to do anything. Your form will already be there on the new page.

To activate your order form and online calculator with WPForms calculations, all you need to do is click on the **Publish** button.

![publish form](https://wpforms.com/wp-content/uploads/2023/12/publish-form.png "Publish Form")

After publishing, as a precautionary measure, [test the embedded form](https://wpforms.com/form-testing-checklist/) to ensure it works as expected and rule out any concerns.

![form preview](https://wpforms.com/wp-content/uploads/2023/12/form-preview.gif "Form Preview")

### FAQs about Creating a Price Calculator for Your Website

Calculations are a popular topic among our readers. Here are answers to several frequently asked questions about it.

#### How do I create a custom calculator for my website?

To create a custom calculator for your website, you can use WPForms Pro with the Calculations Addon. First, install WPForms Pro on your WordPress site.

Then, use the [drag-and-drop builder](https://wpforms.com/what-is-wpforms/) to add fields for inputs like quantities and product selections to complete your order form.

Once done, enable the Calculations Addon to create custom calculators, such as a [Macronutrients Calculator](https://wpforms.com/how-to-create-your-own-macro-calculator-in-wordpress/) for a health & fitness website,

#### How do you add calculations to a website?

To add calculations to a website, consider using a form builder like [WPForms Pro](https://wpforms.com/pricing/), which offers a Calculations Addon.

After installing WPForms, create a new form and use the Calculations feature to [add mathematical operations to your fields](https://wpforms.com/docs/calculations-formula-examples/).

You can create various formulas using basic arithmetic or complex expressions to calculate values dynamically based on user input, which is ideal for order forms, booking forms, and more.

#### How do you create a price formula?

To [create a price formula](https://wpforms.com/docs/building-formulas-with-the-calculations-addon/) on your website, you can utilize WPForms Pro along with the Calculations Addon.

Start by [setting up a form](https://wpforms.com/how-to-add-product-options-that-change-the-total-price/) with fields for the items or services you’re offering. Assign prices to these items.

Then, use the Calculations Addon to create a formula that multiplies the item prices by quantities and adds any additional fees or discounts.

### Next, Learn How to Create a Custom Mortgage Calculator

Want to create a custom mortgage calculator for your website? By using an online mortgage calculator, loan officers can pre-screen applicants faster and reduce messy paperwork. Check out this guide on [how to make a custom mortgage calculator](https://wpforms.com/how-to-make-a-mortgage-application-form/) using a WordPress template.

[Create Your Price Calculator Now](https://wpforms.com/pricing/)

Ready to build your form? Get started today with the easiest WordPress form builder plugin. [WPForms Pro](https://wpforms.com/pricing) includes lots of free templates and offers a 14-day money-back guarantee.

If this article helped you out, please follow us on [Facebook](https://facebook.com/wpforms) and [Twitter](https://twitter.com/easywpforms) for more free WordPress tutorials and guides.

**Categories:** WordPress Tutorials

**Tags:** calculation addon, online calculations, price calculator, stripe addon, wpforms pro

---