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 *

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.

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];

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.

С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.

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

Installation


  • Download the extension via the link provided in the email or on your dashboard on CalcHub.xyz.
  • Install the extension.
  • Activate the extension.
  • Go to the plugin page “Extension.”
  • Enter the license key.
  • Click the “Save” button.
  • Click the “Activate License” button.

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]