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

外部サイトでのHubSpotフォームの共有

更新日時 2020年 7月 20日

対象製品

すべての製品とプラン

フォームは外部の、非HubSpotホストサイトで2つの方法で共有できます。

どちらの方法でも、HubSpotフォームツールでフォームに加えた変更は、外部サイトで公開中のフォームに自動的に反映されます。

HubSpotフォームをWordPressページまたは投稿に追加する方法について説明します。

フォーム埋め込みコードを追加する

注:Salesforceキャンペーンをフォームに関連付けると、フォームのエンベッドコードが変更されます。この場合、外部サイトに埋め込みコードを再追加する必要があります。

  • HubSpotアカウントにて、[マーケティング] > [リードの獲得] > [フォーム]の順に進みます。
  • 新しいフォームを作成するか、または既存のフォームにカーソルを置き、[アクション]ドロップダウンメニューをクリックし、[フォームを編集]を選択します。
  • [オプション]タブをクリックし、訪問者がフォームを送信した後何が起こるかを選択します。訪問者がフォームを送信したときに、訪問者をサンキューページにリダイレクトするか、インラインのサンキューメッセージを表示するかを選択できます。
  • フォームエディターの右上にある[共有]をクリックします。
  • ダイアログボックスで、フォームをSalesforceキャンペーンに送信したコンタクトを追加する場合は、[コンタクトをSalesforceキャンペーンに追加]ドロップダウンメニューをクリックし、キャンペーンを選択します。
  • [コピー]をクリックします。
    forms-editor-share-form-copy-form-embed
  • 右上の[公開]をクリックします。 
  • 外部ページのHTMLモジュールに埋め込みコードを貼り付けます。フォームをトラッキングするには、HubSpotのフォームを配置する外部ページに、HubSpotトラッキングコードがインストールされている必要があります。

埋め込みフォームのスタイルする方法を学習します。

WordPressを使用している場合は、フォームをWordPressの投稿またはページに挿入する方法を学習します。

スタンドアロン フォーム ページを作成する 

フォームはフォームページを介して共有できます。つまりフォームは自身のURLで自身のページに存在します。  

  • HubSpotアカウントにて、[マーケティング] > [リードの獲得] > [フォーム]の順に進みます。 
  • 新しいフォームを作成するか、または既存のフォームにカーソルを置き、[アクション]ドロップダウンメニューをクリックし、[フォームを編集]を選択します。
  • 右上にある[共有] をクリックします。
  • ダイアログボックスで[リンクをシェア]タブをクリックします。 
  • [コピー]をクリックして、フォームページのURLをクリップボードにコピーします。

share-form-own-page

  • 右上の[公開]をクリックします。
  • ブラウザーで、新しいウィンドウまたはタブを開き、それを読み込むために、フォームページのURLをアドレスバーに貼り付けます。フォームページURLを直接他のフォームにアクセスできるようにすることもできます。
WordPressサイトにフォームを埋め込んでいる場合、フォームをレスポンシブなものにするため、外部スタイルシート内で追加のCSS宣言を適用することが必要な場合があります。

WordPressでフォームが機能していないことに気付いた場合、公開ページを表示して埋め込みコードが変更されていることに気づいた場合、埋め込みコードが変更を加えられていない状態に保たれるようにプラグインを使用してフォームを挿入することが必要な場合があります。最新バージョンのGutenbergを使用している場合、インラインJavaScriptが削除されるため、Gutenberg用インラインJSブロックプラグインを使用することにより、フォームとCTAをページに埋め込むようにしてください。

/jp/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site