フォームが外部ページで間違った場所に表示される

HubSpotフォームを外部ページに埋め込むと、希望とは異なる場所に表示されることがあります。

これは、フォームがページ上で動的にレンダリングされるためか、複数のフォーム埋め込みコードがページHTMLの同じ<div>タグに追加されることによる問題かもしれません。

これらの問題は、フォーム埋め込みコードをカスタマイズすることで解決できます。フォーム埋め込みコードのカスタマイズ について詳しくは、HubSpotの 開発者ドキュメントをご覧ください。

シングルフォーム

フォームがページ上で動的にレンダリングされ、異なる場所にロードされることがある。古いブラウザーでは、フォームが表示されないこともあります。

フォームがページの特定の部分に正常に読み込まれるようにするには、 フォーム埋め込みコード に target 属性を追加して、フォームを表示する特定のコンテナーを指定します。

例えば、sidebarというCSSクラスを使って、ページのコンテナー内にフォームを表示させることができます。フォーム埋め込みコードにtarget属性を追加する： 

1. フォーム埋め込みコードで、formIdの後にカンマ（,）を追加します。
2. 次に、新しい行を入力し、target: '[コンテナー名]' と入力する。

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "1234567",
formId: "f0123bdf-4cfa-47cd-8b61-15ce95286047",
 target: ".sidebar"
 });
</script>

複数のフォーム

同じHubSpotフォームを外部ページに複数回埋め込むと、フォームが並んで表示されたり、間違った場所に表示されたりすることがあります。これは、フォーム埋め込みコード がページHTML内の同じ <div> タグに追加された場合に発生します。 

フォームが正しく読み込まれ表示されるように、formInstanceId属性を追加し、各フォーム埋め込みコードに固有の値を指定します：

1. フォーム埋め込みコードで、formId属性値の後にカンマ（,）を追加します、
2. 改行して formInstanceId: '[number]'と入力します。
3. 各フォームをページに表示される順番に追加し、番号を付ける。たとえば、最初のフォームの場合は「1」、2 番目のフォームの場合は「2」などです。

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "1234567",
formId: "f0123bdf-4cfa-47cd-8b61-15ce95286047",
 formInstanceId: '1'
 });
</script>