Globally Form Design

[Riyadh9292]

Hi HubSpot Community!

I'm working on implementing a consistent form design across our entire website and need advice on the best approach for global form handling. I've found the default form.module in Design Manager (@hubspot/form.module) and have cloned it to create a custom version with additional options like submit button alignment (left/center/right).

My questions:
1. Is creating a global form module the best practice for consistent form styling across all site pages?
2. Has anyone successfully implemented a global form design system that can be managed from a single location?
3. Are there any gotchas or limitations I should be aware of when replacing the default form.module with a custom global version?

I'd especially appreciate hearing from anyone who has experience with this kind of implementation. Thanks in advance for your insights!

[GRajput]

Hi @Riyadh9292 

Implementing a consistent form design across your website is a great way to enhance user experience and maintain brand guidelines. Here are some insights regarding your questions:
1. Is creating a global form module the best practice for consistent form styling across all site pages?
Yes, creating a global form module is considered a best practice as it maintains consistency throughout the site, which helps in following your brand guidelines. Updates or changes can be made in one place, reducing the risk of inconsistencies and saving time. You can also add custom options (like submit button alignment) that can be reused across different forms, making management easier.
2. Has anyone successfully implemented a global form design system that can be managed from a single location?
Yes, many organizations have successfully implemented global form design systems. Using design tokens for colors, spacing, and typography ensures consistency and allows for easy updates across all forms.
3. Are there any gotchas or limitations I should be aware of when replacing the default form.module with a custom global version?
No, there are no limitations that we need to worry about.

[Anton · Accepted solution]

Hi @Riyadh9292, 

a consistent form styling comes down to a theme. 

If you've never worked with themes - think of a theme like a "instruction" book. It will hold all the information for consitent user experience and styles accros all pages build upon this theme. If you use several themes,  you will most likely get several outcomes. This is why it's not really recommended to have several themes. 

As for your questions: 

1. A global form module is not the best practise for using consitent styling. A global module should be used in use-cases where you want to have the same content - not styling
2. Yes - it's the way to go. Form styles like look&feel of the inputs, radios, checkboxes, submit button..., should be "stored" in the theme fields. The alignment(if needed), should be stored in the module itself
3. As of today, the form function in custom modules don't support the "new" multi-step-form builder. This is the most crucial piece of information that you should keep in mind. p.s: There are workarounds how to get the new forms into custom modules. 

In terms of themes, you should have a few preinstalled themes in the @hubspot folder inside the design-manager. Or - download one from the marketplace. 

Note: In order to modify the source code of a HubSpot or Marketplace theme, you will need to create a child-theme of the theme(simply right-click on the folder and select "create child-theme").

If you want, you can create a custom theme by yourself. If you haven't done this in the past, start with the boilerplate and modify it to your needs. 

Usually it's recommended to build a theme like this:

• everything style that should be global, should be either made accessible via the fields.json file or hard coded into a CSS file of the theme. The benefit of fields.json is that it will allow a non-dev to modify it afterwards. Downside is, that it can take an enourmous amount of time depending on the amount of options/details you want to provide. Hardcoding is great for quick setup and a specific use-case. Downside is that a non-dev most likely won't be able to modify it. 
• Options that should be available on a page-level (like alignment) should be inside the custom module itself. This will allow the user to have some sort of customization without breaking the look&feel.

hope this helps, 

best, 

Anton

[GiantFocal]

Hi @Riyadh9292,

When you say "consistent form styling across all site pages," do you mean:
• the visual appearance (like colors and fonts from CSS)?
• or that the form itself is identical (same fields, content, and layout) on all pages?

[FrancoQ]

1. Is creating a global form module best practice?

Yes, absolutely.

2. Anyone successfully implemented a global form design system?

Yes — many HubSpot developers/agencies use these types of workarounds. Having access to the options and output makes everything work better from styling to custom integrations!

3. Are there any gotchas or limitations I should be aware of when replacing the default form.module with a custom global version?

HubSpot does occasionally update their modules, but they’re careful not to break existing implementations. Instead of removing or overwriting old modules, they usually introduce new ones—like when they added form_interactive.module alongside the existing form.module to enhance functionality without disrupting current setups.

Additionally, I wouldn’t recommend creating a global module for forms, because HubSpot’s global modules are literally global — meaning every instance would use the same form, with no ability to change it per page. Instead, it’s better to create a reusable instance module with flexible fields (like form ID, button alignment, etc.) and apply consistent styling through module.css. What really needs to be consistent isn’t the module itself, but the default styling, which can be maintained centrally without limiting flexibility.