Forms with Calculation: Calculate Values in WordPress Forms

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 under 2 minutes.

Fluent Forms is the most beginner-friendly form builder. Download now and start crafting beautiful forms FREE!!!

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 installed. For those of you who haven’t (what are 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. 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. So we’re keeping only the Address Line 1. And with that, you have the general layout of a form.

Step 4: Design a fundraiser booking form

What places a fundraiser booking form apart from other webforms is its ability to transform. Just use a repeat field, and it will automatically expand to accommodate for the users needs. Moreover, since it is about fundraising, there is obviously the matter of paying or booking for each seat. Simply enable the calculation, and let Fluent Forms take care of the rest.

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 total seats booked and another for the total amount donated.

For the first column, let us use a Select Field Type and label it Total seats booked. We provided options for upto 5 seats. But you can offer more if you wish. By checking the Calc Values tickbox, we can assign values to them too. This will come especially handy if you had a product order form in mind.

Moving on to the second column, let’s select a Numeric Field Type and label it Total amount donated. You can also set a default value. This value will be offered by default unless visitors provide a different one. Tick the Required box to yes, and our fundraiser booking table is set.

Step 5: Enable calculation

Now it’s time to show the total seats booked and the total amount donated. To do that, we’ll need two numeric fields. Drag and drop a Numeric field and change the Element Label to ‘Total seats booked.’ 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 seats booked, we’ll use the {repeat.repeater_field.1} expression, and it’ll automatically sum the values. Repeat the process for the total donatio 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.

• WordPress
• Facebook
• Instagram
• Twitter
• YouTube