A website cost calculator sure looks intriguing. How about we help you do so in just five simple steps?
We’ll use a form builder plugin you might have heard about.
Sounds good? Let’s get right into it then.
Creating a Website Price Calculator
Like in the real-world scenario, we’ll need a calculator to determine the price or cost of any goods.
We have just the right thing!
Step 1: Install and Activate Everest Forms and Everest Forms Pro
You might wonder how Everest Forms is a cost calculator WordPress plugin. Well, it’s a form builder plugin with calculations and payment fields.
You can install the free plugin from your WordPress dashboard or by going to wordpress.org, downloading the zip file, and installing it.
This article has mentioned ways to install the plugin in detail.
After that, you must purchase the plugin’s premium version from the website.
Upload the zip file you received on your website, enter the license key that came with it, and the first step is complete.
Step 2: Create a New Price Calculator Form
After setting up the plugin successfully, it’s time to create a new price calculator form.
You can do this by using two methods: either by Using Payment Fields or Using the Calculation Add-on.
We’ll show you both of these methods in detail. So, read till the end!
Method 1: Using Payment Fields:
Everest Forms offers many pre-built templates and plenty of custom fields. Hence, you can start from scratch or use a pre-existing template to create a new form.
Go to Everest Forms >> Add New for the pre-built template and select the template you want. To create a new form, click Start From Scratch.
In this tutorial, we’ll create a form from nothing. Please provide a name for the form and click Continue.
Add Payment Fields to the Form
Once you hit Continue, a new form builder will open up.
Scroll down to find payment fields on the left side of your screen. Then, drag and drop the fields you need, such as Checkbox, Total, Multiple Choice etc., into your form.
Adding the payment fields helps you collect payment-related details in your form.
The payment fields you add depend on the products you’re selling. For example, you can add the following payment fields to the form:
- Multiple Choice: Let users select one of the products you’re selling.
- Quantity: Let them decide how many items they buy for their chosen product.
- Total: Display the total price by calculating the product price chosen with the quantity.
Note: Don’t get confused! There are separate General Multiple Choice and Checkbox fields and Payment Multiple Choice and Checkbox fields. Use the Payment ones!
And voila! You have a WordPress price calculator form ready!
You can add more fields, such as Checkboxes, Single Items, and other fields, per your requirements. Finally, click the Save button.
Method 2: Using Calculations Add-on:
Using just the Payment fields is good, but it can be better. Everest Forms’ Calculations will enhance your forms’ calculations.
A. Install and Activate the Calculations Add-on
After installing the plugin’s premium version, you can access the Everest Forms add-ons available with your plan.
You can access the Calculations add-on if you’ve purchased the Agency or Professional plan.
So, go to Everest Forms >> Add-ons and search for the Calculations add-on.
Activate it by toggling this button on.
About Calculations
Before going to the next step, let’s briefly introduce ourselves to everything about the Everest Forms’ calculations.
Decimal Values: This setting allows you to decide how many numbers appear after a decimal point (.). For example, if the result is 3.14454, and you’ve set the decimal value (2), only 3.14 will be displayed as the result.
Expression Field: In this white space, you can enter fields and calculate formulae. You can create the desired formulae using the Expressions and <> (Field Mapping) tabs.
Expressions: Here is the list of operators and functions you can add to your formulae. Consider it a shortcut for selecting them.
<> (Field Mapping): You can select the fields from which you want to take inputs/values from this tab. You can map a limited number of fields, as the ones you won’t need aren’t selectable.
Validate Formula: As the name suggests, this button helps you verify whether the formula you’ve set is correct and in the right format.
This is pretty much everything about the plugin’s calculator. Acknowledge them well and move to the next step.
B. Add Fields to the Price Calculator Form
Let’s assume you have a store where you sell clothes and shoes.
For this, we’ll be using the following fields.
- Payment Checkbox field to list our products.
- Multiple Choice field to confirm whether the customer wants the product to be delivered to them or not.
- Address field to retrieve the location for delivery.
- Single Item field to add delivery charges.
- And a Number field to calculate the total amount.
You can use other fields to list products as you prefer. However, you must use the Number or Single Item fields to calculate the amount.
Now, drag all the above fields to our form and make the necessary changes.
Here, we’ve created our form. Let us now tell you about Conditional Logic.
You might wonder why we asked you to add the Address and Single Item fields. Some customers might want you to deliver their products to them. For this, we’ll use Conditional Logic in these fields.
To learn more about the term, here’s an article on it.
Go to Field Settings for the field and activate this.
Select the Multiple Choice field from this dropdown where you’ve asked for the delivery option.
Set the condition to “Show” and “Do you want them delivered to your location?” “is” “Yes”.
This only displays the field if the user selects “Yes” on the Multiple Choice field. Do the similar for the Single Item field for Delivery Charge.
Okay, so we’ve set the form. Now, what about the calculation part?
Go to the Number field and enable the Calculation option.
We’ll be using the if() and else: functions. In non-tech terms, we set a condition inside the if bracket. If it’s met, the line below will be executed. If not, the line below else: will be executed.
So, if the user has selected “Yes”, an additional delivery charge will be added to the products. If not, only the amount for the products will be charged.
Inside the if bracket, we’ll map the Multiple Choice like this. Then we set the condition to “Yes”.
Note: Do not forget to use “ “ symbols when adding a text condition. If you’re using numbers, you won’t have to use them.
Then, below the if() line, map the product fields and delivery charge and insert an addition sign between them.
After that, below else:, only map the product fields and insert an addition sign between them.
That should do it.
However, verify whether the formula is correct by clicking the Validate Formula button.
It will let you know about any errors in your formula.
Here, it shows the Formula is valid. We’re good to go.
C: Checking Our WordPress Price Calculator
Here’s the first condition: when the customer has agreed to delivery.
And here’s the condition where the customer has declined.
Using the Calculations addon, you can create more complex operations by using available expressions, enhancing your WordPress price calculator even further.
Step 3: Publish Your Form
To do this, open any page or post from your WordPress dashboard. Then, insert a Shortcode block and paste the shortcode for your form.
You may also enter an Everest Forms block and select your form.
Then, publish the page/post.
Wrapping it Up!
That wraps up our guide on easily creating a WordPress price calculator on your website.
Above, we’ve mentioned the two super easy ways to create a price calculator form with Everest Forms.
- Using the Payment Fields
- Using the Calculation Add-on
You can use whichever method you see fit.
If you like our content, you can read more about WordPress-related stuff on our blog. And for easy video tutorials, you can subscribe to our YouTube channel.
We try to make everything easy for you through these mediums.
Further, if you have any queries, contact us via Facebook and Twitter.
