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

The multi-step form module is completely compatible with HubSpot CMS pages.  Use the drag and drop tools in the page editor to place the module anywhere on your page. The module theme settings allow you to style the module to fit your brand.

  • Background color
  • Pagination color
  • Pagination labels
  • Font
  • Button color
  • Button labels

Convert any HuBSpot for to multi-step by adding headers to your form and placing it in the module.

Loading...

SETTING UP A HUBSPOT MULTI-STEP FORM

There are two very important settings to ensure your Multi-step form module works correctly.

First: In HubSpot Settings you want jQuery set to 1.11.x find this by navigating to Settings > Website > Pages >> Scroll to jQuery and select 1.11.x

Second: In the form itself, you want to set the form style as Raw HTML under the Styl and Options tab in the form builder.

You may use any HubSpot form in your multi-step form module.  To create a form to use in your module follow the regular steps to creating a HubSpot form. 

Each step in your form requires a header or rich-text element. It is these elements that trigger the module to create a break in the form and prompts the user to the next step.


creating a multistep form in hubspot

In order for the module to work properly, you must first add the module to whichever template you wish to use in the HubSpot Design Manager 

Steps:

  • Navigate to Marketing
  • Files and Templates
  • Design Tools
  • Select the template you wish to add the module too
  • Place the module into the correct spot in your template

Once you have created your template, and created your form you may wish to edit the colors and fonts of the module. 

Key:

  • UniqueID - This is used if you are placing more than one multi-step form on a single website page.  The Unique ID can not contain spaces or special characters
  • Background Color - Fills the entire module background but does not effect page background
  • Pagination - These are the step bubbles at the top of the form. You may hide them by editing the CSS of the module.
  • Font Inherit - Uncheck this box if you do not want your form font to match your page font.  You may also edit the fonts in the CSS of the module
  • Buttons - The form navigation located at the bottom of the form.
  • Select Form - Choose the form you wish to use from the complete list of all your HubSpot forms.  If the form does not contain any RichText it will display normally within the module.

We are Here to Help

Please use the form to create a support ticket by describing the issues with your multistep form.  We monitor the support inbox 7 days a week to ensure a prompt response to your request.  

But before you contact us here are a couple of quick things you can check to troubleshoot the most common issues.

  1. Is your form set to raw HTML?  You can find this in the form editor under the Style & Preview tab.
  2. Do you have jQuery 1.11.x enabled? You can check this under HubSpot Settings > Website > Pages > Scroll to jQuery

If you have checked both these settings and you are still experiencing difficulty with the form please contact us for additional support. 

Loading...