topic Creating a simple calculator using custom properties in CMS Development

Possible to make a calculator online?

Idalin — Tue, 09 Jul 2019 06:53:33 GMT

Hi,

My company uses Hubspot Professional and we are trying to make a simple calculator for customers to see how much they can save.

We have used this (https://www.danielbertschi.com/en/hubspot-tips-and-tricks/how-to-build-calculator-with-hubspot-form?...)hubspot-tutorial as a reference, but haven't had success. The tutorial uses custom properties and JavaScript to generate output.

Do anyone know how you make a calculator on Hubspot for customers to use?

Ida

Creating a simple calculator using custom properties

Idalin — Mon, 08 Jul 2019 14:41:05 GMT

Hi,

My company uses Hubspot Professional and we are trying to make a simple calculator.

We have used this hubspot-tutorial (https://www.danielbertschi.com/en/hubspot-tips-and-tricks/how-to-build-calculator-with-hubspot-form?success=true) as a reference, but haven't had success yet. The tutorial uses custom properties and JavaScript to generate output.

Is this something we should have been able to do?

Hope to hear from you soon!

Ida

Re: Possible to make a calculator online?

sharonlicari — Thu, 11 Jul 2019 14:29:37 GMT

Hey @Idalin

I am not an expert with JavaScript, however, I am pretty sure one of our experts can give you some advice on this.

Hey @AJLaPorte_diagr, @Anton and @Reg do you have any ideas or any suggestions you can have for @Idalin?

Thank you

Sharon

Re: Creating a simple calculator using custom properties

Anton — Thu, 11 Jul 2019 18:01:36 GMT

Hi @Idalin,

what exactly do you want to "display"? So kind of checkboxes and radio buttons where the visitor/customer can simply click/select and then the price will be modified?

Like:

"You're paying 1000€ per month"

replace old agency with a modern one

switch to regeneratable power

...

and with a selection of an option the "1000€" will be modified to a lower price?

If so you can use the tutorial from hubspot - but you have to know/understand JS(JavaScript) and CSS(for styling the "form").

You could also google for "cost calculator +script", "cost calculator +generator" or similar.
After a quick search for "cost calculator html"(yeah - html is not the best one but it can lead to better google results) I've found this litte helper: JScalc.io

I think after a quick look in the documentation and the youtube video you should be able to get yourself a calculator which matches your needs.

You can also look for something completly different like a standalone script(one source could be codecanyon.net(most likely you have to buy the scripts and watch out to not to pick something for a CMS plugin like for wordpress). Maybe this script will match your needs?
If you decide to get a standalone solution you will need to modify it localy(best case) in a code editor(atom.io, adobe brackets, adobe dreamweaver, notepad++ ...), upload it to HubSpot via the file manager and connect it to a HubSpot page.

If you have hardly experience with coding I would suggest to use an online generator like JScalc.io

regards,

Anton

Re: Possible to make a calculator online?

dennisedson — Thu, 11 Jul 2019 21:04:22 GMT

@Idalin , what part of the tutorial is not working for you?

Re: Possible to make a calculator online?

Idalin — Fri, 12 Jul 2019 10:05:42 GMT

I went through all the steps, and it seems as though my problem becomes apparant in Step 2 and 4. The issue is that the "result"/hidden field doesn't write out a calculation (or anything else) when I write input into the form.

I made a form as shown in the tutorial. I then found and made the changes to the form embed code (Took it from "Share Form" made in step 1 in Hubspot). This is my full code, with the calculation JavaScript on the top, then the Form Embed Code and the last HTML module line on the bottom.

var result = 0;

function calculateProfResult($form){

// first we need to store all the info for the different facts that the calculation depends on

// in a simple array/dictionary

var factsDict = new Array();

factsDict['Average Salary'] = 50000; // Average US salary 3

factsDict['Revenue per Employee'] = 160000; // Average revenue generated per employee

factsDict['Absentism'] = 35%; // Absentism increases by 35% with poor IAQ

factsDict['Productivity'] = 10%; // Productivity decreases by 10% with poor IAQ

// get the companys absence rate from the form ...

var companyAbsRate = $form.find('input[name="absence_rate"]').val();

// ... and look up the price per sqm

//var materialPrice = factsDict[companyAbsRate.toString()];

// get the no. of employees entered in the form

var numEmployee = $form.find('input[name="calculated_employees"]').val();

// Stating the facts and key numbers

AvgSalary = 50000; // Average US salary

RevperEmployee = 160000; // Average revenue generated per employee

AbsFact = 0.35; // Absentism increases with 35% with poor IAQ

ProdFact = 0.1; // Productivity decreases by 10% with poor IAQ

// CALCULATIONS BAD INDOOR AIR QUALITY

// calculating the cost per employee of absence in bad indoor air climate (subsitute worker is applied by multiplying with 2)

empCostofAbsBIAQ = 2 * AvgSalary * companyAbsRate;

// calculating the companys total cost of absence in bad indoor air climate

CostofAbsBIAQ = empCostofAbs * numEmployee;

// calculating the revenue lost in productivity with bad indoor air climate

CostofProdBIAQ = RevperEmployee * numEmployee;

// CALCULATIONS GOOD INDOOR AIR QUALITY

// calculate the companys cost of absence in good indoor air climate

CostofAbsGIAQ = CostofAbsBIAQ * (1-AbsFact);

// calculate the revenue lost in productivity with bad indoor air climate

CostofProdGIAQ = CostofProdBIAQ * (1+ProdFact);

// RESULT FROM HEALTHIER INDOOR ENVIRONMENT

// Profit from lowered costs in absenteeism and gained revenue in productivity

ProfitAbs = CostofAbsBIAQ - CostofAbsGIAQ

ProfitProd = CostofProdGIAQ - CostofProdBIAQ

// Saved in total

ResultGIAQ = ProfitAbs + ProfitProd

// Creating an Array to write out the different results

var results = [CostofAbsBIAQ, CostofProdBIAQ, CostofAbsGIAQ, CostofProdGIAQ, ResultGIAQ]

// write the result into the hidden result field in the form ...

$form.find('input[name="result"]').val(results[0]);

// ... and also display it on the page

document.getElementById("resultContainer").innerHTML=result + ' €';

}

</script>

<!--[if lte IE 8]>

<![endif]-->

hbspt.forms.create({

portalId: "4XXXXX",

formId: "e111dbad-0775-4e8b-a792-ab851f2a1125",

onFormSubmit($form, ctx){

calculateProfResult($form);

}

});

</script>

</h1>

Thanks for the help!

Re: Possible to make a calculator online?

Idalin — Fri, 12 Jul 2019 12:45:39 GMT

But now, it works!

Hurra!! Thanks everyone!

Re: Possible to make a calculator online?

sharonlicari — Fri, 12 Jul 2019 13:41:59 GMT

Hey @Idalin

I am happy to know this is working now for you, would you mind to share the solution?

Happy Friday! 🙂

Sharon

Re: Possible to make a calculator online?

PerRaknes — Wed, 04 Dec 2019 15:29:54 GMT

Hi,

Where did yoy find the HubSpot Totorial?

Per R.

Re: Possible to make a calculator online?

MarcusHarte — Wed, 31 Jan 2024 14:13:38 GMT

Is there still no built-in HubSpot feature that allows this type of workflow?