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でフォームへの送信を表示するには、次のようにします。
Gutenbergエディター
インラインJavaScriptが削除される最新バージョンのGutenbergを使用している場合は、 Inline JS Block for Gutenbergプラグイン を使用して、代わりにHubSpotのレガシーフォームとCTAをページに埋め込みます。
グーテンベルクエディターを使用してWordPressのページや記事にHubSpotの旧フォームを埋め込むには、次のようにします。
- WordPressアカウントで、ページまたは投稿に移動します。
- ツールバーのプラスアイコンをクリックします。HubSpotフォームのブロックを探し、それをクリックしてコンテンツに追加します。
- ブロックでは、既存のフォームを選択するか、新しいフォームを作成できます:
- 既存のフォームを選択するには、[既存のフォームを選択]ドロップダウンメニューをクリックし、フォームを1つ選択します。
- 新しいフォームを作成するには、左側のサイドバーメニューで[HubSpot]>[フォーム]の順に進み、[フォームを作成]をクリックします。