Possible to make a calculator online?

Highlighted
Occasional Contributor

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 

Reply
0 Upvotes
8 Replies 8
Community Manager

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

 

Occasional Contributor

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?...) 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 

Reply
0 Upvotes
Advisor

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"

...

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








check Did my post help answer your query? Help the Community by marking it as a solution
Regular Advisor | Platinum Partner

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

dennis
Occasional Contributor

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. 

 

<script>
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>
 
<h1 style="text-align:center;">
   <!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  
  hbspt.forms.create({
portalId: "4XXXXX",
formId: "e111dbad-0775-4e8b-a792-ab851f2a1125",
onFormSubmit($form, ctx){
  calculateProfResult($form);
  }
});
</script>
 
</h1>
 
<h1><div id='resultContainer'></div></h1>

 

 

 

Thanks for the help!

 

 

Reply
0 Upvotes
Occasional Contributor

But now, it works! 

 

Hurra!! Thanks everyone! 

Community Manager

Hey @Idalin 

 

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

 

Happy Friday!  Smiley Happy

Sharon

Reply
0 Upvotes
New Contributor

Hi,

 

Where did yoy find the HubSpot Totorial?

 

Per R.

Reply
0 Upvotes