How to Set Up and Style Forms on HubSpot Pages

Building effective forms on HubSpot pages is essential for capturing leads, improving conversions, and matching your site design. This guide walks you through how to create, add, and style forms on your HubSpot pages using themes, editors, and default settings.

All steps below are aligned with the official HubSpot tools and options described in the HubSpot knowledge base so you can confidently configure form styling without breaking your page layout.

Getting Started With Forms on HubSpot Pages

Before styling, you need to understand the main ways forms are used inside HubSpot:

Standalone forms created in the forms tool and embedded on pages.
Form modules added directly in drag-and-drop page editors.
Global form modules reused across multiple HubSpot pages.

These options give you flexibility when designing landing pages, blog subscriptions, and contact pages.

Where Form Styling Comes From in HubSpot

Form appearance on HubSpot pages is controlled by two main layers:

Theme or template styles that define fonts, colors, and spacing.
Form-level options configured in the forms tool.

In most modern HubSpot themes, page-level styles override settings in the forms tool. That means what you see on the live page is usually driven by your theme and page editor, not only by options inside the form itself.

If you are unsure which styles apply, preview the page and test basic changes in your theme settings first.

Styling Forms on HubSpot Pages Built With Themes

If your website uses a HubSpot theme and the drag-and-drop page editor, you will style forms through Website settings and the theme editor.

Step 1: Access Website and Theme Settings in HubSpot

In your HubSpot account, go to Settings.
In the left sidebar, select Website > Themes or the equivalent theme settings area.
Choose the theme applied to the HubSpot pages you want to edit.

Changes at the theme level affect every page using that theme, including form modules and global form modules.

Step 2: Configure Form Styles in Your HubSpot Theme

Most HubSpot themes provide dedicated form styling controls. Common options include:

Field label font and size.
Input field border, radius, and background.
Spacing between fields and sections.
Submit button color, typography, and hover styles.

Adjust these settings, then preview a page with a form module to confirm that your changes look correct across different HubSpot pages.

Step 3: Use Page Editor Options for Individual HubSpot Pages

For more granular control, open a specific page in the HubSpot drag-and-drop editor:

Navigate to Marketing > Landing Pages or Website Pages.
Click the name of the page you want to edit.
Select your form module or global form module directly on the canvas.

Depending on your theme, you may see module-level options such as:

Form selection (which existing HubSpot form to display).
Title and description alignment.
Module spacing and background styles.

Use these to make small design tweaks without changing every form across your HubSpot site.

Styling Forms Created in the HubSpot Forms Tool

When you build a form in the central forms tool, you can control the structure and some display settings. This is especially useful when the same form is used on many HubSpot pages.

Step 1: Open the Form in the HubSpot Forms Tool

Go to Marketing > Forms in your HubSpot account.
Select an existing form or click to create a new one.
Open the form editor to view fields and options.

Step 2: Adjust Basic Form Options

Within the forms tool, you can configure:

Form name and internal description.
Field labels, placeholders, and help text.
Submit button text.
Inline thank-you message or redirect to another HubSpot page or URL.

These choices control content and interactions, while visual styling still largely comes from your HubSpot page theme.

Step 3: Understand Form Style Limitations in HubSpot

It is important to know that many traditional form style options are now deprecated in the forms tool. That means:

You may not see detailed color or typography controls directly in the form editor.
Newly created HubSpot forms typically follow theme-level styling instead.
If older style settings exist, they may be ignored once your HubSpot pages apply theme overrides.

For consistent results, rely on the theme editor to manage fonts, colors, and spacing, and use the forms tool primarily for field configuration and behavior.

Embedding Forms on HubSpot Pages

You can add existing forms to HubSpot pages in two common ways.

Method 1: Add a Form Module in the HubSpot Page Editor

Open your page in the drag-and-drop editor.
In the left panel, search for the Form module.
Drag it onto your HubSpot page layout where you want the form to appear.
In the module settings, select the specific form you created in the forms tool.

Once added, the form inherits styling from your active HubSpot theme plus any module-level options your designer has provided.

Method 2: Use Global Form Modules Across HubSpot Pages

If you want a form, such as a newsletter signup, to stay consistent across multiple HubSpot pages, you can use a global form module.

Create or edit a page template or theme partial that includes a form module.
Set the module as global in the design tools.
Place that global module in headers, footers, or sections reused on HubSpot pages.

Updating the global module later automatically updates the form in every location where it appears.

Tips for Better Form Design on HubSpot Pages

Use these practical tips to improve performance and user experience:

Keep fields short: Ask only for the most essential information on HubSpot landing pages.
Use clear labels: Make sure every field is easy to understand on first glance.
Highlight the button: Choose a strong contrasting color in your HubSpot theme for the submit button.
Test on mobile: Preview HubSpot pages to ensure forms are readable and tappable on small screens.

Revisit your HubSpot analytics to monitor form submission rates and adjust field counts or layout as needed.

Additional HubSpot Form Resources

For detailed, platform-specific references, review the official documentation on setting up and styling forms on HubSpot pages here: HubSpot form styling guide.

If you need expert help with planning, designing, or optimizing forms and funnels beyond the standard HubSpot tools, you can also consult a dedicated optimization agency such as Consultevo for implementation support.

Summary: Managing Form Styling in HubSpot

To control how forms look and function on HubSpot pages, remember these key points:

Theme and page-level styling usually overrides forms tool settings.
Use the HubSpot theme editor for consistent fonts, colors, and spacing.
Configure fields, labels, and behavior in the forms tool.
Add forms to HubSpot pages through form modules or global form modules.

By combining theme controls with the central forms tool, you can keep your HubSpot forms on-brand, user-friendly, and optimized for capturing high-quality leads.

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

“`