topic Re: Can Form be divided to Sections ? in Tips, Tricks & Best Practices

Can Form be divided to Sections ?

JNauman — Sun, 06 Apr 2025 13:43:07 GMT

I have a client who needs a multi step forms in a certain step he wants to divide it into 3 sections. How to do that ? Another problem that I am facing that the step is a bit long due to the number of properties (according to the client request) i can't fit the image in the step to show full size and fit the container

Re: Can Form be divided to Sections ?

CarolinaDeMares — Sun, 06 Apr 2025 14:40:56 GMT

Hi @JNauman !

For multi-step forms, I recommend using HubSpot’s Multi-Form feature. You can access it by creating a new form → opening the form editor, and selecting a multi-step template from there.

Regarding image alignment and layout:

Try placing fields side by side to better manage space.
Reducing the title font size can also help improve the visual balance.
Don’t forget to use dependent fields — this can streamline the experience by only showing additional fields when necessary.

I did a quick test by adding a large number of fields to one section, and it seems the image size isn't affected — once the form grows, a scroll bar appears, and the image still displays properly. (See video)

Hope this helps! Let me know if you need anything else 😊

Carolina De Mares

Brandgang

Goirkekanaaldijk 14

5046 AT Tilburg

Book a free consultation here

Re: Can Form be divided to Sections ?

Upvise — Sun, 06 Apr 2025 19:49:34 GMT

Hi @JNauman

HubSpot supports multi-step forms natively, allowing you to break down longer forms into manageable sections. This feature enhances user experience and can lead to higher completion rates.

To create a multi-step form in HubSpot:

Navigate to your HubSpot account and go to Marketing > Forms.
Create a new form or edit an existing one (not the old legacy forms).
In the form editor, click the + Add step button to introduce new steps.
Organize your form fields across these steps as needed. As mentioned by @CarolinaDeMares , use conditional fields to show certain fields only when needed or to jump between sections.
Customize the progress bar to indicate form completion status to users.

Regarding your image sizing issue: If you embed the form on your website, you can apply custom CSS to adjust the image size and ensure it displays correctly within the container of the form step.

If you provide a screenshot, we might be able to help you more in depth. By leveraging HubSpot’s native multi-step form capabilities and adjusting your image settings, you can create a user-friendly form that meets your client’s requirements.