Simple Multi Step Form

It has always been a struggle to setup multi-step forms or anything of that sort - which is why we’ve come up with this module to serve that purpose. It offers an easy setup that allows anyone to plug and play with it right away.

✒️ Key features

• Uses a single HubSpot Form
• Uses rich text to group up form fields
• Has the option to disable the progress steps
• Adjust form width as you see fit
• Change navigation button’s label
• Uses HubSpot’s native validation
• Can customize the color theme of the entire module and form

💪 Getting Started

Most of these instructions are based from HubSpot’s knowledge base on setting up forms so if you want to check the full article, you may visit this link:
https://knowledge.hubspot.com/articles/kcs_article/forms/create-forms We’re only going to focus on building a form and setting it just enough for us to enable the multi-step functionality.

Important note: You must have the HubSpot Marketing Starter tier onwards before continuing. Please refer to this page for more details.
https://www.hubspot.com/pricing

Creating a form

• In your HubSpot account, navigate to Marketing > Lead Capture > Forms.
• In the upper right, click Create form.
• In the left panel, select Regular form.
• In the upper right, click Next.
• In the left panel, select Blank template to start with a blank form, or a pre-made template to start with a form with fields for a specific use case. The form preview for a selected template will appear in the right panel.
• In the upper right, click Start.
• At the top of the form editor, click the pencil icon to edit the form name.

Add and edit form fields

• In the left panel, use the search bar to search for a field, or browse through your property groups. To create a new contact property and use it as a field on your form, click Create new next to the search bar.
• Drag and drop fields onto the form preview on the right to include them on your form. Fields can be placed above, below, or next to other fields.

Grouping the fields

• In the left panel, drag and drop the Rich text area option under the Other Form Elements. Modify the content as you’d like.

• All fields below a Rich text area will be considered as one group unless there would be another one dragged inside the form.

• Please take note that this step is crucial in order for the custom module to work.

Final Step As a wrap-up, please enable the option Set as raw HTML form on the Style & preview tab.

If this is not available on your options, you may have to upgrade to a HubSpot Marketing Start tier and up as mentioned earlier in this guide.

After the form is completely set up, you may now select it on the form field option of the custom module and hit the Save button. 🎉