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

WordPressのページや記事へのHubSpotフォームの追加(旧)

更新日時 2025年 2月 19日

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

すべての製品とプラン

HubSpot – CRM、Eメールマーケティング、ライブチャット、フォーム、 & アナリティクスプラグイン正常にインストールしたら HubSpotレガシーフォームWordPressページ や投稿に追加できます。

注: この記事は、 レガシーエディター のみを使用して作成された既存のフォームについてのみ参照しています。現時点では、 更新されたフォームエディター を使用して作成したHubSpotフォームをWordPressページや投稿に埋め 込むことはできません。更新されたフォームエディター を使用したフォームの作成と管理の詳細をご覧ください。

WordPressでは、クラシックエディターまたはグーテンベルクエディターを使用してHubSpotのレガシーフォームを追加できます。

始める前に

始める前に、以下のことに注意してください:

  • WordPressサイトにフォームを埋め込む場合、フォームをレスポンシブにするには、外部スタイルシート内に追加のCSS宣言を適用する必要が生じることがあります。
  • フォームが WordPress で動作しない、または公開中のページを表示したときに埋め込みコードが変更されていることにお気づきの場合は、埋め込みコードがそのまま維持されるようにプラグインを使用してフォームを挿入する必要があるかもしれません。
  • Contact Form 7またはNinja Formsなどの別のフォームプラグインを使用している場合、送信をHubSpotで集めることができます。サポートされているフォームの表を確認し、HubSpot以外のフォームの使用方法を学んでください。
  • HubSpot以外のサポートされているフォームをWordPressで使用していて、HubSpot上で送信データを確認できない場合、HubSpot-WordPressプラグインの動作と競合する別のWordPressプラグインがインストールされている場合があります。プラグインを無効にするか、よくある質問でトラブルシューティングの手順を確認してください。

クラシックエディター

クラシックエディターを使用してHubSpot(旧)フォームをWordPressページや記事に埋め込むには、次のようにします。

  • WordPressアカウントで、左のサイドバーメニューの[HubSpot]>[フォーム]に移動します。 
  • ウェブサイトに追加したいフォームの上にマウスポインターを置き、[埋め込み]をクリックします。[フォームを作成]をクリックして、新しいHubSpotフォームを作成することもできます。
  • [WordPressショートコード]をクリックしてから[コピー]をクリックして、エンベッドコードをコピーします。 
  • WordPressのページまたは投稿に移動し、ショートコードをページエディターに貼り付けます。
  • ページを公開した後、WordPressでフォームへの送信を表示するには、次のようにします。
    • WordPressアカウントで、左のサイドバーメニューの[HubSpot]>[フォーム]に移動します。
    • フォームにマウスポインターを合わせる。次に[アクション]ドロップダウンメニューをクリックし、[送信を表示]を選択します。フォーム送信の分析について詳しくはこちら

Gutenbergエディター

インラインJavaScriptが削除される最新バージョンのGutenbergを使用している場合は、 Inline JS Block for Gutenbergプラグイン を使用して、代わりにHubSpotのレガシーフォームとCTAをページに埋め込みます。

グーテンベルクエディターを使用してWordPressのページや記事にHubSpotの旧フォームを埋め込むには、次のようにします。 

  • WordPressアカウントで、ページまたは投稿に移動します。 
  • ツールバーのプラスアイコンをクリックします。HubSpotフォームのブロックを探し、それをクリックしてコンテンツに追加します。

  • ブロックでは、既存のフォームを選択するか、新しいフォームを作成できます:
    • 既存のフォームを選択するには、[既存のフォームを選択]ドロップダウンメニューをクリックし、フォームを1つ選択します。
    • 新しいフォームを作成するには、左側のサイドバーメニューで[HubSpot]>[フォーム]の順に進み、[フォームを作成]をクリックします。

  • ページを公開した後、WordPressでフォームへの送信を表示するには、次のようにします。
    • WordPressアカウントで、左のサイドバーメニューの[HubSpot]>[フォーム]に移動します。
    • フォームにマウスポインターを合わせる。次に[アクション]ドロップダウンメニューをクリックし、[送信を表示]を選択します。フォーム送信の分析について詳しくはこちら
この記事はお役に立ちましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。