Document – Elementor forms – Cost Calculator

With the Elementor Forms Cost Calculator, you can create dynamic and interactive forms that provide users with instant cost calculations or estimates. This is particularly useful for businesses or websites that offer products or services with variable pricing based on user selections or quantities.

Here are some key features and capabilities typically offered by the Elementor Forms Cost Calculator:

  1. Calculation Fields: This extension introduces calculation fields into your Elementor Forms forms. You can define these fields and specify mathematical formulas or expressions using variables and operators.
  2. Variable Inputs: Users can input values into the form, such as quantities, dimensions, or other parameters that affect the final cost calculation.
  3. Conditional Logic: The plugin allows you to incorporate conditional logic into the calculations. This means that you can set up different calculations based on specific conditions or user choices.
  4. Dynamic Updates: As users make changes or update input values, the cost calculation is automatically updated in real-time, providing instant feedback.
  5. Customizable Output: You can customize the display and formatting of the calculated cost or estimate. This might include adding currency symbols, decimal places, or any additional text.
  6. Integration with Elementor Forms: The extension seamlessly integrates with the Elementor Forms plugin, allowing you to leverage its form-building capabilities while adding cost calculation functionality.

Plugin Installation – top

Download it here: https://add-ons.org/plugin/elementor-forms-cost-calculator/

Once you’ve downloaded a plugin, you’ll need to install it on your website. Log into your WordPress admin dashboard. Navigate to the “Plugins” section and click on “Add New.” Search for the plugin by name and click “Install Now” once you find it.

After installation, click on “Activate” to activate the plugin.

Configuration

In the WPForms form editor, you’ll find a new “Calculator” section. Here, you can create and manage your calculations, including:

  • Calculation Formulas: Define the mathematical expressions and logic for your calculations.
  • Conditional Calculations: Set up rules to apply different calculations based on form field values.
  • Calculation Formatting: Customize the display of your calculated values, such as currency formatting, decimal precision, and more.

Calculation settings

Step 1: On your WP dashboard, head to Pages – Create a new page – Edit with Eleemtor.

Step 2: In your form editor – Add a field –  Choose Calculator type.

add calculator field for elementor

when you enter, suggested functions will appear.

Number Format

Switch on “Yes”.

IF Condition

Logical operators (==, !=, <, <, >=, <=) are supported, but logically they can only return true (1) or false (0). In order to leverage them, use the built-in if function:

✔️ One condition:

if(condition,true,false)

E.g: If (A>B, 100, 10)

Have a result:

one if condition for elementor calculator
if condition for elementor calculator

✔️ Two conditions:

if(if( condition, true, if( condition, true, false))

E.g: Calculate the entrance fee to the zoo park:
Children under 10 years old receive a 50% discount, persons over 70 years old receive a free, and everyone else pays the exact original price.

  • Step 1: Drop down fields: Original Fee (type:number), Age(type:number slider), Final Fee(type:calculator)
  • Step 2: Set formula:
if(field_d060d05 <10, field_6922ee0*0.5, if( field_d060d05>=70,0, field_6922ee0))

Where:

field_d060d05: ID of Age

field_6922ee0: ID of Original Fee

  • Step 3: Save and Have a preview:

if condition for elementor calculator
if condition for elementor calculator

Date/ Month/ Year calculations

days( end, start)
months( end, start)
years( end, start)

end: copy & paste ID of Date B

start: copy & paste ID of Date A

E.g:

Age calculation

Method 1: Based on Date of Birth to present

E.g:

  • Step 1: Drop down fields: Date of Birth (type:date) and Age (type: calculator).
  • Step 2: Set formula:
Age(birthday)

Where:

birthday: ID of Date of Birth ( when you click on Date of Birth field and continually click on Advanced tag, it is displayed.

  • Step 3: Save and have a look!

Age calculation based on date of birth
Age calculation based on date of birth

Method 2: Based on date of birth until a given date.

  • Step 1: Drop down fields: Date of Birth (type:date), Given Date(type:date) and Age (type: calculator).
  • Step 2: Set formula:
age2(birthday,field_2f377d6)

Where:

birthday: ID of Date of Birth

field_2f377d6: ID of Given Date

  • Step 3: Save and have a look!

Age calculation based on given date
Age calculation based on given date

BMI Calculator

E.g:

  • Step 1: Create fields: Weight(type:number), Height(type:number), BMI Calculator(type:calculator)
  • Step 2: Set formula:
field_d953e95/(field_c6d91bb*field_c6d91bb)

where

field_d953e95: ID of Weight

field_c6d91bb: ID of Height

  • Step 3: Please have a preview:

BMI Calculator
BMI Calculator

Supported symbols – top

SymbolExplanation
+Addition Operator eg. 2+3 results 5
Subtraction Operator eg. 2-3 results -1
/Division operator eg 3/2 results 1.5
*Multiplication Operator eg. 2*3 results 6
ModModulus Operator eg. 3 Mod 2 results 1
(Opening Parenthesis
)Closing Parenthesis
SigmaSummation eg. Sigma(1,100,n) results 5050
PiProduct eg. Pi(1,10,n) results 3628800
nVariable for Summation or Product
piMath constant pi returns 3.14
eMath constant e returns 2.71
CCombination operator eg. 4C2 returns 6
PPermutation operator eg. 4P2 returns 12
!factorial operator eg. 4! returns 24
loglogarithmic function with base 10 eg. log 1000 returns 3
lnnatural log function with base e eg. ln 2 returns .3010
powpower function with two operator pow(2,3) returns 8
^power operator eg. 2^3 returns 8
rootunderroot function root 4 returns 2
sinSine function
cosCosine function
tanTangent function
asinInverse Sine funtion
acosInverse Cosine funtion
atanInverse Tangent funtion
sinhHyperbolic Sine funtion
coshHyperbolic Cosine funtion
tanhHyperbolic Tangent funtion
asinhInverse Hyperbolic Sine funtion
acoshInverse Hyperbolic Cosine funtion
atanhInverse Hyperbolic Tangent funtion

Use cases – top

InputResultExplanation
2+3-14Addition and Subtraction operator
2*5/101Multiplication and Division operator
tan45 or tan(45)1Trigonometric Function ( tan in Degree mode)
tan45 or tan(45)1.619775190543862Trigonometric Function ( tan in Radian mode)
Pi1,15,n or Pi(1,15,n)1307674368000Product of Sequence
Sigma1,15,n or Sigma(1,15,n)120Sum of Sequence( also called summation)
2^38Exponent( note this operator is left associative like MS Office)
5P360Permutaion Method to calculate all the permutaions
sincostan90 or sin(cos(tan(90)))0.017261434031253Multiple functions with or without parenthesis (both works)