CMS Development

Idalin
Participant

Possible to make a calculator online?

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 

10 Replies 10
Logan662
Member

Possible to make a calculator online?

Users can gain access to some of the best online free Engineering calculators, and one of them is WolframAlpha. This will display your expression made as a graph via automatic processing in different forms and on a number line. It also produces questions directly linked to your inputted expression that should assist you in uncovering more about it and how it functions. It has a number of different features that are accessible to those who pay a monthly fee. These features contain some step-by-step ways to deal with the error, practice problems with hints, guided calculators for finance, and from here you will learn a lot more.

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

Possible to make a calculator online?

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

Idalin
Participant

Possible to make a calculator online?

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!

 

 

0 Upvotes
Idalin
Participant

Possible to make a calculator online?

But now, it works! 

 

Hurra!! Thanks everyone! 

PerRaknes
Participant | Diamond Partner
Participant | Diamond Partner

Possible to make a calculator online?

Hi,

 

Where did yoy find the HubSpot Totorial?

 

Per R.

0 Upvotes
sharonlicari
Community Manager
Community Manager

Possible to make a calculator online?

Hey @Idalin 

 

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

 

Happy Friday!  🙂

Sharon


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




0 Upvotes
Idalin
Participant

Possible to make a calculator online?

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 

0 Upvotes
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Possible to make a calculator online?

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

Anton Bujanowski Signature
sharonlicari
Community Manager
Community Manager

Possible to make a calculator online?

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

 


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




MarcusHarte
Participant

Possible to make a calculator online?

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

 

0 Upvotes