Форма HubsPot отображается в неправильном месте

Быстрая заметка о проблеме, которая иногда встречается с форматами HubSpot, неправильно отображающимися на сайтах.

Это происходит не всегда, но иногда формы HubSpot (при использовании стандартного кода вставки, который они предоставляют) не отображаются в правильном месте на странице.

Вместо нужного места они отображаются внизу страницы или выравниваться вдоль левой стороны браузера.

Это явление непостоянно и его трудно воспроизвести.

Я заметил это в некоторых системах управления контентом, которые оптимизировали рендеринг страниц, например, при использовании WordPress.

Выглядит это примерно так:

Оказывается, решение очень простое. Простое исправление заключается в том, чтобы обернуть код вставки в div с определенным id на странице.

Вот пример стандартного кода встраивания, который может предоставить HubSpot:

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
 hbspt.forms.create({ 
 portalId: '123456',
 formId: 'xxx-yyy-zzz'
 });
</script>

И вот как это выглядит с кодом вставки, завернутым в div и с заданным параметром target:

<div id="hsformContainer">
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
 hbspt.forms.create({ 
 portalId: '123456',
 target: '#hsformContainer',
 formId: 'xxx-yyy-zzz'
 });
</script>
</div>

Это простое исправление.

И форма отображается в нужном месте:

За решение проблемы спасибо xen.com.au.