HubSpotフォームをWordPressページと投稿に追加
更新日時 2023年 1月 19日
対象製品
すべての製品とプラン |
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 >フォームに移動します。
- フォームの上にカーソルを置きます。次に、[操作]ドロップダウンメニューをクリックし、[送信を表示]を選択します。フォーム送信の分析の詳細をご覧ください。
関連記事
-
Slackで通知を管理する
SlackアプリをHubSpotのアカウントに接続しした後、HubSpotのユーザー通知、コミュニケーションの通知、通話やメモの通知をSlackのメッセージとして受け取ることができます。 ワークフローツール...
ナレッジベース -
HubSpotとSansanを接続する
HubSpotとSansanのアカウントの連携により、Sansanに登録された名刺情報をHubSpotアカウントに同期することが可能です。この連携ではデータ同期機能を使用しています。 ...
ナレッジベース -
HubSpotとMicrosoft Teamsの連携
Microsoft TeamsアカウントをHubSpotに接続すると、Microsoft Teamsのミーティングリンクをコンタクトに送信したり、Microsoft...
ナレッジベース