When you embed a HubSpot form on your external page, you may notice that the form does not appear in the right location.
One form instance changes location
If you have embedded a HubSpot form on an external page, you may find that the form no longer appears in its intended location. This is a result of the way that forms are dynamically rendered, but you can add a parameter to the form embed code to ensure your form is added to the desired part of the page. Please be aware that this behavior may not present itself immediately after embedding a HubSpot Form on your external page.
Add the target attribute in the form embed code to specify the <div> in which you want to force the HubSpot form to render by targeting the specific HTML class or ID of that <div>. The example below would force the form to render in an element on the page with the HTML class of "sidebar".
Ensure that a comma is added right after the formId line so that the embed code is properly formatted. There should be a comma on every line where there is a parameter in the embed code, except for the final parameter.
Multiple instances of the same form change location
Sometimes, you may be embedding the same HubSpot form twice on an external page and the two instances of the form appear side by side or in the wrong location. This is caused by the form's embed code being placed in the same HTML <div> tag on the page. Please be aware that this behavior may not present itself immediately after embedding a HubSpot form on your external page.
In order to correct this, add the formInstanceId to the embed code, as shown below. Each instance of the form on a page will need a unique formInstanceId. We recommend that you number each form as it is added to the page (e.g. start with '1', then '2', etc.). Also, please ensure that a comma is added right after the formId line.
In addition to adding the formInstanceId attribute when you have the same form embedded multiple times on a page, you can also add the target attribute (outlined in the section above) to specify the <div> in which you'd like your embedded form to be located.
For more information about customizing a form's embed code, review our HubSpot developers documentation.