Latest CMS Developer Posts

HubSpot CMS Blog

Build Interactive Calculators to Generate more Conversions on the CMS

Written By Jeff White on Oct 10, 2014 12:34:00 PM

As inbound marketers, we all know the power of a whitepaper or ebook top of the funnel offer. The ability to provide unique, compelling information, accessible only via a simple sign up form is the bread and butter in an inbound marketer’s toolbox. It’s often the place where many of our client’s leads begin their journey through the buying process. What if you could provide a web asset that was more useful to your site prospects than a document to download and read? Try on an interactive calculator for size.

A more useful lead generating tool

At Kula Partners, we’ve found that interactive calculators can help your prospects learn much more about your offerings, while providing your sales team with a greater depth of understanding on the needs of your potential customers.

We’ve been experimenting with interactive pricing calculators to capture additional lead data in addition to the standard contact information for our clients. Our first experiment with the calculator was for Docbraces, an orthodontist. Powered by a simple piece of JavaScript, this calculator helps the site visitor to see how much they can expect to spend on a set of braces. Interestingly, we found that the landing page for this offer converted at around 45%, compared with a much lower conversion rate for standard content offers (which varies depending on how ‘niche’ the offer is from 10-30%). Of the prospects who converted, 24% requested a consultation. The calculator converts many times more prospects into leads than any written asset on the site. 



The simple interactive offer with the calculator doesn’t need to capture anything but the prospect’s contact information. For more complex sales opportunities that combine multiple product and service offerings at various prices, a more robust solution is required. However, these more complex ‘solutions finders’ offer an opportunity for marketers to gather additional lead details for the sales team. Even when designing a multi-form ‘solutions finder’, it’s important to remember that at its most basic form, it’s a tool that allows prospects to step through an analysis of their needs and get a recommendation at the other end.


Steps to building a calculator for your business


The first step, as with any inbound offer, is to capture the prospect’s contact info and name. By all means, consider asking for more info, but balance it with the additional data you’ll be getting from the calculator. The important part here is that we’re going to be using the HubSpot tracking cookie to carry the prospect’s details and responses through to their profile in the contact record. Therefore, it’s essential that the landing page where this data is collected is housed in HubSpot’s CMS. So, stick with HubSpot’s CMS instead of passing data from WordPress to HubSpot here—it’s easier and more reliable.


Let’s take the example of a telecom company solution finder to demonstrate how this top of funnel offer can be implemented. On the next page of the form, we collect data on the lead’s corporate telephone requirements. We ask questions such as ‘How many phone lines do you need?’ and try to ascertain if they have existing technology that will need special integration. Once the lead has completed this page, they’re presented with a business telephone recommendation and sent on to the high-speed internet section, then the mobile phone section, etc. At each stage, the data they’ve entered is submitted to custom HubSpot contact record fields so even if they don’t finish, extra data about the lead is captured. When they complete the entire form, the recommendation is presented to them on a thank you page and emailed to the lead and a sales rep.


When building a calculator like this, the first step is to design the question and answer matrix before any code gets committed to the repository. We use JSON for this, but XML would work too. This means mapping out the possible paths the user could take through the questions with the potential answer they’ll receive at the end. It’s important to keep this relatively straightforward. Try not to add too many ‘if/then’ branches to your logic—it just makes the processing engine complicated and non-reusable. On that front, we’ve built a JavaScript-based ‘logic processor’ that gets called upon to respond to the user’s input.

The form elements should be coded within a single HTML file, which, like all of the other files for the system, is stored in the CMS Design Manager. Within the HTML file, place the HubSpot form code near the footer, so that it can be executed at any time to submit the user’s selections.


Take a new approach to content

There’s no question that interactive solutions finders require at least as much research and effort to produce as a written content asset, and require a more development-oriented skill set than traditional inbound content. However, the added lead detail, and deeper engagement of the prospect in the sales process makes an interactive solutions finder an attractive top of funnel offer. Pricing calculators are really just the start too—with a creative web development team, almost anything is possible when trying to create new kinds of conversion opportunities.

To learn more about how to converting your visitors using interactive calculators, check out Jeff's INBOUND presentation. 


For more tutorials that will engage your audience and result in more conversions with web design that assists your lead generation strategy, check out our HubSpot CMS tutorials.


Subscribe to HubSpot's Designer Blog   

Topics: Best Practices, Tutorial

Jeff White

As one of the two principals of Kula Partners, Jeff is that odd dichotomy – a creative who can also think in code. Jeff is as much a developer as he is a designer and is able to translate business needs into beautiful applications that function the way people expect them to work. Nearly eleven years ago, Jeff started a boutique agency specializing in the design and development of websites, applications and marketing programs that help organizations communicate online.

Stay Up To Date 👇

Learn how to code on HubSpot CMS
    Join the HubSpot CMS Developer Slack

    Ask questions in the CMS Developer Forum

    Join the free CMS for Developers Course

    View the HubSpot API Documentation

    Recommended Posts