<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=525392224501275&amp;ev=PageView&amp;noscript=1">

Transform Your HubSpot Form Into a Multi-Step Experience

Increase conversions on your HubSpot forms by transforming them into custom, branded, multi-step experiences quickly and easily.

Perfect For

Surveys, onboarding, registrations, persona segmentation, interactive quizzes, and more!

Features

  • Works with ANY HubSpot Form
  • Easy to Set-up and Use
  • Completely Customizable

How It Works

 
Simply add a button to a Rich Text field in your selected form to create as many steps as you need (see documentation to easily copy & paste). Steps will be automatically numbered and you can choose a custom label for each.

Options

 
  • Embed form or show in modal
  • Modal Button Text
  • Step Labels
  • Background
    • Color
    • Image
    • Background Size
    • Background Position
    • Background Blend Mode
    • Background Repeat
    • Modal Background Color
  • Styles
    • Header Color
    • Text Color
    • Input Background Color
    • Input Text Color
    • Input Border Color
    • Input Border Radius
  • Buttons
    • Background Color
    • Hover Background Color
    • Text Color
    • Hover Text Color
    • Border Color
    • Hover Border Color

Documentation

Step 1: Add Module to Page

From the Page Editor, select the "Add" tab and find the Multi-Step Form Modal module. Drag and drop this module to the desired location on the page.

Step 2: Choose Form

On the Module Edit Pane, choose any HubSpot form from the dropdown.

Step 3: Edit Form

Once selected, click the Actions button and in the dropdown box click "Go to full forms editor."

Select "Go to full forms editor" from the Actions submenu

To create steps for the form, add a Rich Text module below the last question in each section.

In the Rich Text editor, click "Advanced" and then "Source Code"

Paste the following into the Source Code

<a class="button" id="[ ADD YOUR STEP LABEL]">[ ADD YOUR BUTTON TEXT HERE ]</a>

Leave ID blank to remove label
*required

 

To add a label to the last section, add a Rich Text module above the Submit button and edit the Source Code like above.

Paste the following into the Source Code

<a class="last" id="[ ADD YOUR STEP LABEL]"></a>

*required and make sure to remove the "button" class

 

Step 4: Configure Module

Make the module yours with extensive customization options including modal (popup) functionality and styles. See module inline help text for more information, and check out the tooltips for handy tips!