HubSpot Custom Module: Multi-Step Form Slider

Posted by Stephanie O'Gay Garcia on 12 Nov, 2018

How to add multi-step or multi-page forms is a frequent request. HubSpot forms are designed to be single-page forms, but they do offer some less than ideal workarounds or you could use a service like Typeform and integrate it into your HubSpot account.

HubSpot Multi-Step Form Slider

Demo of the module

 

To solve this problem natively, 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 should be available on the HubSpot Marketplace shortly.

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
  • Form validation at each step
  • The email address transfer 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.

 

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

slides

Each time you click on "+ Add", it will allow you to add a new slide to your multi-step slider module. Each slide has three important areas: 

  • 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 add a redirect message below, but note that this will not be visible to the user.
  • 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 Slide

last-slide

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

 

3/ Colours

colours

You can customise most of the colours on the module: 

  • Background Colour: overall background colour. You can add a single colour or multiple for a gradient effect.
  • Form Background Colour: the colour that appears behind the content on each slide.
  • Active Slide Dot Colour: the colour for the number dot of the current slide
  • Progress Bar Colour: the colour of the progress bar as you move from one slide to the next
  • Progress Bar Header Colour: the colour of the header that appears below each number
  • Button Colour: the form's submit button colour.

 

4/ Other Customisations

other

You can also choose the form width (while it's responsive, this is the maximum width of the form) and hide the headers. If you have many slides this may come in handy as not all of the slide headers will fit above.

 

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!

Tags: custom-module, marketplace


Comments

Do you have a question, feedback or comments? Join the conversation!