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

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

更新日時 2025年 1月 14日

WordPressでは、クラシックエディターまたはGutenbergエディターを使ってHubSpotフォームを追加できます。

始める前に

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

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

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

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

最新バージョンのGutenbergを使用している場合、インラインJavaScriptが削除されてしまうため、代わりにGutenberg用のインラインJSブロックプラグインを使用して、フォームとCTAをページに埋め込んでください。

Gutenbergエディターを使ってWordPressのページや投稿記事にフォームを埋め込むには：

wordpress-hubspot-form-block

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

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

ページを公開した後、WordPressでフォームへの送信を表示するには、次のようにします。
- WordPressアカウントで、左のサイドバーメニューの［HubSpot］>［フォーム］に移動します。
- フォームにマウスポインターを合わせる。次に［アクション］ドロップダウンメニューをクリックし、［送信を表示］を選択します。フォーム送信の分析の詳細をご覧ください。

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

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