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

**Published:** November 14, 2023
**Author:** Hamza Shahid

**Excerpt:** Looking for an easy solution on how to create a price calculator for your website to start selling items online?

To assist you in managing your eCommerce needs, all you require is an order form or a plugin specifically designed for WordPress.

In this article, we'll guide you through the process of setting up a simple order form with an automated price calculator for your website.

**Content:**

Looking for an easy solution on how to create a price calculator for your website to start selling items online?

To assist you in managing your eCommerce needs, all you require is an order form that is user-friendly and automatically calculates prices.

In this article, we’ll guide you through the process of setting up a simple order form with an automated price calculator for your website.

### Why Use a Price Calculator for WordPress?

Are you still using simple order forms that don’t have price calculators or payment gateways for your website visitors?

If not, you’re missing out on a key advantage in today’s digital marketplace. Let’s talk about the reasons why:

- **Real-Time Estimates:** With an automated price calculator on landing pages, potential customers get instant quotes, enhancing their shopping experience.
- **Improved Checkout:** Integrating payment options helps with checkout optimization, increasing the likelihood of completed sales.
- **Professional Appeal:** Modern customers expect sophisticated tools. Offering dynamic pricing shows that your business is customer-centric.
- **Reduces Cart Abandonment:** A transparent pricing structure with easy payment methods helps reduce instances of cart abandonment.
- **Saves Time:** Automated calculations reduce manual interventions, allowing businesses to focus on core operations and customer service.

That said, let’s now dive into the step-by-step instructions on how you can create an order form with automated price calculation results using WPForms!

## How to Create a Price Calculator for Your Website

Calculating the total price with a web calculator using WPForms is extremely simple. All you have to do is follow these simple steps below:

### Step 1: Install and Activate WPForms Pro

If you’re looking for a form builder plugin that allows you to create contact forms or order forms of all kinds, then look no further than [WPForms](https://wpforms.com/).

It supports multiple payment gateways, has [2,100+ WordPress form templates](https://wpforms.com/templates/), and many premium addons to increase the functionality of your website.

[![the wpforms homepage](https://wpmailsmtp.com/wp-content/uploads/2023/10/Homepage-WPForms.png "The WPForms Homepage")](https://wpforms.com/)

For the purposes of this tutorial, we’ll be using the WPForms Pro version to build a custom calculator and order form in the fastest way possible.

Once you’re ready to proceed, get the WPForms Pro subscription and [install the plugin on your WordPress website](http://www.wpbeginner.com/beginners-guide/step-by-step-guide-to-install-a-wordpress-plugin-for-beginners/).

### Step 2: Connect WPForms with Stripe

After installing WPForms, you’ll need to get the Stripe Pro addon. From the WordPress admin menu, select **WPForms » Addons**.

![WPForms addon screen](https://wpmailsmtp.com/wp-content/uploads/2023/10/WPForms-addon-screen.png "WPForms Addons Screen")

Next, to find the Stripe Pro Addon, simply enter its name in the **Search Addons** field. After that, click on **Install Addon**.

![Install Stripe Pro addon](https://wpmailsmtp.com/wp-content/uploads/2023/10/Install-Stripe-Pro-addon.png "Install Stripe Pro Addon")

To configure your Stripe payment settings, now you’ll need to navigate to **WPForms » Settings** and then click on the **Payments** tab.

![WPForms payment settings](https://wpmailsmtp.com/wp-content/uploads/2023/10/WPForms-payment-settings.png "WPForms Payment Settings")

To change the currency used on your site, please select the desired currency from the drop-down menu before proceeding.

![Choose currency](https://wpmailsmtp.com/wp-content/uploads/2023/10/Choose-currency.png "Choose Currency")

When you are ready to connect Stripe payments to your platform, simply scroll down and click on the blue **Connect with Stripe** button.

![Connect with Stripe](https://wpmailsmtp.com/wp-content/uploads/2023/10/Connect-with-Stripe.png "Connect With Stripe")

You’ll now be asked to enter your Stripe credentials to connect WPForms with your Stripe account. Don’t have an account? Create one now!

![Stripe Connect](https://wpmailsmtp.com/wp-content/uploads/2023/10/Stripe-Connect.png "Stripe Connect")

After finishing the Stripe Connect process, navigate to **WPForms » Settings » Payments**. You should see a green check mark next to Connection Status.

![Stripe connection status](https://wpmailsmtp.com/wp-content/uploads/2023/10/Stripe-connection-status.png "Stripe Connection Status")

Excellent job! You’re now all set to create your order form and integrate it with Stripe to start accepting payments in no time.

### Step 3: Select an Order Form Template

The time has come to create your order form. Click the **Add New** button after selecting **WPForms** from your WordPress dashboard.

![WPForms add new](https://wpmailsmtp.com/wp-content/uploads/2023/10/WPForms-add-new.png "WPForms Add New")

This will bring you to the next screen. To start, please provide a name for your form and then select a template.

Once you find a suitable template, click the **Use Template** button. For this tutorial, we’ll select the [Billing / Order Form](https://wpforms.com/templates/billing-order-form-template/).

![Selecting billing order form](https://wpmailsmtp.com/wp-content/uploads/2023/10/Selecting-billing-order-form.png "Selecting Billing Order Form")

The template comes with a **Multiple Items** field and a **Total** field that can be used to figure out how much an order costs in WordPress.

You can modify the template to include different product option fields and incorporate calculations to update the Total Price field.

#### Customizing the Multiple Items Field

For this tutorial, we started with the standard **Multiple Items** field and modified it to include a few different kinds of shirts.

![Customize Multiple Items field](https://wpmailsmtp.com/wp-content/uploads/2023/10/Customize-Multiple-Items-field.png "Customize Multiple Items Field")

When you click on the **Multiple Items** field, you can modify its options, just like we did in this example. Here are some useful options:

- **Label:** This is where you can say what the choices below are about.
- **Items:** These are the different options and how much they cost.
- **Show price after item labels:** If you want to show the final price of each item separately, check this box.

Now, when a user chooses a product on this form, the Total Amount field calculation changes immediately to match the price of that item.

![WPForms Total Amount Display](https://wpmailsmtp.com/wp-content/uploads/2023/10/WPForms-Total-Amount-Display.png "WPForms Total Amount Display")

#### Supporting Multiple Product Selection

Let’s say instead of giving users the option to select only one product, you want them to select multiple products. That can be made possible too!

For example, if a user wishes to purchase a T-shirt and a sweatshirt, you can provide them with the option to order both items using a single form.

To do this, navigate to the **Payment Fields** menu and utilize the **Checkbox Items** field. Within this field, you can include your product options.

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

Now, if a user selects multiple products, the **Total Amount** field will automatically display the combined amount of the selected items.

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

#### Adding a Stripe Credit Card Field

The most important thing about an order form is to provide customers with an efficient and easy way to make payments online.

Previously, we enabled the Stripe Pro addon and connected Stripe with WPForms to start accepting payments.

To enable payments for your order form, under the **Payment Fields**, select the **Stripe Credit Card** field.

![Stripe Credit Card field](https://wpmailsmtp.com/wp-content/uploads/2023/10/Stripe-Credit-Card-field.png "Stripe Credit Card Field")

After that, go to the **Payments** tab and open up the **Stripe** settings. Then, toggle ON the **Enable one-time payments** option.

![Enable Stripe one time payments](https://wpmailsmtp.com/wp-content/uploads/2023/10/Enable-Stripe-one-time-payments.png "Enable Stripe One Time Payments")

You’re all set now to let your customers buy different products, get the total price for their orders, and make payments through a single form!

### Step 4: Use Calculations for Advanced Totals (Optional)

The Calculations Addon by WPForms can make things even more interesting by allowing you to change total price calculations.

It’s very easy to add the Calculations Addon to your WordPress site. From your WordPress dashboard, go to **WPForms** **» Addons**.

![WPForms addon screen](https://wpmailsmtp.com/wp-content/uploads/2023/10/WPForms-addon-screen.png "WPForms Addons Screen")

Enter “Calculations” in the Search Addons field. Then, click on the **Install Addon** button. After that, click on the **Activate** button.

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

With the Calculations Addon installed and activated, you can now create more interactive, complex formulas to change the total price on your form.

For example, you can add a field for quantity or insert a standard tax deduction, depending on the type of calculator you need.

#### Adding a Quantity Field

To add a quantity field to your form, simply drag-and-drop a **Dropdown** field onto the form preview located on the right side.

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

Now, navigate to the **Field Options** of the **Dropdown** field you just added and proceed to modify the Label to “Quantity.”

Then, input the available quantities into the **Choices** section and ensure that the field is marked as **Required**.

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

Once that’s done, choose the **Single Item** field and add it to your form either by dragging and dropping it or by clicking on it.

![WPForms Single Item field](https://wpmailsmtp.com/wp-content/uploads/2023/10/WPForms-Single-Item-field.png "WPForms Single Item Field")

You can now change the **Label** for the Single Item box to something like “Total Price.” After that, go to the **Advanced** tab and turn on **Enable Calculations**.

![WPForms Enable Calculation option](https://wpmailsmtp.com/wp-content/uploads/2023/10/WPForms-Enable-Calculation-option.png "WPForms Enable Calculation Option")

In the **Formula** box, you can easily connect the **Multiple Items** field to the quantity **Dropdown** field by using a simple multiplication.

`$FX_amount * $FX`

- **$FX:** Value of the field with ID #X (#1).
- **$FX\_amount:** The amount value of the payment field with ID #X.

Now open the **Multiple Items** field and write down the **Field ID**. This can be found in their **Field Options**, right below the **General** tab.

![WPForms Multiple Items Field ID](https://wpmailsmtp.com/wp-content/uploads/2023/10/WPForms-Multiple-Items-Field-ID-e1698413885304.png "WPForms Multiple Items Field ID")

Following this, repeat the same process for the **Dropdown** field labeled as “Quantity”. This step is crucial for the next part.

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

Now, we will combine the IDs and add them to our (product price times quantity) formula. `$FX_amount * $FX` formula will now become `$F5_amount * $F10`

You’re now ready to enter the calculation `$F5_amount * $F10` into the Formula box of the **Single Item** “Total Price” field. Once done, click on **Validate Formula**.

![Validate Formula option](https://wpmailsmtp.com/wp-content/uploads/2023/10/Validate-Formula-option.png "Validate Formula Option")

Now, whenever a user chooses a product and adds a quantity, the Total Price will be automatically calculated.

![wpforms product price times quantity](https://wpmailsmtp.com/wp-content/uploads/2023/10/wpforms-product-price-times-quantity.png "WPForms Product Price Times Quantity")

#### Adding a Standard Tax Deduction

When considering taxes, you usually calculate them by multiplying the subtotal (product price multiplied by quantity) with the applicable tax rate.

As mentioned earlier, the formula for calculating the subtotal in our use case is the product price multiplied by the quantity.

`$F5_amount * $F10`

Let’s assume that the tax amount is calculated as 10% of the subtotal. The formula for calculating a standard tax is as follows:

`0.10 * ($F5_amount * $F10)`

To calculate the grand total, which includes the tax, you need to add the subtotal and the tax together. The equation will appear as follows:

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

You can add this wherever you choose to display the final total. For example, we’ll use the formula on the **Single Item** field we’ve labeled “Total Price + Tax.”

![wpforms tax formula](https://wpmailsmtp.com/wp-content/uploads/2023/10/wpforms-tax-formula.png "WPForms Tax Formula")

It is important to remember that when adding a formula, you must insert the correct Field ID in order for the calculations to work accurately.

### Step 5: Publish Your Billing / Order Form

One of the best features of WPForms is the ability to easily embed your form onto a new page without the need to modify any code.

After you have customized your order form to include various product options and automatic amount calculation, click on the **Save** button.

![Save WPForms](https://wpmailsmtp.com/wp-content/uploads/2023/10/Save-WPForms.png "Save WPForms")

To proceed, please click on the **Embed** button located next to the Save option. You can now choose to **Create New Page** or **Select Existing Page**.

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

Afterward, you will be prompted to provide a name for your page. Once you have finished, please click on the **Let’s Go** button.

![WPForms Lets Go](https://wpmailsmtp.com/wp-content/uploads/2023/10/WPForms-Lets-Go.png "WPForms Lets Go")

Now, WPForms will automatically take you to the WordPress editor, where you will find your form already embedded within the new page.

To make your order form and online calculator with the WPForms calculations live, simply click on the **Publish** button. You’re all set now!

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

To ensure there are no issues, it is important to [test the embedded form](https://wpforms.com/form-testing-checklist/) after publishing and confirm that it functions as intended.

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

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

Calculation forms are a popular topic among our readers. Here are answers to several frequently asked questions about it to increase your know how:

#### How do I make a calculator for my website?

To create a simple price calculator for your site, opt for WordPress plugins or online tools tailored for this purpose. WPForms Pro with the Calculations Addon is a great option, as it facilitates a ton of advanced formulas and comes with a huge list of pre-made [calculation templates](https://wpmailsmtp.com/how-to-make-a-calculator-form/) as well!

#### How do I create a price calculator in WordPress?

Creating a price calculator in WordPress is straightforward with the right tools. The WPForms Pro is a calculator builder and form plugin that lets you generate dynamic price calculators effortlessly. Just install, set up your fields, and activate calculations by checking out this [Calculation Formula Cheatsheet](https://wpforms.com/calculations-formula-cheatsheet/).

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

A price formula is used for a total cost calculator. Typically, it accounts for the base price, added value, standard tax, and potential discounts or markups. With WPForms Pro and its Calculations Addon, you can input number sliders, custom formulas, and more ensuring accurate and real-time price calculations for users.

### Next, Choose the Right SMTP Plugin to Improve Email Deliverability for Your Website

After users purchase a product by filling out your order form, it’s also important to send them a confirmation email for lead generation. To do this, it’s vital you choose the right SMTP plugin. So, check out this comparison of [WP Mail SMTP Lite vs Pro](https://wpmailsmtp.com/wp-mail-smtp-lite-vs-pro-is-it-worth-the-upgrade/).

[Fix Your WordPress Emails Now](https://wpmailsmtp.com/pricing/)

Ready to fix your emails? [Get started today](https://wpmailsmtp.com/pricing) with the best WordPress SMTP plugin. If you don’t have the time to fix your emails, you can get full White Glove Setup assistance as an extra purchase, and there’s a 14-day money-back guarantee for all paid plans.

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

**Categories:** WordPress Tutorials

**Tags:** billing, calculations, calculations addon, form, order, price calculator, stripe pro, wpforms pro

---