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

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

更新日時 2023年 1月 19日

以下の 製品でご利用いただけます(別途記載されている場合を除きます)。

すべての製品とプラン

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

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

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

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

ユーザー追加画像

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

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

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

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

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

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

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

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

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

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

この記事はお役に立ちましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。