Быстрая заметка о проблеме, которая иногда встречается с форматами 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.