Documentation
Documentation for free WordPress plugin Calculator Builder
Get Started
Installation
- Installation option 1: Find and install this plugin in the Plugins -> Add a new section of your wp-admin.
- Installation option 2: Download the zip file, then upload the plugin via the wp-admin in the Plugins -> Add a new section. Alternatively, unzip the archive and upload the folder to the plugins directory /wp-content/plugins/ via FTP.
- Click ‘Activate’ when you have installed the plugin via the dashboard or click ‘Activate’ in the Plugins list.
- Go to the Calculator Builder (CalcHub) section that will appear in your main menu on the left. Click ‘Add new’ to create your first countdown. Build your calculator.
- Click ‘Save.’
- Copy and paste the shortcode where you want the calculator to appear.
Start video
Field Types
Fields
- Number – a control that allows entering a numeric value. It displays a spinner and provides default validation when supported. Some devices with dynamic keypads display a numeric keypad.
- Select – an element that represents a control providing a menu of options.
- Radio – a radio button that allows selecting a single value out of multiple choices with the same name value.
- Checkbox – a check box that allows selecting or deselecting a single value.
- Number & Select – inserts two fields – Number and Select.
- Buttons – sets the buttons for calculating and resetting data in the calculator form.
- Result – sets the field with the result. This field is read-only.
For the Number field, you can set the following attributes:
- max – maximum value (numeric types);
- min – minimum value (numeric types);
- step – incremental values that are valid (numeric types);
- value – the initial value of the control;
- addon – you can specify the units to be entered in the field, for example, $ or px;
- title – the name of the field. You can leave it empty;
- required – a value is required for calculation.
For the Select, Radio, and Checkbox fields, you can set the following attributes:
- Title – the name of the field. You can leave it empty.
- Options – value and option/label for the field. This attribute is filled in as name = values on a new line. Also, you can select the option by *. For, Example: Name Option = 73 *
![](https://cdn.statically.io/img/calchub.xyz/wp-content/uploads/2022/12/screenshot-select-opt.png)
Field Button:
- Title: the name of the field. You can leave it empty.
- Button Calculate: text for the button that calculates the form.
- Button Reset: text for the button that resets the form.
Field Result:
- Title: the name of the field. You can leave it empty.
- Addon: specify the units for the field. For example, $ or px. You can leave it empty.
![](https://cdn.statically.io/img/calchub.xyz/wp-content/uploads/2021/07/Field-type.gif)
Equation/Formula:
In order to calculate the result, you must use the variables provided in the “Formula” field:
- “Variable x[]” is used for the fields that are involved in the calculation.
- “Variable y[]” is the variable that displays the final result.
y[1] = x[1] + x[2];
y[1] = x[1] - x[2];
y[1] = x[1] * x[2];
y[1] = x[1] / x[2];
![](https://cdn.statically.io/img/calchub.xyz/wp-content/uploads/2021/07/Formula.gif)
Formula with additional variables
You can use the additional variables in the formula field to facilitate writing the formula and displaying the result. For Example, Formula Monthly payment for Loan:
let r = x[2] / 1200;
let A = x[1];
let N = x[3];
let result = ( r * A ) / ( 1 - Math.pow((1+r), -N));
y[1] = roundVal(result, 2);
roundVal(val, decimals) – function for rounding a number. The first parameter (val) is the number to be rounded, and the second parameter (decimals) is the number of numbers after the decimal point.
![](https://cdn.statically.io/img/calchub.xyz/wp-content/uploads/2021/07/Formula_2.gif)
Сonditional formula
You can use complex structures to calculate the results. You have the ability to use the following comparison operators
- < less
- > more
- == equal
For Example:
if( x[1] < 100 ) {
y[1] = x[2] * 2;
} else if ( x[1] < 200 ) {
y[1] = x[2] * 3;
} else {
y[1] = x[2] * 4;
}
Variables and Functions
The Calculator Builder plugin has variables that you can use to create calculators. These variables include:
Variables:
- x[]: The input value of the field required for the calculation.
- y[]: The numeric or text result, i.e. the final result of the calculations.
- fieldset[]: An element with a set of fields. It includes the title and calculation field, buttons, and results. It is possible to hide, change, show, etc.
- label[]: Title for the field. You can manipulate the title by hiding, changing, deleting, etc.
- field[]: Field element: input, select, textarea. You can manipulate the field by hiding, blocking, etc.
![](https://cdn.statically.io/img/calchub.xyz/wp-content/uploads/2023/01/Variables.jpg)
Functions
For numeric variables x[] and y[], you can use the rounding function .round(). The .round(n) function takes one variable, where n is the number of decimal places. For example:
y[1] = (3.14159265359).round(2);
The output result will be 3.14.
(3.14159265359).round(); // result 3.14
(3.14159265359).round(0); // result 3
(3.14159265359).round(5); // result 3.14159
Variables fieldset[], label[], and field[] are essentially elements. You can apply the same JS functions to them as to elements. There are several built-in features for convenience, such as:
- .hide(): This distorts the element and adds the ‘is-hidden’ class to the element. It is used for fieldset[] or field[].
- .show(): This shows a hidden element and removes the ‘is-hidden’ class from an element. It is used for fieldset[] or field[].
- .addClass(”): This adds the specified class to the element (fieldset[], field[], label[]). For example:
fieldset[2].addClass('extra-class');
; - .removeClass(”): This removes the specified class from the element (fieldset[], field[], label[]). For example:
fieldset[2].removeClass('extra-class');
; - .addAttr(‘name’, ‘value’): This adds attributes to the element. It can be used to turn off fields. For example:
field[3].addAttr('disabled', 'disabled');
; - .removeAttr(‘name’): This removes an attribute from an element. For example:
field[3].removeAttr('disabled');
; - .text(‘text’): This is used to change the title text. For example:
label[2].text('Another Label');
;
You can see an example of the calculator with functions .hide() and .show() at the following link.
Extensions
CalcHub WPCF7
To use the plugin Contact Form 7 with Calculator builder and send the result of the calculation to the email, you need to use the textarea field with the class wpcf7-calculator-result.
Example:
[textarea textarea-947 class:wpcf7-calculator-result]
![](https://cdn.statically.io/img/calchub.xyz/wp-content/uploads/2023/01/CleanShot-2023-01-23-at-13.49.43.png)