お客さまへの大切なお知らせ：膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。

HubSpotフォームをWordPressページと投稿に追加

更新日時 2023年 3月 28日

WordPressでは、クラシックエディターまたはグーテンベルクエディターからHubSpotフォームを追加できます。

始める前に

開始する前に、次の点にご注意ください。

WordPressサイトにフォームを埋め込む場合は、フォームをレスポンシブにするために外部スタイルシート内に追加のCSS宣言を適用する必要がある場合があります。
WordPressでフォームが動作していないこと、またはライブページを表示したときに埋め込みコードが変更されていることに気づいた場合は、埋め込みコードがそのままであることを確認するために、プラグインを使用してフォームを挿入する必要がある場合があります。
Contact Form 7やNinja Formsなど、別のフォームプラグインを使用している場合は、HubSpotでサブミッションを収集できます。サポートされているフォームのテーブルを確認し、非HubSpotフォームの使用方法を学習します。
WordPressでサポートされている非HubSpotフォームを使用しているが、HubSpotにサブミッションデータが表示されない場合は、HubSpot - WordPressプラグインと競合する別のWordPressプラグインがインストールされている可能性があります。該当するプラグインを無効にするか、よくある質問を確認して、追加のトラブルシューティング手順を確認してください。

クラシックエディターを使用してWordPressのページや投稿にフォームを埋め込むには:

WordPressアカウントから、左側のサイドバーメニューで、HubSpot >フォームに移動します。
ウェブサイトに追加したいフォームの上にカーソルを置き、［ショートコードをコピー］をクリックします。［フォームを作成］をクリックして、新しいHubSpotフォームを作成することもできます。
WordPressページまたは投稿に移動し、ショートコードをページエディターに貼り付けます。
ページを公開した後、WordPressのフォームへの投稿を表示するには:
- WordPressアカウントから、左側のサイドバーメニューで、HubSpot >フォームに移動します。
- フォームの上にカーソルを置きます。次に、[操作]ドロップダウンメニューをクリックし、[送信を表示]を選択します。フォーム送信の分析の詳細をご覧ください。

インラインJavaScriptを削除する最新バージョンのGutenbergを使用している場合は、代わりにGutenbergプラグインのインラインJSブロックを使用して、フォームとCTAをページに埋め込みます。

Gutenbergエディターを使用してWordPressのページや投稿にフォームを埋め込むには:

wordpress-hubspot-form-block

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

wordpress-hubspot-form-select-an-existing-form

ページを公開した後、WordPressのフォームへの投稿を表示するには:
- WordPressアカウントから、左側のサイドバーメニューで、HubSpot >フォームに移動します。
- フォームの上にカーソルを置きます。次に、[操作]ドロップダウンメニューをクリックし、[送信を表示]を選択します。フォーム送信の分析の詳細をご覧ください。

この記事はお役に立ちましたか？はいいいえ

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