更新日時 2021年 3月 9日
フォームツールを使用すると、ウェブサイトへの訪問者から情報を収集できるため、自社とやり取りを行った訪問者に対するマーケティング、販売、サービス提供が可能になります。HubSpot上で作成したフォームは、HubSpotページに追加したり、HubSpotの外部で作成したページに追加したりできます。フォームはHubSpot以外でホスティングされた外部サイトに対しても、次の2つの方法で共有できます。1つはフォームコードを既存のページに埋め込む方法、もう1つはリンク可能なスタンドアロン フォーム ページを作成する方法です。
どちらの方法でも、HubSpotフォームツールでフォームに加えた変更が外部サイトで公開中のフォームに自動的に反映されます。
WordPressを使用している場合は、フォームをWordPressの記事またはページに挿入する方法をご覧ください。
フォーム埋め込みコードを追加する
注：Salesforceキャンペーンをフォームに関連付けると、フォームの埋め込みコードが変更されます。この場合、外部サイトに埋め込みコードを再追加する必要があります。
- HubSpotアカウントにて、［マーケティング］ > ［リードの獲得］ > ［フォーム］の順に進みます。
- 新しいフォームを作成するか、または既存のフォームにカーソルを置いて［アクション］ドロップダウンメニューをクリックし、［フォームを編集］を選択します。
- ［オプション］タブをクリックし、訪問者がフォームを送信した後の処理を選択します。訪問者がフォームを送信したときに、訪問者をサンキューページにリダイレクトするか、インラインのサンキューメッセージを表示するかを選択できます。
- フォームエディターの右上にある［共有］をクリックします。
- フォームを送信したコンタクトをSalesforceキャンペーンに追加する場合は、ダイアログボックスで、［コンタクトをSalesforceキャンペーンに追加］ドロップダウンメニューをクリックし、キャンペーンを選択します。
- ［コピー］をクリックします。
- 右上の［公開］をクリックします。
- 埋め込みコードを外部ページのHTMLモジュールに貼り付けます。フォームの分析情報を追跡するには、HubSpotのフォームを配置する外部ページに、HubSpotトラッキングコードがインストールされている必要があります。HubSpotでは、HubSpotトラッキングコードがインストールされていないフォームでもフォーム送信は収集されますが、そのフォームの分析情報は記録されません。
WordPressを使用している場合は、フォームをWordPressの記事またはページに挿入する方法をご覧ください。
スタンドアロン フォーム ページを作成する
フォームはフォームページを介して共有できます。つまりフォーム自体が専用のURL上のページとして存在できます。
- HubSpotアカウントにて、［マーケティング］ > ［リードの獲得］ > ［フォーム］の順に進みます。
- 新しいフォームを作成するか、または既存のフォームにカーソルを置いて［アクション］ドロップダウンメニューをクリックし、［フォームを編集］を選択します。
- 右上にある［共有］をクリックします。
- ダイアログボックスで［リンクを共有］タブをクリックします。
- ［コピー］をクリックして、フォームページのURLをクリップボードにコピーします。
- 右上の［公開］をクリックします。
- ブラウザーで、新しいウィンドウまたはタブを開き、フォームページのURLをアドレスバーに貼り付けて読み込みます。フォームページのURL自体を共有して、直接フォームにアクセスしてもらうこともできます。
WordPressでフォームが機能していない場合、または公開ページを表示した際に埋め込みコードが変更されている場合は、フォームの挿入にプラグインを使用して埋め込みコードの変更を回避しなければならないことがあります。最新バージョンのGutenbergを使用している場合、インラインJavaScriptが削除されるため、Gutenberg用のインラインJSブロックプラグインを使用して、フォームとCTAをページに埋め込んでください。
外部ページ上の埋め込みフォームのスタイルを設定する
外部ページに埋め込まれたHubSpotフォームのスタイルを設定するには、フォームエディターを使用する方法と、外部スタイルシート内でCSSを使用する方法の2つがあります。
フォームエディターの場合
テーマ
カスタムコードを記述せずにフォームにスタイルを設定する場合は、埋め込みフォームまたはスタンドアロン フォーム ページにプリセットテーマを適用できます。テーマにより、フォームにグローバル フォーム スタイル設定に加えて、カスタマイズオプションが追加されます。
- HubSpotアカウントで、［マーケティング］>［リードの獲得］>［フォーム］の順に進みます。
- フォームの名前をクリックします。
- フォームエディターで［スタイルとプレビュー］タブをクリックします。
- 左側ペインの［テーマ］セクションで、［以前のテーマをそのまま使用］チェックボックスをオフにします。
注：［以前のテーマをそのまま使用］チェックボックスをオフにすると、このフォームに適用されていた既定のHubSpotスタイル設定が削除されます。フォームに追加したカスタムCSSまたはJavaScriptは機能しなくなります。このチェックボックスは古いフォームの場合にのみ使用できます。アカウント上に新しく作成したフォームにはありません。
- 4つのテーマからいずれかを選択します。
スタイル（Marketing Hub Starter、Professional、Enterprise、 またはMarketing Hub Basic（旧製品）のみ）
テーマに加えて、より詳細なレベルで埋め込みフォームをスタイル設定できます。
- HubSpotアカウントで、［マーケティング］>［リードの獲得］>［フォーム］の順に進みます。
- フォームの名前をクリックします。
- フォームエディターで［スタイルとプレビュー］タブをクリックします。
- 左側のペインで、［スタイル］セクションをクリックして展開します。ここでは、フォームフィールドの幅、フォントファミリー、フォントサイズ、フォントの色、フォームボタンをスタイル設定できます。
これらのスタイルは個別のフォームに設定され、グローバル フォーム スタイル設定よりも優先されます。
注：フォームエディター上で設定するテーマとスタイルは、埋め込みフォームまたはスタンドアロン フォーム ページにのみ適用されます。HubSpotページ上のフォームのスタイルは、コンテンツエディターのフォーム モジュール スタイル オプションでのみ設定できます。
外部スタイルシート内のCSSによるフォームスタイル設定（Marketing HubおよびCMS Hub ProfessionalまたはEnterprise、またはMarketing Hub Basic（旧製品）のみ）
- HubSpotアカウントで、［マーケティング］>［リードの獲得］>［フォーム］の順に進みます。
- フォームの名前をクリックします。
- フォームエディターで［スタイルとプレビュー］タブをクリックします。
- ［未加工のHTMLフォームとして設定］スイッチをクリックしてオンに切り替えます。フォームは、iFrame内ではなく、外部ページ上の未加工のHTML要素として表示され、フォームに適用されていた既定のHubSpotスタイルはすべて削除されます。
- 右上にある［共有］をクリックします。
- ダイアログボックスで［コピー］をクリックしてフォームの埋め込みコードをコピーします。
- 外部ページに、フォームの埋め込みコードを追加します。埋め込み済みのフォームがある場合は、既存のコードをこのスタイル未設定のバージョンで置き換える必要があります。
- フォームの埋め込み後、外部スタイルシート内のCSSを使用してフォームのスタイルを設定できます。
- または、フォームの埋め込みコードを変更して、フォームをさらにカスタマイズすることもできます。HubSpotフォームはHTMLではなくJavaScriptを使用して作成されているため、フォームの埋め込みコードのカスタマイズには、JavaScriptに習熟した開発者との連携が必要になります。
