お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
HubSpotフォームをWordPressページと投稿に追加
更新日時 2023年 3月 28日
対象製品
すべての製品とプラン |
HubSpotオールインワンマーケティング–フォーム、ポップアップ、ライブチャットWordPressプラグインを正常にインストールしたら、WordPressページと投稿にHubSpotフォームを追加できます。
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 >フォームに移動します。
- フォームの上にカーソルを置きます。次に、[操作]ドロップダウンメニューをクリックし、[送信を表示]を選択します。フォーム送信の分析の詳細をご覧ください。
Gutenbergエディター
インラインJavaScriptを削除する最新バージョンのGutenbergを使用している場合は、代わりにGutenbergプラグインのインラインJSブロックを使用して、フォームとCTAをページに埋め込みます。
Gutenbergエディターを使用してWordPressのページや投稿にフォームを埋め込むには:
- WordPressアカウントで、ページまたは投稿に移動します。
- ツールバーのプラスアイコンをクリックします。HubSpotフォームブロックを検索し、クリックしてコンテンツに追加します。
- ブロックでは、既存のフォームを選択するか、新しいフォームを作成できます。
- 既存のフォームを選択するには、[既存のフォームを選択]ドロップダウンメニューをクリックし、フォームを選択します。
- 新しいフォームを作成するには、左サイドバーメニューの[HubSpot] > [フォーム]に移動し、[フォームの作成]をクリックします。
- ページを公開した後、WordPressのフォームへの投稿を表示するには:
- WordPressアカウントから、左側のサイドバーメニューで、HubSpot >フォームに移動します。
- フォームの上にカーソルを置きます。次に、[操作]ドロップダウンメニューをクリックし、[送信を表示]を選択します。フォーム送信の分析の詳細をご覧ください。
Integrations
貴重なご意見をありがとうございました。
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。
関連記事
-
HubSpotに接続してデータを同期する
HubSpotデータ同期を使用すると、...
ナレッジベース -
HubSpotとMicrosoft Teamsの連携
Microsoft TeamsアカウントをHubSpotに接続すると、Microsoft Teamsのミーティングリンクをコンタクトに送信したり、Microsoft...
ナレッジベース -
HubSpotとZoomの連携機能を使用する
Zoom連携を使用すると、ビデオ会議リンクをHubSpotのスケジュール設定ページに追加できます。HubSpotサブスクリプションに応じて、ワークフローを使用してZoomウェビナーに登録者を追加したり、...
ナレッジベース