Forms

Why has my embedded form moved on my page?

Last updated: December 13, 2016

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A

Scenario #1: One form instance moves location on an External Page

If you are embedding a HubSpot form on an external, non-HubSpot 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.

You can 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 targetting 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".

User-added image
User-added image

Please 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.

Scenario #2: Multiple Instances of the same Form moves location on an External Page

Sometimes, you may be embedding the same HubSpot form twice on an external, non-HubSpot page, and you may find that the two instances of the form may appear side by side or one may have moved from its intended 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.

Now, in order to correct this, add the formInstanceId to the embed code, as exemplified below.

User-added image
User-added image

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 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, please review our HubSpot Developers site at https://developers.hubspot.com/docs/methods/forms/advanced_form_options.