更新日時 2023年 3月 27日
外部ページに埋め込んだ HubSpot フォームが動作しない、または正しく表示されない場合、フォーム埋め込みに関する最も一般的な問題とトラブルシューティング方法について学びましょう。
フォームの埋め込みコードを確認する
外部ページの埋め込みコードが正しいかどうかを確認するには、HubSpotから提供されたフォーム埋め込みコードと、お客様のサイトにあるコードを比較してください：- HubSpotアカウントにて、［マーケティング］ > ［リードの獲得］ > ［フォーム］の順に進みます。
- フォームにカーソルを合わせ、[ 編集 ]をクリックします。
- フォームエディターの右上にある、「埋め込み」をクリックします。
- ダイアログボックスで［コピー］をクリックします。
- ブラウザーで、テキスト比較ツールである差分チェッカーに移動します。
- ［元のテキスト］セクションにフォーム埋め込みコードを貼り付けます。
- フォームが埋め込まれているウェブサイトのページに移動します。次に、ページ上の任意の場所で右クリックし、「ページソースを表示」を選択します。
- ページソースからフォームの埋め込みコードを探し出し、コピーします。
- Diff checkerに戻る。
- ［変更テキスト］セクションに外部エンベッドコードを貼り付けます。
- ［差分を検索］をクリックして、不足しているコードや破損したコードを探します。埋め込みコードが同じ場合は、「The two files are identical」というメッセージが表示されます。それ以外の場合は、違いがあれば赤と緑で強調表示されます。
外部で埋め込まれたコードがHubSpotのコードと一致しない場合は、外部ページで正しいコードを埋め込み直してください。
外部で埋め込まれたコードがHubSpotのコードと一致する場合、外部ページのHTMLまたはJavaScriptの何かが、フォームの埋め込みコードと干渉している可能性があります。開発者と協力して、さらにトラブルシューティングを行う必要があります。
ホスティングする側の課題
WordPress、Squarespace、Wixを使用している場合、以下の各ウェブサイトホストで、以下の問題のトラブルシューティングを続けることができます。
WordPress
WordPressのページにフォームが埋め込まれている場合、以下のような問題が発生する可能性があります：
- WordPressでは埋め込まれたフォームコードの「&」を「&」に変換する場合があり、コードの誤作動の原因となります。
- XHTMLのWordPressテーマでは、JavaScriptの周りに<![CDATA[ ]]>タグが追加されます。フォームのレンダリングには影響しませんが、フォームの埋め込みコードを確認する際に注意することがあります。
WordPressが埋め込みコードを変更している場合は、Insert HTML Snippetなどのサードパーティ製プラグインを使用して、ショートコードとしてページや投稿にフォームを追加し、scriptタグを保持することが推奨されます。
Squarespace
Squarespaceのテンプレートの中には、最初のページロード時のみスクリプトをレンダリングし、他のページではレンダリングしないものがあります。その結果、訪問者がウェブサイトを移動する際にフォームスクリプトが読み込まれないため、HubSpotのフォームが一部のページで正しく機能しないことがあります。
これを防ぐには、SquarespaceのAjaxローディングを無効にしてみてください。これがうまくいかない場合は、別のSquarespaceのテンプレートを使ってみるのもよいでしょう。
Wix
Wixは通常、ホスティングするウェブサイトでのカスタムコーディングをサポートしていません。そのため、HubSpotのフォームをWixのページに直接埋め込むことはできません。
WixページにHubSpotフォームを追加するには、まずWix iframeモジュールを追加し、フォームの埋め込みコードを入力してウィジェットとして、またはフォームのスタンドアロンページのURLを入力して埋め込みサイトとして、モジュールにフォームを追加してみてください。
ブラウザー固有の問題点
Ghosteryのようなリソースをブロックするブラウザー拡張機能を使用している場合、HubSpotフォームの読み込みと表示がブロックされることがあります。HubSpotのフォームがブロックされるとどうなるか、詳しくはこちらをご覧ください。
