Last updated: June 26, 2023
Available with any of the following subscriptions, except where noted:
All products and plans
|
When embedding a HubSpot form on your external page, you may see it appearing in a different location than desired.
This may be due to the form being dynamically rendered on the page or an issue with multiple form embed codes being added to the same <div> tag in the page HTML.
These issues can be resolved by customizing the form embed code. Learn more about customizing the form embed code in HubSpot's developers documentation.
Single form
A form may sometimes be dynamically rendered on a page and load in different locations. Sometimes on older browsers, the form may not even display.
To ensure the form loads successfully on a specific part of the page, you can add a target attribute to the form embed code to specify the specific container you want the form to render in.
For example, you can force the form to render in a container on the page with the CSS class of sidebar. To add a target attribute to the form embed code:
- In the form embed code, add a comma (,) after the formId.
- Then, enter a new line and enter target: '[container name]' .
Multiple forms
When you embed the same HubSpot form multiple times on an external page, the forms may appear side by side or in the wrong location. This happens if the form embed codes are added to the same <div> tag in the page HTML.
To ensure the forms load and display correctly, add the formInstanceId attribute and specify a unique value for each form embed code:
- In the form embed code, add a comma (,) after the formId attribute value,
- Then, enter a new line and enter formInstanceId: '[number]'.
- Add and number each form in the order it appears on the page. For example, '1' for the first form, '2' for the second form, and so on.
