Documentation
Build pricing, roi, lead magnet and many more types of calculators in seconds in Webflow.
Step #1: Installation
Copy the J-Calc script below and place before the </body> tag of your page.
<!-- J-CALC by JIMMYSWRLD -->
<script src="https://cdn.jsdelivr.net/npm/@jimmyswrld/j-calc@2.0.0"></script>
<script src="https://cdn.jsdelivr.net/npm/@jimmyswrld/j-calc@2.0.0"></script>
Step #2: Attributes
Configure your calculator using these attributes.
Input Element
I want this element to be the final result of the calculation
Attribute
Name
j-calc-input
Value
variable name
Description
Defines an input element and assigns it a variable name that can be referenced in calculations. This is the primary way to identify inputs for calculations.
Example:
j-calc-input="pricing"
Default Value
I want this element to have this value by default
Attribute
Name
j-calc-default
Value
number
Description
Sets a default value for the input when no value is provided. If the input is empty or invalid, this value will be used in calculations.
Example:
j-calc-default="100"
Checkbox Element
I want to use a checkbox element in my calculation
Attribute
Name
j-calc-checkbox
Value
number
Description
For checkbox inputs only. Specifies the numeric value to use when the checkbox is checked. When unchecked, the value will be 0.
Example:
j-calc-checkbox="50"
Output Element
I want this element to be the final result of the calculation
Attribute
Name
j-calc-output
Value
your calculation
Description
Define the mathematical formula to calculate the output. Use variable names from your inputs in the expression. Supports all operations from math.js.
Example:
j-calc-output="products * price * charity"
Decimal Place
I want my output to have a specific decimal place.
Attribute
Name
j-calc-dp
Value
number
Description
Controls the number of decimal places in the output. Specify the number of decimal places desired.
Example:
j-calc-dp="2"
Rounding Off
I want my output element to be rounded off.
Attribute
Name
j-calc-round
Value
number
Description
Rounds the output to the nearest specified value. Can handle both whole numbers (e.g., 10) and decimals (e.g., 0.1).
Example:
j-calc-round="10"
Animate Output
I want this element to be the final result of the calculation
Attribute
Name
j-calc-animate
Value
[duration],[ease-name] or true
Description
Enables animation of the output value. Using true or empty value applies the default animation (500ms, linear). Optional parameters: duration, ease name.
Example:
j-calc-animate="200ms, easeIn"
Ease Options: "linear", "easeOut", "easeIn", "easeInOut", "cubicEaseOut", "cubicEaseIn", "cubicEaseInOut", "elastic", "bounce"
Submit Button
I want this element to be the button that controls the output.
Attribute
Name
j-calc-submit-btn
Value
identifier string
Description
Marks an element as a submit button and links it to specific outputs. Clicking it updates all linked outputs. Must match the identifier in j-calc-submit-output.
Example:
j-calc-submit-btn="output"
Submit output
I want this element to be the output controlled by the button.
Attribute
Name
j-calc-submit-output
Value
identifier string
Description
Links an output to a submit button. The output updates only when the linked submit button is clicked. Must match the identifier in j-calc-submit-btn.
Example:
j-calc-submit-output="output"
Examples
See this solution working live, you can copy it into your Webflow project.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Copy and paste this directly into Webflow
Copy
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"13825b13-890f-fcaf-9108-90722305488b","type":"Block","tag":"div","classes":["4153de67-8d2d-cbc4-8628-842933d63238","cde81d54-60fe-7e2a-e4aa-bf9ee4ce19ba"],"children":["24984f42-e133-9a25-6e55-36528094b40f"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"24984f42-e133-9a25-6e55-36528094b40f","type":"FormWrapper","tag":"div","classes":[],"children":["fa4c328a-de73-7ac7-38eb-3e3df51aee7c","e9233658-2e69-8aa6-fab8-4faee639ed69","ba2025c6-fc5e-4439-357b-74acfc3475cc"],"data":{"search":{"exclude":true},"form":{"type":"wrapper"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"fa4c328a-de73-7ac7-38eb-3e3df51aee7c","type":"FormForm","tag":"form","classes":["4153de67-8d2d-cbc4-8628-842933d6323a"],"children":["294b8dc7-ef93-4c99-ef72-8ec29714f07e","2ab4666d-e2dd-5396-10c2-13ff79e941db"],"data":{"Source":{"tag":"Default form","val":{}},"form":{"type":"form","name":""},"attr":{"id":"wf-form--2","name":"wf-form--2","data-name":"","redirect":"","data-redirect":"","action":"","method":"get"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"294b8dc7-ef93-4c99-ef72-8ec29714f07e","type":"Block","tag":"div","classes":["4153de67-8d2d-cbc4-8628-842933d6322f"],"children":["f64ba9ab-a010-736f-735a-b8408b565d68","f6391412-30f1-0d56-124d-aeec4ec080d9"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"f64ba9ab-a010-736f-735a-b8408b565d68","type":"Block","tag":"div","classes":["4153de67-8d2d-cbc4-8628-842933d63227"],"children":[],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"f6391412-30f1-0d56-124d-aeec4ec080d9","type":"Block","tag":"div","classes":["4153de67-8d2d-cbc4-8628-842933d63227"],"children":["61a30bc2-19d8-1e2e-9b40-d58d0aa192ee","ff92f973-d5f4-f13f-2572-b2eae7b81832"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"61a30bc2-19d8-1e2e-9b40-d58d0aa192ee","type":"Block","tag":"div","classes":["4153de67-8d2d-cbc4-8628-842933d6322d"],"children":["6032bf83-9a7f-1f63-969f-18b3d3f0cf8d","7a4bae6f-07ff-853f-f9a4-5d72566aef22"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"style":{"base":{"main":{"noPseudo":{"gridRowStart":"span 1","gridRowEnd":"span 1","gridColumnStart":"span 2","gridColumnEnd":"span 2"}}}}}},{"_id":"6032bf83-9a7f-1f63-969f-18b3d3f0cf8d","type":"Block","tag":"div","classes":["f1e4bd39-3535-b868-fee2-e5a3b2a06c28"],"children":["0289a1d6-fe18-9001-4d0d-3cf41f32a35c","55ac60bc-b5d8-8bba-ba87-3f1aff2cbd16"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"0289a1d6-fe18-9001-4d0d-3cf41f32a35c","type":"Block","tag":"div","classes":["7a430290-1e11-fb0a-7a60-f535b0e8c7f3","8d48c265-faf0-0fef-aa7b-abc7f6efbc08"],"children":["a93e1e99-73cd-aa26-6bba-a7d455770170"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"a93e1e99-73cd-aa26-6bba-a7d455770170","text":true,"v":"Number of Products"},{"_id":"55ac60bc-b5d8-8bba-ba87-3f1aff2cbd16","type":"Block","tag":"div","classes":["7a430290-1e11-fb0a-7a60-f535b0e8c7f3","8d48c265-faf0-0fef-aa7b-abc7f6efbc08","eae3a6fa-cb15-fc14-b534-9a726d70a454"],"children":["078f7a33-44f5-f1a0-6721-b973c9af116b"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[{"name":"fs-rangeslider-element","value":"display-value"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"078f7a33-44f5-f1a0-6721-b973c9af116b","text":true,"v":"00"},{"_id":"7a4bae6f-07ff-853f-f9a4-5d72566aef22","type":"Block","tag":"div","classes":["4153de67-8d2d-cbc4-8628-842933d63229"],"children":["2f72f7ad-e642-8df5-d70e-2a46d86f0840","ba5772c3-f0fa-0602-150d-0b909a45ff04","3e99f098-1cd2-f491-b1f3-b6a4dcd30398"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[{"name":"fs-rangeslider-element","value":"wrapper"},{"name":"fs-rangeslider-min","value":"0"},{"name":"fs-rangeslider-max","value":"100"},{"name":"fs-rangeslider-formatdisplay","value":"true"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"2f72f7ad-e642-8df5-d70e-2a46d86f0840","type":"Block","tag":"div","classes":["7b1ed35d-dd58-34f8-cfe5-0fe1260b39e8"],"children":[],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"ba5772c3-f0fa-0602-150d-0b909a45ff04","type":"Block","tag":"div","classes":["4153de67-8d2d-cbc4-8628-842933d63232"],"children":["91616577-ad13-7e24-5b40-e838321b6349","5f6fd120-9b1c-be2d-ccbe-917008757484"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[{"name":"fs-rangeslider-element","value":"track"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"91616577-ad13-7e24-5b40-e838321b6349","type":"Block","tag":"div","classes":["4153de67-8d2d-cbc4-8628-842933d6322c"],"children":["0f13b596-570f-7314-9840-68db717e4d59"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[{"name":"fs-rangeslider-element","value":"handle"},{"name":"fs-rangeslider-start","value":"50"},{"name":"aria-label","value":"drag_slider"},{"name":"j-calc-input","value":"products"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"0f13b596-570f-7314-9840-68db717e4d59","type":"Block","tag":"div","classes":["4153de67-8d2d-cbc4-8628-842933d6323e"],"children":["93f56248-5132-efb4-630c-43867677d12c"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"93f56248-5132-efb4-630c-43867677d12c","type":"Span","tag":"span","classes":["4153de67-8d2d-cbc4-8628-842933d63235"],"children":["8e33e124-730b-80ee-d1d9-1924ba30a2a8"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[{"name":"fs-rangeslider-element","value":"display-value"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"8e33e124-730b-80ee-d1d9-1924ba30a2a8","text":true,"v":"00"},{"_id":"5f6fd120-9b1c-be2d-ccbe-917008757484","type":"Block","tag":"div","classes":["4153de67-8d2d-cbc4-8628-842933d6322a"],"children":[],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[{"name":"fs-rangeslider-element","value":"fill"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"3e99f098-1cd2-f491-b1f3-b6a4dcd30398","type":"FormTextInput","tag":"input","classes":["4153de67-8d2d-cbc4-8628-842933d63239"],"children":[],"data":{"form":{"name":"Product 2","type":"input","passwordPage":false},"attr":{"id":"product-2","name":"product-2","maxlength":256,"data-name":"Product 2","placeholder":"From","disabled":false,"type":"number","required":false,"autofocus":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[{"name":"fs-cmsfilter-field","value":"price"},{"name":"fs-cmsfilter-range","value":"from"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"ff92f973-d5f4-f13f-2572-b2eae7b81832","type":"Block","tag":"div","classes":["4153de67-8d2d-cbc4-8628-842933d6323b"],"children":["8d70dc8c-0cfe-f3a7-35ee-0d5bad48647b","692d3913-74a3-a39b-1adb-25ffb66d6eb4","183981be-676a-ddd6-ca19-a451ce0afef9"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"style":{"base":{"small":{"noPseudo":{"gridRowStart":"span 1","gridRowEnd":"span 1","gridColumnStart":"span 2","gridColumnEnd":"span 2"}}}}}},{"_id":"8d70dc8c-0cfe-f3a7-35ee-0d5bad48647b","type":"FormRadioWrapper","tag":"div","classes":["4153de67-8d2d-cbc4-8628-842933d63236"],"children":["838eb1db-9bc8-742f-7dc5-e12a74f2be02","dc54f999-6b9b-4a30-acec-781961507745"],"data":{"form":{"type":"radio"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[{"name":"j-calc-input","value":"price"},{"name":"j-calc-checkbox","value":"4"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"838eb1db-9bc8-742f-7dc5-e12a74f2be02","type":"FormRadioInput","tag":"input","classes":["4153de67-8d2d-cbc4-8628-842933d6323c"],"children":[],"data":{"form":{"type":"radio-input","name":"price"},"inputType":"custom","attr":{"type":"radio","name":"price","id":"radio","value":"4","data-name":"price","required":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"dc54f999-6b9b-4a30-acec-781961507745","type":"FormInlineLabel","tag":"label","classes":["4153de67-8d2d-cbc4-8628-842933d63230"],"children":["26201085-fc3e-ff9a-5424-30eaec549a93"],"data":{"form":{"type":"radio-label"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[{"name":"fs-cmsfilter-active","value":"is-active"},{"name":"fs-cmsfilter-field","value":"category"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"26201085-fc3e-ff9a-5424-30eaec549a93","text":true,"v":"Basic ($4)"},{"_id":"692d3913-74a3-a39b-1adb-25ffb66d6eb4","type":"FormRadioWrapper","tag":"div","classes":["4153de67-8d2d-cbc4-8628-842933d63236"],"children":["856df1c5-d5d0-0136-03ae-1de93fea588b","3dd10a6c-3e40-532f-4033-214c742bbaa3"],"data":{"form":{"type":"radio"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[{"name":"j-calc-input","value":"price"},{"name":"j-calc-checkbox","value":"7"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"856df1c5-d5d0-0136-03ae-1de93fea588b","type":"FormRadioInput","tag":"input","classes":["4153de67-8d2d-cbc4-8628-842933d6323c"],"children":[],"data":{"form":{"type":"radio-input","name":"price"},"inputType":"custom","attr":{"type":"radio","name":"price","id":"radio-2","value":"7","data-name":"price","required":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"3dd10a6c-3e40-532f-4033-214c742bbaa3","type":"FormInlineLabel","tag":"label","classes":["4153de67-8d2d-cbc4-8628-842933d63230"],"children":["0dd9153f-be74-2ffe-9693-39c2bfb13479"],"data":{"form":{"type":"radio-label"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[{"name":"fs-cmsfilter-active","value":"is-active"},{"name":"fs-cmsfilter-field","value":"category"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"0dd9153f-be74-2ffe-9693-39c2bfb13479","text":true,"v":"Premium ($7)"},{"_id":"183981be-676a-ddd6-ca19-a451ce0afef9","type":"FormCheckboxWrapper","tag":"div","classes":["4153de67-8d2d-cbc4-8628-842933d6322e"],"children":["40e3df5c-5ecf-e09b-b81e-2e9815066a99","37d067b9-b36e-a936-5a5f-242085b33657"],"data":{"form":{"type":"checkbox"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[{"name":"j-calc-checkbox","value":"0.2"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"40e3df5c-5ecf-e09b-b81e-2e9815066a99","type":"FormCheckboxInput","tag":"input","classes":["4153de67-8d2d-cbc4-8628-842933d63237"],"children":[],"data":{"form":{"type":"checkbox-input","name":"Charity 2"},"inputType":"custom","attr":{"type":"checkbox","name":"charity-2","id":"charity-2","data-name":"Charity 2","required":false,"checked":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[{"name":"j-calc-checkbox","value":"0.8"},{"name":"j-calc-default","value":"1"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"37d067b9-b36e-a936-5a5f-242085b33657","type":"FormInlineLabel","tag":"label","classes":["4153de67-8d2d-cbc4-8628-842933d63233"],"children":["30c1d390-d2cf-b4a1-f435-ad23c20c5664"],"data":{"form":{"type":"checkbox-label"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[{"name":"fs-cmsfilter-active","value":"is-active"},{"name":"fs-cmsfilter-field","value":"category"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"30c1d390-d2cf-b4a1-f435-ad23c20c5664","text":true,"v":"Charity (Add 20%)"},{"_id":"2ab4666d-e2dd-5396-10c2-13ff79e941db","type":"Block","tag":"div","classes":["4153de67-8d2d-cbc4-8628-842933d63234"],"children":["f8d3cafb-9d60-40e8-81db-c48e735b9ac9","a6ee7013-2364-8156-b6c3-ec99f6f96ee5"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"f8d3cafb-9d60-40e8-81db-c48e735b9ac9","type":"Link","tag":"a","classes":["7a430290-1e11-fb0a-7a60-f535b0e8c7ab"],"children":["2e459ee0-baa8-72ad-6dad-d94145ddde67"],"data":{"button":true,"block":"","link":{"mode":"external","url":"#"},"eventIds":[],"attr":{"id":""},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[{"name":"j-calc-submit-btn","value":"pricing"}],"search":{"exclude":true},"visibility":{"conditions":[]}}},{"_id":"2e459ee0-baa8-72ad-6dad-d94145ddde67","text":true,"v":"Calculate price"},{"_id":"a6ee7013-2364-8156-b6c3-ec99f6f96ee5","type":"Block","tag":"div","classes":[],"children":["b85f5f5d-6e0b-d717-93c4-2b767647097e"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"b85f5f5d-6e0b-d717-93c4-2b767647097e","type":"Heading","tag":"h4","classes":["284a6402-45bf-7264-f988-4e9b94a2d18a"],"children":["e59d8462-e167-cc29-41fe-2b492f61bf11","f9552a75-29f0-3a78-816d-fe800b8f59fa"],"data":{"tag":"h4","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"e59d8462-e167-cc29-41fe-2b492f61bf11","text":true,"v":"$"},{"_id":"f9552a75-29f0-3a78-816d-fe800b8f59fa","type":"Span","tag":"span","classes":[],"children":["51266fd9-55f3-bc2c-ef4a-fd30951e7509"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[{"name":"j-calc-output","value":"product * price * charity"},{"name":"j-calc-submit-output","value":"pricing"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"51266fd9-55f3-bc2c-ef4a-fd30951e7509","text":true,"v":"00.00"},{"_id":"e9233658-2e69-8aa6-fab8-4faee639ed69","type":"FormSuccessMessage","tag":"div","classes":[],"children":["79412ec5-6440-11d2-4e90-153e8a9a71c8"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-done"}}},{"_id":"79412ec5-6440-11d2-4e90-153e8a9a71c8","type":"Block","tag":"div","classes":[],"children":["8231a1fc-7b57-93db-5bdf-1c4564e5f16f"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"8231a1fc-7b57-93db-5bdf-1c4564e5f16f","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"ba2025c6-fc5e-4439-357b-74acfc3475cc","type":"FormErrorMessage","tag":"div","classes":[],"children":["a6fce890-e9fd-0887-79be-005b296d9a31"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-fail"}}},{"_id":"a6fce890-e9fd-0887-79be-005b296d9a31","type":"Block","tag":"div","classes":[],"children":["cc93746d-50da-9dbc-dd60-bbefd36a1f55"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"cc93746d-50da-9dbc-dd60-bbefd36a1f55","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"7a430290-1e11-fb0a-7a60-f535b0e8c7f3","fake":false,"type":"class","name":"text-size-large","namespace":"","comb":"","styleLess":"font-size: 1.25rem;","variants":{"small":{"styleLess":"font-size: 1.125rem;"}},"children":["14642462-50b6-98f9-47f2-62289d78bdb6","8d48c265-faf0-0fef-aa7b-abc7f6efbc08","8aa087d0-cae7-6333-cfb1-35bc87cbb30a","125a5ae3-ab65-9cde-4787-c5cecfd399c9"],"origin":null,"selector":null},{"_id":"4153de67-8d2d-cbc4-8628-842933d63233","fake":false,"type":"class","name":"fs-checkbox_label-3","namespace":"","comb":"","styleLess":"margin-bottom: 0rem; font-weight: 500;","variants":{},"children":[],"origin":null,"selector":null},{"_id":"cde81d54-60fe-7e2a-e4aa-bf9ee4ce19ba","fake":false,"type":"class","name":"is-template","namespace":"","comb":"&","styleLess":"padding-right: 2rem; padding-left: 2rem; color: #1e1e1e;","variants":{"medium":{"styleLess":"padding-right: 2rem;"},"tiny":{"styleLess":"width: auto; margin-left: 0rem; padding-right: 0rem; justify-content: flex-start;"}},"children":[],"createdBy":"63261c9512d9db0909aac6be","origin":null,"selector":null},{"_id":"4153de67-8d2d-cbc4-8628-842933d63227","fake":false,"type":"class","name":"grid-col-3","namespace":"","comb":"","styleLess":"display: grid; width: 100%; grid-auto-columns: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto;","variants":{"small":{"styleLess":"grid-template-columns: 1fr;"}},"children":[],"createdBy":"6015512dc56f38410d3706ad","origin":null,"selector":null},{"_id":"4153de67-8d2d-cbc4-8628-842933d63232","fake":false,"type":"class","name":"fs-rangeslider_track-1","namespace":"","comb":"","styleLess":"position: relative; width: 100%; height: 0.25rem; margin-right: auto; margin-left: auto; border-top-left-radius: 999rem; border-top-right-radius: 999rem; border-bottom-left-radius: 999rem; border-bottom-right-radius: 999rem; background-color: hsla(33.33333333333332, 22.50%, 84.31%, 0.50);","variants":{},"children":[],"origin":null,"selector":null},{"_id":"4153de67-8d2d-cbc4-8628-842933d6322c","fake":false,"type":"class","name":"fs-rangeslider_handle-1","namespace":"","comb":"","styleLess":"position: absolute; top: 50%; z-index: 1; width: 1.25rem; height: 1.25rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto; border-top-style: solid; border-top-width: 3px; border-top-color: #ce0b25; border-right-style: solid; border-right-width: 3px; border-right-color: #ce0b25; border-bottom-style: solid; border-bottom-width: 3px; border-bottom-color: #ce0b25; border-left-style: solid; border-left-width: 3px; border-left-color: #ce0b25; border-top-left-radius: 100rem; border-top-right-radius: 100rem; border-bottom-left-radius: 100rem; border-bottom-right-radius: 100rem; background-color: #faf5ef; box-shadow: 1px 1px 10px 0 hsla(0, 0.00%, 0.00%, 0.10); transform: translate(-50%, -50%); cursor: grab;","variants":{"main_focus":{"styleLess":"border-top-color: #ce0b25; border-right-color: #ce0b25; border-bottom-color: #ce0b25; border-left-color: #ce0b25; background-color: #ce0b25;"},"medium":{"styleLess":"width: 2rem; height: 2rem;"},"main_focus-visible":{"styleLess":"outline-color: #e0d8ce; outline-offset: 4px; outline-style: solid; outline-width: 2px;"}},"children":[],"origin":null,"selector":null},{"_id":"4153de67-8d2d-cbc4-8628-842933d63234","fake":false,"type":"class","name":"example_cta-wrapper","namespace":"","comb":"","styleLess":"display: flex; padding-right: 1rem; justify-content: flex-start; align-items: flex-end; align-self: stretch; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; grid-column-gap: 1rem; grid-row-gap: 1rem;","variants":{"small":{"styleLess":"justify-content: space-between; align-items: center;"}},"children":[],"createdBy":"6015512dc56f38410d3706ad","origin":null,"selector":null},{"_id":"7a430290-1e11-fb0a-7a60-f535b0e8c7ab","fake":false,"type":"class","name":"button","namespace":"","comb":"","styleLess":"display: flex; padding-top: 0.75rem; padding-right: 1.5rem; padding-bottom: 0.75rem; padding-left: 1.5rem; justify-content: flex-start; align-items: center; grid-column-gap: 0.5rem; grid-row-gap: 0.5rem; border-top-style: solid; border-top-width: 1px; border-top-color: black; border-right-style: solid; border-right-width: 1px; border-right-color: black; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: black; border-left-style: solid; border-left-width: 1px; border-left-color: black; background-color: black; font-family: Cabinetgrotesk; color: white; font-weight: 700; text-align: center; text-decoration: none;","variants":{},"children":["7a430290-1e11-fb0a-7a60-f535b0e8c7fb","7a430290-1e11-fb0a-7a60-f535b0e8c7fc","7a430290-1e11-fb0a-7a60-f535b0e8c7fe","7a430290-1e11-fb0a-7a60-f535b0e8c7ff","7a430290-1e11-fb0a-7a60-f535b0e8c800","0061b87e-b902-763c-f287-5e0ff05eabbd","55532a9f-577c-f6bf-6f61-bb57520e0f7c","5e39fe19-484a-a36b-148e-8d0e586df536","d9ef8474-0ed2-0ac6-0495-f2936194fd34","8da37f62-67d2-22cb-7f18-e48e1a7b145e","88035ee7-4703-50a2-892b-2427c2cc919d","89b1175e-a607-08f3-9a75-c9594f0e0fa5"],"origin":null,"selector":null},{"_id":"8d48c265-faf0-0fef-aa7b-abc7f6efbc08","fake":false,"type":"class","name":"text-weight-semibold","namespace":"","comb":"&","styleLess":"","variants":{},"children":["eae3a6fa-cb15-fc14-b534-9a726d70a454"],"createdBy":"63261c9512d9db0909aac6be","origin":null,"selector":null},{"_id":"4153de67-8d2d-cbc4-8628-842933d63237","fake":false,"type":"class","name":"fs-checkbox_button-3","namespace":"","comb":"","styleLess":"width: 1.25rem; height: 1.25rem; margin-top: 0rem; margin-right: 0.75rem; margin-left: 0rem; border-top-width: 2px; border-top-color: hsla(213.33333333333331, 0.00%, 0.00%, 1.00); border-right-width: 2px; border-right-color: hsla(213.33333333333331, 0.00%, 0.00%, 1.00); border-bottom-width: 2px; border-bottom-color: hsla(213.33333333333331, 0.00%, 0.00%, 1.00); border-left-width: 2px; border-left-color: hsla(213.33333333333331, 0.00%, 0.00%, 1.00); box-shadow: 1px 1px 3px 0 transparent;","variants":{"main_redirected-checked":{"styleLess":"border-top-color: #ffc4cc; border-right-color: #ffc4cc; border-bottom-color: #ffc4cc; border-left-color: #ffc4cc; background-color: hsla(351.86440677966107, 100.00%, 88.43%, 0.50); background-size: 0.75rem;"},"main_redirected-focus":{"styleLess":"box-shadow: none /* 0 0 3px 1px rgba(56, 152, 236, 1) */;"},"main_redirected-focus-visible":{"styleLess":"box-shadow: none /* 0 0 3px 1px rgba(56, 152, 236, 1) */; outline-color: hsla(0, 0.00%, 60.67%, 1.00); outline-offset: 4px; outline-style: solid; outline-width: 2px;"}},"children":[],"origin":null,"selector":null},{"_id":"4153de67-8d2d-cbc4-8628-842933d63230","fake":false,"type":"class","name":"fs-radio_label-3","namespace":"","comb":"","styleLess":"margin-bottom: 0rem; font-weight: 500;","variants":{},"children":[],"origin":null,"selector":null},{"_id":"4153de67-8d2d-cbc4-8628-842933d6323c","fake":false,"type":"class","name":"fs-radio_button-3","namespace":"","comb":"","styleLess":"width: 1.25rem; height: 1.25rem; margin-top: 0rem; margin-right: 0.75rem; margin-left: 0rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto; border-top-width: 2px; border-top-color: hsla(213.33333333333331, 0.00%, 0.00%, 1.00); border-right-width: 2px; border-right-color: hsla(213.33333333333331, 0.00%, 0.00%, 1.00); border-bottom-width: 2px; border-bottom-color: hsla(213.33333333333331, 0.00%, 0.00%, 1.00); border-left-width: 2px; border-left-color: hsla(213.33333333333331, 0.00%, 0.00%, 1.00); box-shadow: 1px 1px 3px 0 transparent;","variants":{"main_redirected-checked":{"styleLess":"border-top-color: hsla(352, 100.00%, 88.44%, 1.00); border-right-color: hsla(352, 100.00%, 88.44%, 1.00); border-bottom-color: hsla(352, 100.00%, 88.44%, 1.00); border-left-color: hsla(352, 100.00%, 88.44%, 1.00); background-color: hsla(351.86440677966107, 100.00%, 88.43%, 0.50);"},"main_redirected-focus":{"styleLess":"box-shadow: none /* 0 0 3px 1px rgba(56, 152, 236, 1) */;"},"main_redirected-focus-visible":{"styleLess":"box-shadow: none /* 0 0 3px 1px rgba(56, 152, 236, 1) */; outline-color: hsla(0, 0.00%, 60.67%, 1.00); outline-offset: 4px; outline-style: solid; outline-width: 2px;"}},"children":[],"origin":null,"selector":null},{"_id":"284a6402-45bf-7264-f988-4e9b94a2d18a","fake":false,"type":"class","name":"text-color-red","namespace":"","comb":"","styleLess":"color: #ce0b25;","variants":{},"children":[],"createdBy":"5f337715bd4fdb9bf8af8611","origin":null,"selector":null},{"_id":"4153de67-8d2d-cbc4-8628-842933d6322a","fake":false,"type":"class","name":"fs-rangeslider_fill-1","namespace":"","comb":"","styleLess":"position: absolute; width: 20%; height: 100%; border-top-left-radius: 999px; border-top-right-radius: 999px; border-bottom-left-radius: 999px; border-bottom-right-radius: 999px; background-color: #ce0b25;","variants":{},"children":[],"origin":null,"selector":null},{"_id":"4153de67-8d2d-cbc4-8628-842933d6322d","fake":false,"type":"class","name":"slider_wrapper","namespace":"","comb":"","styleLess":"padding-top: 1.5rem; padding-right: 1.5rem; padding-bottom: 1.5rem; padding-left: 1.5rem; align-self: stretch; flex-grow: 0; flex-shrink: 1; flex-basis: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #1e1e1e; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #1e1e1e; border-left-style: solid; border-left-width: 2px; border-left-color: #1e1e1e;","variants":{"tiny":{"styleLess":"width: 100%;"},"small":{"styleLess":"border-right-style: solid; border-right-width: 2px; border-right-color: #1e1e1e; border-bottom-width: 0px;"}},"children":[],"createdBy":"6015512dc56f38410d3706ad","origin":null,"selector":null},{"_id":"7b1ed35d-dd58-34f8-cfe5-0fe1260b39e8","fake":false,"type":"class","name":"padding-xxsmall","namespace":"","comb":"","styleLess":"padding-top: 0.5rem; padding-right: 0.5rem; padding-bottom: 0.5rem; padding-left: 0.5rem;","variants":{},"children":[],"origin":null,"selector":null},{"_id":"f1e4bd39-3535-b868-fee2-e5a3b2a06c28","fake":false,"type":"class","name":"pricing-calc","namespace":"","comb":"","styleLess":"display: flex; width: 100%; justify-content: space-between;","variants":{},"children":[],"createdBy":"63261c9512d9db0909aac6be","origin":null,"selector":null},{"_id":"4153de67-8d2d-cbc4-8628-842933d6323b","fake":false,"type":"class","name":"example_col-two-wrapper","namespace":"","comb":"","styleLess":"display: flex; flex-direction: column; align-self: stretch; flex-grow: 1; flex-shrink: 1; flex-basis: 0%;","variants":{},"children":[],"createdBy":"6015512dc56f38410d3706ad","origin":null,"selector":null},{"_id":"4153de67-8d2d-cbc4-8628-842933d6323e","fake":false,"type":"class","name":"fs-rangeslider_handle-text-1","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: auto; right: auto; bottom: 0%; margin-bottom: -2.25rem; font-size: 1.25rem; text-align: center;","variants":{},"children":[],"origin":null,"selector":null},{"_id":"4153de67-8d2d-cbc4-8628-842933d63235","fake":false,"type":"class","name":"fs-rangeslider_handle-value-1","namespace":"","comb":"","styleLess":"margin-left: -8px; font-weight: 700;","variants":{},"children":[],"origin":null,"selector":null},{"_id":"4153de67-8d2d-cbc4-8628-842933d63239","fake":false,"type":"class","name":"fs-rangeslider_input-1","namespace":"","comb":"","styleLess":"display: none;","variants":{},"children":[],"origin":null,"selector":null},{"_id":"4153de67-8d2d-cbc4-8628-842933d6322e","fake":false,"type":"class","name":"fs-checkbox_field-3","namespace":"","comb":"","styleLess":"position: relative; display: flex; height: 50%; margin-bottom: 0rem; padding-top: 1rem; padding-right: 1.5rem; padding-bottom: 1rem; padding-left: 1.25rem; flex-direction: row; justify-content: center; align-items: center; flex-grow: 0; flex-shrink: 1; flex-basis: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #1e1e1e; border-right-style: solid; border-right-width: 2px; border-right-color: #1e1e1e; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #1e1e1e; border-left-style: solid; border-left-width: 2px; border-left-color: #1e1e1e; background-color: transparent; color: #1e1e1e; font-weight: 500; cursor: pointer;","variants":{"main_hover":{"styleLess":"border-top-color: hsla(0, 0.00%, 41.33%, 1.00); border-right-color: hsla(0, 0.00%, 41.33%, 1.00); border-bottom-color: hsla(0, 0.00%, 41.33%, 1.00); border-left-color: hsla(0, 0.00%, 41.33%, 1.00); color: hsla(0, 0.00%, 41.33%, 1.00);"}},"children":[],"origin":null,"selector":null},{"_id":"4153de67-8d2d-cbc4-8628-842933d63236","fake":false,"type":"class","name":"fs-radio_field-3","namespace":"","comb":"","styleLess":"position: relative; display: flex; margin-bottom: 0rem; padding-top: 1rem; padding-right: 1.5rem; padding-bottom: 1rem; padding-left: 1.25rem; flex-direction: row; justify-content: center; align-items: center; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; border-top-style: solid; border-top-width: 2px; border-top-color: #1e1e1e; border-right-style: solid; border-right-width: 2px; border-right-color: #1e1e1e; border-left-style: solid; border-left-width: 2px; border-left-color: #1e1e1e; background-color: #faf5ef; color: hsla(213.33333333333331, 0.00%, 0.00%, 1.00); font-weight: 500; cursor: pointer;","variants":{"main_hover":{"styleLess":"border-top-color: hsla(0, 0.00%, 41.33%, 1.00); border-right-color: hsla(0, 0.00%, 41.33%, 1.00); border-bottom-color: hsla(0, 0.00%, 41.33%, 1.00); border-left-color: hsla(0, 0.00%, 41.33%, 1.00); color: hsla(0, 0.00%, 41.33%, 1.00);"},"main_focus":{"styleLess":"background-color: #ce0b25;"},"tiny":{"styleLess":"justify-content: flex-start;"}},"children":["8bd5daa9-9e08-2f70-c390-9ce00ca49dd2"],"origin":null,"selector":null},{"_id":"4153de67-8d2d-cbc4-8628-842933d6322f","fake":false,"type":"class","name":"example_row-wrapper","namespace":"","comb":"","styleLess":"width: 100%; align-self: stretch;","variants":{},"children":[],"createdBy":"6015512dc56f38410d3706ad","origin":null,"selector":null},{"_id":"4153de67-8d2d-cbc4-8628-842933d6323a","fake":false,"type":"class","name":"form_form 2","namespace":"","comb":"","styleLess":"display: flex; flex-direction: column; align-items: flex-start; grid-column-gap: 0rem; grid-row-gap: 0rem;","variants":{},"children":[],"origin":null,"selector":null},{"_id":"4153de67-8d2d-cbc4-8628-842933d63229","fake":false,"type":"class","name":"fs-rangeslider_wrapper-1","namespace":"","comb":"","styleLess":"position: relative; display: block; width: 100%; margin-bottom: 2rem; padding-top: 1rem; padding-right: 0.5rem; padding-bottom: 1rem; padding-left: 0.5rem; align-items: center;","variants":{},"children":[],"origin":null,"selector":null},{"_id":"eae3a6fa-cb15-fc14-b534-9a726d70a454","fake":false,"type":"class","name":"hide","namespace":"","comb":"&","styleLess":"","variants":{},"children":[],"createdBy":"63261c9512d9db0909aac6be","origin":null,"selector":null},{"_id":"4153de67-8d2d-cbc4-8628-842933d63238","fake":false,"type":"class","name":"example-1_wrapper","namespace":"","comb":"","styleLess":"max-width: 51.25rem; min-width: 100%;","variants":{"small":{"styleLess":"flex-direction: column; flex-wrap: nowrap;"}},"children":["cde81d54-60fe-7e2a-e4aa-bf9ee4ce19ba"],"createdBy":"6015512dc56f38410d3706ad","origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0}}
Hey there 👋
I’m Jimmy Elphick, founder of Jimmyswrld, Webflow development & growth marketing partner to ambitious startups that need to scale fast.
Calculators are a great way to engage users and start their journey down your funnel. I built J-CAL to enable more people to build calculators in Webflow + it was fun.
Have a question? Found a bug? Got an idea? Find me on: Twitter or Linkedin