HubSpot Custom Module: Multi-Step Form Slider

12 Nov, 2018

If you have a form with a large number of fields to complete, it helps to break that down into manageable steps. That way, the user isn't immediately overwhelmed by the size of the form and is less likely to abandon it once they're halfway through. 

Marketers frequently ask how they can add multi-step or multi-page forms on HubSpot. By default, HubSpot's forms are designed to be used on a single page. Currently there is no option to create them natively although they do offer some less than ideal workarounds or you could use a service like Typeform and integrate it into your HubSpot account.

To solve this problem, I've created a HubSpot custom module that allows you to quickly create a set of slides, each containing their own form so that you can gradually capture lead data. You can view a demo of the form and test it out here.

The module is available on the HubSpot Marketplace here.

 

HubSpot Multi-Step Form Slider

Demo of the module - Try it out here!

  

Module Features

  • Smooth, single-page, multi-form action
  • Responsive: drag it anywhere on your template, it adapts to all column and screen sizes
  • Add as many slides as you like, the module adjusts automatically
  • The form submits each time you click "Next" so that you can build form abandonment workflows
  • Uses HubSpot's form validation at each step
  • The email address transfers from one slide to the next, so you can set the email as a hidden field after the first slide
  • Allows you to customise the form width and colours
  • Styling (fonts, form fields) adapt to your website's theme
  • Support: have a question? I'm happy to help :)
  • Customisation: need even more functionality? I can add more features on request! Add logic, a calculator, smart content based on responses, icons instead of numbers... etc.

 

FAQs

Where can I get the module?

The module is available on the HubSpot Marketplace.

 

Get the Multi-Step Form Slider Module

 

Why can't I move back and forth among the slides?

Each slide uses an embedded HubSpot form and submits that form when the "Next" or "Submit" button is clicked. Because it's an embedded for, that slide just displays the thank you message ("Thank you for submitting the form") when you go back to it. Therefore I've disabled the option to do so. 

If you would like a custom solution that allows you to go back and forth, get in touch. I can either remove the functionality of submitting the form when "Next" is clicked or I can create a custom coded form.

How many slides can I add?

As many as you like! However, it might start to get a little crowded at the top if you add in too many. There is a customisation option that allows you to remove the titles that appear at the top below each dot if this is the case. 

Is the module responsive?

Absolutely! :) It looks great on mobile.

HubSpot Multi-Step Form Slider: Responsive

Can this be used for a calculator?

Not out of the box, but I can create a custom solution for you if you'd like to get in touch

 

How To Use The Module

Once the module has been added to your template, you can click on it to access the module's options. On the left hand sidebar you'll see four sections that will allow you to customise the module. 

Note that the font for the header and the form formatting should be pulled directly from your website's theme to match the rest of your content. 

 

1/ Slides

HubSpot Multi-Step Form Slider: Add a New Slide

Each time you click on "+ Add", it will allow you to add a new slide to your multi-step form module. When you create or edit a slide, you'll see the following three important fields: 

  • Slide Title: the name that appears under the slide number at the top
  • Slide Content: a Rich Text module that allows you to add any form of content above the slide
  • Form field: which form you would like to use on that slide

slide-options

Some important notes on the form: 

  • Choose the option to "Display an inline thank you message" for the form, but note that this will not be visible to the user (Why?).
  • You only need to add a visible Email form field to the form on the first slide. After the first slide, the email address will automatically be pulled from the previous slide so you can set the field to Hidden on other forms (note that you'll need to remove the Required option first).

 

2/ Last / Thank You Slide

HubSpot Multi-Step Form Module: Last Slide

The last slide is very similar to the Slides above in that it lets you update the slide title and content, but does not have a form. In the Last Slide Content area, you can add in your thank you message.

 

3/ Colours

HubSpot Multi-Step Form Module: Customisation

If you click into the "Customisation" area, you can customise most of the colours on the module: 

  • Background Colour Style/Background Colour: this is for the overall background colour. You can choose whether you'd like a flat colour, a gradient (multiple colours) or to add in your own CSS (e.g. for a background image)
  • Progress Bar Colour: the colour of the progress bar as you move from one slide to the next
  • Dot Colour: the colour of the dots that appear on the progress bar
  • Visited Dot Colour: the colour of the dots that appear on the progress bar once that slide has been completed
  • Dot Number Colour: the colour of the numbers inside the dots
  • Slide Title Colour: the colour of the title for each slide in the progress bar
  • Slide Background Colour: the background colour behind the content on each slide
  • Button Colour: the form's submit button colour.

 

4/ Other Customisations

HubSpot Multi-Step Form Slider: Other Customisations

Below the colour sections, you can also customise other aspects of the custom module:

  • Module Inner Spacing: this is the spacing within the module
  • Content Width: this is the maximum width at which the content will display,
  • Slide Inner Spacing: this is the spacing within each slide
  • Adaptive Height: if this is enabled, the module will adapt to the height of the content on each slide. Otherwise, the height of the longest slide will be used.
  • Hide Progress Bar Header: hide's the title for each slide in each progress bar. If you have many slides this may come in handy as not all of the slide headers will fit above.
  • Content Error Message: if the user tries to click on "Next" but not all fields are completed, this is the error message they will see.

When you have finished with your customisations, be sure to click on "Apply" at the bottom to make sure they're reflected on your page!

 

If you have any additional questions on the module, please don't hesitate to get in touch!

 

Get the Multi-Step Form Slider Module

Topics: custom-module, marketplace

Join the Conversation!

Do you have a question, feedback or comments on this post?