Benefits calculator - need code help, please!

Hi everyone, I need some help implementing some custom code please! I just can’t work it out.

I would like this calculator project:
Webflow: https://webflow.com/website/Kalkulyator-s-jQuery-Ui-Slider
Jquery, Jfiddle: Edit fiddle - JSFiddle - Code Playground

On my site. I’m then going to work out how to change the logic so the calculator works out what i want it too (hopefully.)

But, I can’t work out how to do it. I tried copying it into my site and then adding code to the head or body, but nothing seems to work.

Also when i look at the project link above I cant see where he has embedded the Jfiddle code?

Heres my read only link: https://preview.webflow.com/preview/appts-website?utm_medium=preview_link&utm_source=dashboard&utm_content=appts-website&preview=21bc248146965857055296d20e39f55d&mode=preview

The page is called ‘benefits calculator’.

Hello @bgoodey,

The code might be under project settings. This other cloneable project is exactly like the one from your link but has all the code on the page settings https://webflow.com/website/calculator-site. I hope this helps.

1 Like

Great, you’ve helped me jump to a step i was stuck at all day! Going to dive into it and see how I do manipulating the logic.

Hi @Pablo_Cortes, do you have any tips on editing this so I can keep the design but change the calculation?

I need 4 inputs: number, scale 0-3, scale 0-3, scale 0-3.
And outputs based on that 2 number outputs based on those inputs.

I’m not sure how to define the variables so that they match the inputs. Which variables match to which slider and output?

Thanks in advance, i can see it’s a big ask so dont worry if you want to say ‘no’!

Hello @bgoodey,

I don’t have any more room on my dashboard to clone the project and guide you through the things you want to alter in detail, but what you have to do is to check on the code section for the id given to the class for each element that you want to change for example ui-widget-content has an id of client -slider
Screen Shot 2020-01-28 at 3.19.02 PM
on the code part look for that id on the javascript
Screen Shot 2020-01-28 at 3.19.37 PM
then change the values there. That is if the function is the same and would make sense with the new values. I hope this helps.

1 Like

That’s helped a lot, I’ve nearly worked it out. Would you happen to know how I could ‘submit results’? In a way that would send an email with their inputs in to myself?

Thank you again!

hello @bgoodey,
I’m glad you got it to work, yes, the calculator is on a form block


just add a form submit button (not a regular button) to the output section
Screen Shot 2020-01-29 at 4.45.39 PM
Im guessing, I can’t really test it, it would work as in a regular form, the results will go to the email set under forms on the project settings. I hope this helps.

@Pablo_Cortes
Unfortunately, adding a submit button does nothing at all. On the live site ‘submit’ doesn’t create an action: https://preview.webflow.com/preview/appts-website?utm_medium=preview_link&utm_source=dashboard&utm_content=appts-website&preview=21bc248146965857055296d20e39f55d&mode=preview

hello @bgoodey,

I thought since the calculator was made on a form block that the custom code included a way to submit the results. Maybe you can ask the guy you cloned the project from if that is what he intended and if there is a way to do it. Another thing that you can do is to just create another calculator at https://www.calconic.com/ and embed it on your site, I think that would give you more flexibility on the things that you want to achieve, and you can style it to fit your brand. Let me know how it goes.

Thanks for your help @Pablo_Cortes! I’ll figure it out in the long run, for now I’ve redone the maths and added some outputs: https://www.appt-health.co.uk/benefits-calculator

Couldn’t have done it without your help!

1 Like

@bgoodey it came out great, good job. Im glad I was able to help you. Good luck with your site.