Forms with Calculation: Calculate Values in WordPress Forms

WordPress forms with calculation - Fluent Forms - Repeat Fields

WordPress forms have gone way past the elementary newsletters with a name field and an email field. They are regularly used to partake in various sophisticated tasks like payment collection, signature collection, in-built calculation, etc.

In fact, now you can design forms as complex as an order bump, create payment forms with calculation, and so much more. So today, we curated this piece with detailed instructions on how to create WordPress forms with calculation. We will be using repeat fields, but other fields like numeric, payment, etc., also allow calculation.

Create order bumps in uder 2 minutes.

How to create WordPress forms with calculation

Some form builders require you to use additional add-ons to calculate input values. Not Fluent Forms. Fluent Forms is superfast, reliable, and unbelievably effortless. So we will be using this WordPress form builder to demonstrate how you can swiftly create forms with calculation in 5 simple steps. 4 if you have Fluent Forms Pro already installed. So let’s go.

Step 1: Install Fluent Forms Pro

Chances are you already have Fluent Forms Pro already installed. For those of you who haven’t (what were you thinking?), just follow the steps mentioned below, and you’ll install Fluent Forms Pro in no time.

  • Visit fluentforms.com and select the license that caters to your need. All licenses include the same features and functionalities, so don’t worry about missing out.
  • Check out the plan you chose.
  • Go to your WordPress dashboard, and locate Plugins in the left sidebar.
  • Click on the Add New button, Upload the zip file, and Install Now.

Now that we have that out of the way let’s get to the actual process of creating WordPress forms with calculation.

Step 2: Create a form

The real first step of creating a form with calculation is to go to the Fluent Forms dashboard. Here, you’ll see an Add a New Form button. Click on it to reveal a popup with 70+ prebuilt form templates. You can search for the form template you need in the search box. But we’ll just go with a blank form.

Step 3: Create a basic form

Now that you have a form in front of you, it’s time to fill it up with all the form fields you need. We’ll design a simple product order form, so we’ll drag the fields suitable for the cause.

Start by dragging a Name field and an Email field. Notice that the name field contains three separate fields – first name, middle name, and last name. You can check only the fields you like, First name, for instance. 

Next, we need the Address fields and similar to the Name field, here too, there are 6 different fields for different information like City, State, Zip Code, etc. We’re designing a straightforward product order form for a small business, and we’d like to keep things, so we’re keeping only the Address Line 1. And with that, you have the general layout of a form.

Step 4: Design a product order form

product table - Fluent Forms

What places a product order form apart from other webforms is a product table. It is basically a table displaying the items being offered, their price, and the quantities of the ordered products.

You can display this in a number of ways. The smartest being a Repeat field. A Repeat field is a dynamic field that takes up a single row in your form but multiplies with your users’ input. That is, it will increase to as many rows as the visitor wishes. Moreover, the row can be split into several columns, each offering 4 different fields – text field, email field, numeric field, and select field.

So drag a Repeat field from the Advanced Fields section and drop it right after the Address field. On the Repeat Field Columns, Add the columns you need. We’ll keep two columns—one for the quantity of the product and another for the specification.

For the first column, let us use a Numeric Field Type and label it Quantity. You can also set a default value. This value will be offered by default unless visitors provide a different one. Moving on to the second column, let’s select a Select Field Type and label it Cake Flavor. This will allow us to provide multiple options to our visitors. On the Options, we will set the cake flavors we offer. And by checking the Calc Values tickbox, we can assign values to them. Let’s say the Black Forest cake costs $50, the Red Velvet cake costs $70, and the Vanilla cake costs $40. Tick the Required box to yes, and our product table is set.

Step 5: Enable calculation

Enable calculation -WordPress forms with calculation - Fluent Forms

Now it’s time to show the total quantity order and the total bill. To do that, we’ll need two numeric fields. Drag and drop a Numeric field and change the Element Label to ‘Total quantity.’ Then go to the Advanced Options of the Numeric Field and scroll down to the Calculation Field Settings. Tick the Enable Calculation checkbox, and a Textarea field will appear where you can define the Calculation Expression.

Click on the ticket icon on the top right corner of the field to select the input field you want to operate numerical calculation on. We’ll select the Repeat field, and the respective numerical expression will appear. Now, we have to remember that it will only sum the repeat field columns. 

Defining the repeat field columns is very easy. All we have to do is add the column number at the rear end of the calculation expression and separate it with a full stop (.). We have the calculation expression {repeat.repeater_field}. So it becomes {repeat.repeater_field.1} for the first column and {repeat.repeater_field.2} for the second. To say in a simplified manner, {repeat.repeater_field.n} (where n= 1, 2, 3, etc. column number) expression only sums the n nth repeat field column.

For calculating the total number of quantities ordered, we’ll use the {repeat.repeater_field.1} expression, and it’ll automatically sum the values. Repeat the process for the total bill in the second numeric field, and use the {repeat.repeater_field.2} expression.

Hit the Save Form if you don’t want your precious form to go away.

Discover WordPress forms

You’ve seen how easily you can create forms with calculation. 4 simple steps and boom! You have a working WordPress form in your hands that will swiftly sum your input values. But that’s not all your form is capable of.

Automatic address suggestion, checkable grid, GDPR agreement, color picker, advanced post creation, multi-column layout, subscription payment, conditional email routing, etc., are only some of the features that come with Fluent Forms. To get the full Fluent experience, make sure you give Fluent Forms a go.

Similar Posts

Leave a Reply

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