J-CALC

Calculators for Webflow in seconds

<!-- J-CALC by JIMMYSWRLD -->
<script src="https://cdn.jsdelivr.net/gh/jimmyswrld/j-calc/v2.js"></script>

Example

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
£00

Docs

J-CALC was reimagined from the ground up to create a truly flexible and fast way to build calculators in Webflow. You now only need 1 attribute for J-CALC to work, but have plenty more options if you need something more complex!

Step 1:
Copy and paste the script into the "before </body> tag" in your page settings

Step 2:
Configure your calculator using attributes 👇
Output element
j-calc-output
your calculation
your calculation

This attribute goes on the element that you want to display the output of the calculation. Set the value of this attribute to the calculation formula.

Default Value
j-calc-default
default value
default value

This attribute sets a default value for the input element if there is no user input or it equals to 0. Useful for multiplication when you don't want your output to be 0 when an input is empty.

Submit Output
j-calc-submit-output
group name
group name

This attribute groups output elements to output buttons. When set, this output will only update when the output button with the same value is clicked.

Submit Button
j-calc-submit-btn
group name
group name

This attribute goes on a button element and specifies the group of outputs that should be updated when the button is clicked.

Round to Nearest
j-calc-round
rounding value
rounding value

This attribute rounds the output to the nearest specified value.

Checkbox Value
j-calc-checkbox
checkbox value
checkbox value

This attribute is required for checkbox elements since there is no checkbox value field. It specifies the value used when the checkbox is checked.

Decimal Places
j-calc-dp
number of decimal places
number of decimal places

This attribute specifies the number of decimal places to display in the output.

Examples

Pricing calculator

Output calculation: plan * headcount * charity
Plan 👉
00
👈 Headcount
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Calorie calculator

Output calculation: (10 * weight) + (6.25 * height) - (5 * age) + gender
Gender 👉

00/day

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.