×
HIDE

Easy way to create Calculated fields for Elementor

WordPress forms have advanced much beyond the simple mailings that only had a name and email box. They frequently participate in a variety of complex activities, such as payment collection, signature collecting, in-built calculation, etc.

In fact, you can construct forms that are as sophisticated as an order bump now, as well as payment forms that include calculations. In order to provide precise instructions on how to develop WordPress forms with calculation, we have curated this article today. Repeat fields will be used, but other fields, such as numeric, payment, etc., also permit calculated fields.

Demonstration of Calculated fields

Repeater Fields Multi Level Nested

You can use Elementor Section or Inner Section to make Repeater, Sub Repeater
and Any Elementor Widget to make Add, Remove Button

Tutorial | Template Json Files

Conditional Logic: If Acceptance checked, the Section Repeater bellow will be shown

$
Total $
$
Total $
Total $

Sub Repeater - Nested

Test with Card number 4242 4242 4242 4242 – 04 / 24 – 242 – 42424

You can checkout with Stripe, Stripe Subscriptions or Woocommerce

Please extract the Zip file, then import Json files.

How to import Elementor Templates

Tutorials - How to create Calculated fields

You must need additional add-ons to have calculated fields in order to input values in some form builders. But in Piotnet plugins, PAFE Form Builder is incredibly quick, trustworthy, and simple to use. Let’s go.

1. PAFE Form Builder

Example: Below is a procedure how to create a bill calculation.

Firstly, we create a simple form that empowers customers to choose product, size and quantity.

Calculated field for elementor

Edit Total field > Content Tab > Fields > Type > choose Calculated Fields.

Next, the control section would be shown as below: 

calculated field for elementor

In the Calculation control field, add your mathematic formula. Shortcodes of fields would be used as variables.

After choosing product, size and quantity, Calculated Fields will automatically calculate the total amount.

calculated field for elementor

How to apply “Calculated field” to  calculate distance between locations: Distance Calculation

2. Elementor Form

mailbox illustrator

Please check your email inbox. If you haven’t received anything,

also check your spam folder.

images with text "you just made my day"

PAFE Form Builder

Extensions

PAFE Widgets

piotnet addons for elementor white icon
Popup Trigger URL
Piotnet Addons For Elementor