v5_white_without_BG2.png

danielbertschi.com

My HubSpot Tips and Tricks

How to build a calculator with a HubSpot form - a simple tutorial

[fa icon="clock-o"] Jul 21, 2016 8:51:41 PM [fa icon="user"] Daniel Bertschi [fa icon="folder-open'] Hacks, Forms, JavaScript


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.

HubSpot calculator form

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:

display of the calculator result

At the same time, the form information including the calculated result is submitted into the HubSpot system and shows up on Leia's timeline:

Form submission on Contact's timeline

You can see this calculator live in action on my sample landing page.

So let's see how this works:

  1. We need to build a new form with some custom propertie and we'll make the result property a hidden field
  2. We need to replace the form module on the landing page with a 'Custom HTML' module
  3. We'll grab the embed code of the form and add it to the Custom HTML module
  4. 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:

  • Email
  • 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:

Building the HubSpot form

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)

Renaming the Submit buttonThank you message after form submission

 

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:

Creating the template structure

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

  1. Let's go back to the form to grab the embed code
  2. 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.HubSpot Form Embed Code
  3. 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)
}
  1. VERY IMPORTANT: you need to add a comma to the end of the previous line (after the form ID, see yellow arrow)
    Embed Code with onFormSubmit

4. A Landing Page with some JavaScript

  1. Let's go into the Landing Pages tool and create a new page based on the previously created template.
  2. 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.
  3. 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>
  1. 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 + ' €';
 
You're pretty much done now. The first Custom HTML Module on the page should contain the script from above followed by the modified form embed code. The 2nd HTML Module should contain the single line of code containing a blank <div> container. All that's left now is to simply 'save' and 'publish' your page. 

 

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


 

Daniel Bertschi

Written by Daniel Bertschi

Principal Sales Engineer @HubSpot. Ex Principal Timpanist with the national Irish radio orchestra - RTE Concert Orchestra. Proud owner of a sense of humour, despite being Swiss.

About this blog

As a Sales Engineer with HubSpot I always enjoy finding solutions for specific use cases. The purpose of this blog is to describe some of the tips and tricks that I've come across or developed myself and to share them with the HubSpot audience.

Subscribe to this blog

Recent Posts