外部で埋め込まれたHubSpotフォームのトラブルシュート

外部ページに埋め込んだ HubSpot フォームが動作しない、または正しく表示されない場合、フォーム埋め込みに関する最も一般的な問題とトラブルシューティング方法について学びましょう。

フォームの埋め込みコードを確認する

• HubSpotアカウントにて、［マーケティング］＞［フォーム］の順に進みます。
• フォームの上にカーソルを重ねて［編集］をクリックします。
• フォームエディターの右上にある、「埋め込み」をクリックします。
• ダイアログボックスで［コピー］をクリックします。

• ブラウザーで、テキスト比較ツールである差分チェッカーに移動します。 
• [元のテキスト]セクションに、フォームの埋め込みコードを貼り付けます。

• フォームが埋め込まれているウェブサイトのページに移動します。次に、ページ上の任意の場所で右クリックし、「ページソースを表示」を選択します。 
• ページソースからフォームの埋め込みコードを探し出し、コピーします。
• Diff checkerに戻る。
• ［変更テキスト］セクションに外部エンベッドコードを貼り付けます。
• ［差分を検索］をクリックして、不足しているコードや破損したコードを探します。埋め込みコードが同じ場合は、「The two files are identical」というメッセージが表示されます。それ以外の場合は、違いがあれば赤と緑で強調表示されます。

外部で埋め込まれたコードがHubSpotのコードと一致しない場合は、外部ページで正しいコードを埋め込み直してください。

外部で埋め込まれたコードがHubSpotのコードと一致する場合、外部ページのHTMLまたはJavaScriptの何かが、フォームの埋め込みコードと干渉している可能性があります。開発者と協力して、さらにトラブルシューティングを行う必要があります。

サイトドメインを追加する 

フォームが埋め込まれている外部ページのドメインを追加の サイトドメイン として HubSpot に追加します。追加されていないページからのフォーム送信は スパムとマークされます。 

ホスティングする側の課題

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フォームがブロックされた場合の動作についてもっと詳しく。