お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
Forms

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

更新日時 2020年 10月 19日

対象製品

すべての製品とプラン

HubSpot フォームを外部ページに埋め込むと、異なる場所に表示される場合があります。その原因として、フォームがページで動的に表示されることや、複数のフォーム埋め込みコードをページ HTML の同じ <div> タグに追加したことによる問題が考えられます。

フォームがページで動的に表示される

フォームがページで動的に表示され、異なる場所に読み込まれる場合があります。フォームがページの特定の場所に読み込まれるようにするには、フォーム埋め込みコードtarget 属性を追加して、フォームを表示するコンテナを指定します。

フォーム埋め込みコードで、formId 属性値の後にコンマ (,) を追加し、新しい行を入力して「target: '[コンテナ名]'」と入力します。たとえば、sidebar の CSS クラスを使用してページのコンテナにフォームを表示するように強制することができます。

ユーザー追加画像

HubSpot の開発者ドキュメントでフォーム埋め込みコードのカスタマイズについて詳細を確認してください。

複数のフォーム埋め込みコードを同じ <div> タグに追加した場合

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

フォームが正しく読み込まれて表示されるようにするには、formInstanceId 属性を追加して各フォーム埋め込みコードに一意の値を指定します。フォーム埋め込みコードで、formId 属性値の後にコンマ (,) を追加し、新しい行を入力して「formInstanceId: '[番号]'」と入力します。ページに表示される順番に各フォームに番号を付けることをお勧めします (例: 最初のフォームには「1」、2 番目のフォームには「2」など)。

ユーザー追加画像
ユーザー追加画像

フォームが古いブラウザに読み込まれない

古いブラウザでは、一部の Javascript が HubSpot の埋め込みコードと競合して、フォームが読み込まれない場合があります。

フォームの読み込みと表示が正しくなされるようにするには、フォーム埋め込みコードごとに target 属性を追加して、フォームを表示する特定のコンテナを指定することができます。

フォーム埋め込み-ターゲット

HubSpot の開発者ドキュメントでフォーム埋め込みコードのカスタマイズについて詳細を確認してください。