Customize Legacy Form Layouts in Hubspot

Legacy forms in Hubspot include layout tools that let you control how fields appear in rows and columns, so you can create clear, easy-to-complete forms without custom code.

This guide explains how to use the legacy editor to adjust form layouts, resize fields, and align labels, all based on HubSpot's official documentation for legacy forms.

Understanding Hubspot Legacy Form Layouts

Legacy form layouts in Hubspot are built on a simple grid system. Each row can contain one or more fields, and each field is assigned a relative width. By grouping fields on the same row and adjusting their widths, you can design compact and readable forms.

Key layout capabilities include:

Placing multiple fields on a single row
Changing the width of each field in that row
Aligning field labels and inputs
Reordering fields in a row

These options are available only in the legacy form editor. If you are using the newer drag-and-drop editor, the layout controls will be different and may not match the steps below.

Accessing a Legacy Form in Hubspot

To customize the layout of a legacy form, you need to open it in the proper editor within your Hubspot account.

Log in to your Hubspot account.
Navigate to your marketing forms tool (often under Marketing > Forms).
Locate the legacy form you want to edit and click its name to open it.
Confirm you are in the legacy form editor, which displays fields in a list with layout options for each row.

If your form automatically opens in a newer experience, you may need to create or edit a different form that still uses the legacy format to follow this guide exactly.

Creating Multi-Column Rows in Hubspot Forms

One of the most useful layout options in Hubspot legacy forms is the ability to place multiple fields on a single row. This can shorten the visual length of a form and reduce scrolling.

Steps to place fields on the same row in Hubspot

In the form editor, locate the field you want to move.
Click and drag the field until a horizontal blue highlight appears next to another field on the same row.
Drop the field when the highlight indicates it will be placed beside the other field, not above or below it.
Repeat for additional fields you want to add to that row.

The fields now share the same row and will automatically split the available width based on their current width settings.

Best practices for multi-column Hubspot layouts

Combine short fields like First Name and Last Name on one row.
Place related contact information fields, such as City and State, side by side.
Avoid placing long text areas in multi-column rows, as they can feel cramped.

Adjusting Field Widths in Hubspot Legacy Forms

After you have fields on the same row, adjust their widths to balance the layout. Hubspot legacy forms allow each field to take a portion of the total row width.

How to change field width

Hover over a field within the row.
Look for a width control or percentage indicator (for example, 50%, 25%, or 100%).
Click the width setting to open the available options.
Select the new width for the field (for example, set one field to 33% and another to 67%).
Review the preview area to ensure the row looks balanced.

The total of all field widths in a row should not exceed the full row width. If a row is overfilled, some fields may wrap to the next line or display in an unexpected way when the form is embedded.

Common width combinations in Hubspot layouts

Two fields per row: 50% + 50%
Three fields per row: 33% + 33% + 33%
Uneven emphasis: 67% main field + 33% secondary field

Use narrower widths for short inputs (like Postal Code) and wider widths for longer text inputs.

Reordering Fields and Rows in Hubspot Forms

Reordering fields is an important step in creating a logical experience for your visitors. Hubspot legacy forms support drag-and-drop reordering for both rows and individual fields.

Reorder entire rows

Find the row you want to move in the form editor.
Hover over the row control or grab handle, usually on the left side.
Click and drag the row above or below other rows until you see a placement indicator.
Release the row to place it in the new position.

Reorder fields within a row

Hover over the field within the row.
Click and drag the field left or right.
Drop the field when the indicator shows it will shift position in the row.

This drag-and-drop control helps you refine the logical order of fields, such as placing Email before Phone Number or grouping related information together.

Aligning Labels and Fields in Hubspot Legacy Forms

Clear label alignment improves readability and completion rates. The legacy editor in Hubspot typically offers alignment options at the form or field level.

Common label alignment options

Top-aligned labels: Labels appear above each field; good for mobile and long forms.
Left-aligned labels: Labels appear to the left of fields; useful for compact forms with short labels.
Right-aligned labels: Less common, but can be used to align labels close to inputs.

How to change alignment

Open the form in the Hubspot legacy editor.
Look for form-level options such as Form options or Style & preview.
Adjust the label position or alignment setting if available.
Preview the form to confirm that labels and fields are aligned correctly, especially on smaller screens.

Previewing and Testing Hubspot Legacy Form Layouts

Before publishing your changes, always preview how the layout appears to visitors. Hubspot provides a preview mode directly from the legacy editor.

Preview steps

In the editor, locate the Preview button or tab.
Open the preview in a new tab.
Resize your browser window to simulate different screen sizes.
Confirm that multi-column rows, widths, and alignments behave as expected on desktop and mobile.

If you identify any issues, return to the editor, adjust the layout, and preview again until the form is easy to read and use.

Additional Hubspot Legacy Form Layout Resources

For a complete reference to all legacy form layout controls and visuals, you can review HubSpot's official help article on customizing form field layouts: Customize the layout of your form fields (legacy).

If you need strategic help designing high-converting layouts or migrating from legacy to modern Hubspot experiences, you can also consult experts at Consultevo, who specialize in marketing automation and CRM optimization.

By using the legacy form tools in Hubspot thoughtfully, you can create clean, structured forms that collect the data you need while giving visitors a smooth, professional experience.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`

Hupspot form layout guide