How to Embed Multiple HubSpot Forms on One Page (Webflow & Other Platforms)

The challenge of embedding multiple HubSpot forms on a single web page is a common technical hurdle for developers and marketers alike. While HubSpot is a powerful platform for lead capture and customer engagement, integrating multiple forms, especially on external builders like Webflow, can sometimes lead to unexpected rendering issues where only one form appears. This article delves into the root causes of this problem and provides actionable solutions to ensure all your HubSpot forms display correctly, maintaining a seamless user experience and robust data collection.

Code snippet demonstrating how to embed multiple HubSpot forms with unique IDs

Understanding the Multiple Form Rendering Challenge

When attempting to embed two or more HubSpot forms on the same page, a frequent observation is that only the first form in the Document Object Model (DOM) renders successfully, leaving subsequent form containers blank. This behavior often stems from how HubSpot's embed script initializes. The script is typically designed to find and process the first instance of a form embed it encounters. If multiple forms share the same default container ID or if the script isn't explicitly instructed to handle each form separately, it can lead to conflicts where subsequent forms are overlooked.

The core of the issue isn't a limitation by HubSpot on the number of forms per page, but rather a conflict in the initialization process. Each form embed needs its own distinct space and instructions to ensure proper loading. Without this, forms can "fight over the same container or script initialization," resulting in only the first one successfully completing its load cycle. This is particularly true when simply duplicating embed codes without modifying their target parameters or when relying on older, less flexible embedding methods.

The Technical Nuance: How HubSpot's Script Works

HubSpot's form embed script, typically a JavaScript snippet, scans the page for a specific HTML element (often a div with a particular class or ID) where the form should be rendered. If multiple such elements exist but the script is only configured to process the first match, subsequent elements will be ignored. This is a common pattern in web development to prevent unintended multiple instantiations of components that are designed to be unique per page.

Strategies for Embedding Multiple HubSpot Forms Successfully

Successfully embedding multiple HubSpot forms on a single page requires careful attention to the embed code and the target containers. The primary solutions revolve around providing unique identifiers for each form and ensuring the HubSpot embed script is instructed to render each one individually.

1. Utilize Unique Container IDs for Each Form

The most crucial step is to provide a distinct HTML container for each HubSpot form you wish to display. Instead of letting HubSpot's script guess where to place the form, you explicitly define a div element with a unique ID for each form. For example:

Ensure these IDs are unique across your entire page to prevent conflicts.

2. Explicit Form Mounting with the HubSpot Forms API

Once you have unique containers, you need to instruct the HubSpot embed script to render each form into its respective container. This is typically done using the HubSpot Forms API, specifically the forms.create method. This method allows you to specify the target element by its ID.

For each form, you would include a separate JavaScript call, like this:

Replace YOUR_PORTAL_ID with your actual HubSpot portal ID and YOUR_FORM_ID_1 and YOUR_FORM_ID_2 with the respective IDs of your HubSpot forms. The target parameter is key here, explicitly telling the script where to render each form.

3. Addressing Legacy Forms (if applicable)

For older or "legacy" HubSpot forms, the method might involve an additional parameter like formInstanceId alongside the target option. While the forms.create method is the recommended modern approach, if you are working with older implementations, consulting the HubSpot developer documentation for legacy forms can provide specific guidance on how to manage multiple instances.

Considering User Experience (UX) and Design

While technically feasible to embed multiple forms, it's also important to consider the user experience. Having two identical (or very similar) forms prominently displayed on a single page, especially one in the hero section and another lower down, can sometimes be redundant or confusing for users. Before implementing multiple forms, ask:

Is it necessary? Do both forms serve distinct purposes, or are they collecting the same information?
Is there a better UX pattern? Often, a strong Call-to-Action (CTA) button in the hero section that scrolls the user down to a single, well-placed form, or triggers a modal pop-up with the form, can be more effective. This streamlines the user journey and prevents visual clutter.
Are the forms truly different? If they are collecting different types of information (e.g., one for a demo request, another for a newsletter signup), then multiple forms might be justified, provided they are clearly differentiated and strategically placed.

Troubleshooting Common Issues

If you've implemented the solutions above and are still encountering problems, consider these troubleshooting steps:

Check for JavaScript Errors: Open your browser's developer console (F12) and look for any JavaScript errors. These can often prevent scripts from executing correctly.
Verify IDs: Double-check that your div IDs in your HTML exactly match the target values in your hbspt.forms.create calls (e.g., #hubspotForm1 corresponds to
).
Ensure HubSpot Script is Loaded: Confirm that the main HubSpot forms script (//js.hsforms.net/forms/v2.js) is loaded only once on the page, ideally in the or before your form create calls.
Caching Issues: Clear your browser cache and any website caching (e.g., Webflow's CDN cache) to ensure you're viewing the latest version of your page.
Conflicting Scripts: Other JavaScript libraries or custom scripts on your page might be interfering with HubSpot's script. Temporarily disable other scripts to isolate the issue.

Conclusion

Embedding multiple HubSpot forms on a single page, whether in Webflow or another platform, is entirely achievable with the right approach. By understanding how HubSpot's embed script functions and by employing unique container IDs with explicit form mounting instructions, you can overcome common rendering challenges. Always prioritize a clean user experience and ensure your forms are strategically placed to maximize conversion without overwhelming your visitors. A well-managed form strategy not only enhances lead capture but also contributes to a cleaner, more efficient CRM.

Ensuring your HubSpot forms function flawlessly is just one aspect of maintaining a healthy digital presence. At Inbox Spam Filter, we understand the critical importance of keeping your HubSpot CRM clean and your inboxes free from irrelevant submissions. Our solutions provide advanced capabilities to automatically filter out unwanted entries, ensuring your team focuses on genuine leads and valuable interactions. Implement a robust HubSpot spam filter to streamline your operations and contribute to a clean CRM HubSpot and enhanced productivity.

Solving the HubSpot Multiple Form Dilemma on Webflow and Beyond