Did you ever wonder if and how it was possible to convert a native HubSpot form into a calculator? Depending on your business, calculators can be a really valuable piece of content to your buyer personas - particularly in the later stages of the sales cycle/towards the bottom of the marketing funnel. While they're not supported by our forms out of the box they can be created with some coding knowledge. Here is a simple tutorial which walks you through how to build a basic calculator out of a HubSpot form. More importantly, this will allow Princess Leia to make the right decision.
Let's assume Leia wants to purchase some new material for a dress. This time she is not looking for a bikini to impress Jabba and Han Solo. Instead the dress will contain a decent amount of material so both the type of material and the amount of material (not the lack thereof) will matter. The calculator will allow her to find out how much money she / the people of Alderaan (throught their taxes) might have to spend on the material required.
Once she hits the 'Calculate' button, the calculator displays the result which depends on the material chosen (Organic Cotton, Cotton, Velvet or Polyester) and on the no. of square meters required:
At the same time, the form information including the calculated result is submitted into the HubSpot system and shows up on Leia's timeline:
You can see this calculator live in action on my sample landing page.
So let's see how this works:
- We need to build a new form with some custom propertie and we'll make the result property a hidden field
- We need to replace the form module on the landing page with a 'Custom HTML' module
- We'll grab the embed code of the form and add it to the Custom HTML module
- We'll customise the form embed code as explained here and we'll add some additional logic
1. A new form & some custom properties
For this simple example we'll create a form with just 4 properties:
- Type of Material (Type: Dropdown Select; Values: Cotton, Organic Cotton, Velvet, Polyester)
- No. of Square Meters (Type: Number)
- Result (Type: Number; hidden field)
To find out more how to create a property click here and for more info about how to make a property hidden check out this article on the HubSpot Academy.
Make sure that all fields except the result (hidden) are required and that no field is smart.
Once you're done, it should look like this:
Two more changes:
- We change the text on the submit button so it is more in line with a calculator (see left picture underneath)
- We click on the "Embed" tab > 'Thank you message' and write 'Your price:' (or similar) into the text field. (see right picture underneath)
2. A Landing Page template without a form module
Now it's time to build/clone a template. For this tutorial we require a template with at least the following criteria- 2 HTML Modules
- No form module
Obviously you'll have additional modules such as Rich Text and Image Modules where you describe your offer.
The template that I'm using in the sample landing page looks like this:
You can ignore the fact that I'm using a Flexible Column on the left hand side. That's a pure coincidence and has no impact on the calculator.
Make sure to publish/update the template when you're finished.
3. Customising the Form Embed Code
- Let's go back to the form to grab the embed code
- We're going to change the code a bit, so let's paste it into a simple text editor such as SimpleText on a PC or TextEdit on the Mac or a full code editor such as Sublime or Atom.
- In order to run the calculation, we will need to trigger some code when somebody clicks on the 'Calculate' Button. We can do this by adding an 'onFormSubmit' trigger to the embed code. In this case we're not really adding any code into the 'onFormSubmit' section of the embed code. Instead we'll use it to trigger another function called 'calculateResult' which will contain the actual logic itself.
onFormSubmit($form, ctx){ calculateResult($form) }
- VERY IMPORTANT: you need to add a comma to the end of the previous line (after the form ID, see yellow arrow)
4. A Landing Page with some JavaScript
- Let's go into the Landing Pages tool and create a new page based on the previously created template.
- Copy and paste the full modified embed code into the first HTML module on the page (where the form will be located). As soon as you do this, the form shows up on the page as if you were using a form module.
- Copy the following line of HTML code into the 2nd HTML module on the page. This will be used to display the result on the page and should be located underneath the one with the form embed code. Don't worry if nothing shows up. At the moment it's just an empty container.
<h1><div id='resultContainer'></div></h1>
- It's time to look at the calculator logic. Copy and paste the following code into the same HTML module as the form embed code but above the embed code.
<script> var result = 0; function calculateResult($form){ // first we need to store all the prices for the different types of materials // in a simple array/dictionary var pricesDict = new Array(); pricesDict['Organic Cotton'] = 50; // price of organic cotton pricesDict['Cotton'] = 20; // price of cotton pricesDict['Velvet'] = 80; // price of velvet pricesDict['Polyester'] = 10; // price of polyester // get the selected material from the form ... var material = $form.find('select[name="calculator_type_of_material"] option:selected').val(); // ... and look up the price per sqm var materialPrice = pricesDict[material.toString()]; // get the no. of sqm entered in the form var squareMeters = $form.find('input[name="calculator_square_meters"]').val(); // calculate the result result = squareMeters * materialPrice; // write the result into the hidden result field in the form ... $form.find('input[name="calculator_result"]').val(result); // ... and also display it on the page document.getElementById("resultContainer").innerHTML=result + ' €'; } </script>
Let's take a closer look at line 14 where we get the value for the material:
$form.find('select[name="calculator_type_of_material"] option:selected').val();
- We use a jQuery selector: $('select
- We use the 'name' attribute of the form field ('calculator_type_of_material') to reference the correct field
- We get the chosen value of that field by adding 'option:selected' to the selector.
- Finally, we can extract the value itself by calling the val() method.
Please note that the name attribute is identical with the internal name of the HubSpot properties. You can find the internal name of a contact property by navigating to Contacts > Contacts Settings. Search for the desired property and click to edit. Here you will see the Internal Name of the property to use in your code.
We use the same approach to get the no. of sqm required and to pass the result into the hidden form field:
$form.find('input[name="calculator_result"]').val(result);
Finally we display the result on the page with the help of the empty container in the 2nd HTML Module:
document.getElementById("resultContainer").innerHTML=result + ' €';
In a production environment you would most likely set this up differently. Instead of asking for the email address in the calculator, this would probably be one of those rare instances where you would hide the email address field. Instead you would have a Landing Page first where you ask for the email address. The calculator could be the gated content behind the landing page, so the email address would be known already (and it could be used as a hidden field).