HubSpotのフォームを外部ページに組み込むことは、サイトのユーザーエクスペリエンスを高め、リード獲得を増加させる重要な戦略とされています。
そこで今回は、HubSpotのフォームを他のページに効果的に組み込む手順を解説していきます。
HubSpotのフォームは、ユーザーが問い合わせや登録を行う際、簡単に情報を入力できるようにする機能で、搭載されているさまざまなオプションなど、使い方次第で効果的なリード獲得を狙えます。
そしてHubSpotのフォームの埋め込みをすることは、ウェブサイトやランディングページでのリード獲得に効果的とされており、外部ページに埋め込むことも可能です。
HubSpotのフォームは、ウェブサイトの訪問者が情報を提供するために使用されます。これらのフォームは、顧客のデータを収集し、そのデータを活用してマーケティング戦略を行うための重要なツールです。
まず、HubSpotのフォームの設定についてです。HubSpotでは、あらかじめ定義されたフィールドを使用してフォームを作成することができます。これには、名前、メールアドレス、電話番号などの一般的な情報が含まれます。そしてカスタムフィールドを作成すれば特定の情報を収集することも可能です。
次に、HubSpotのフォームの使用方法について。作成したフォームは、ウェブサイトの任意のページに埋め込むことができます。フォームは、訪問者が情報を入力し、「送信」ボタンをクリックすると、その情報はHubSpotのデータベースに保存されます。この情報は、後で顧客の行動を分析したり、マーケティングキャンペーンを作成する際にも役立ちます。
それでは具体的なフォームの作成と設定方法について詳しくみていきましょう。
まず、HubSpotのダッシュボードからフォームを作成し、その後に生成される埋め込みコードを取得。次に、このコードを外部ページの適切な位置に貼り付けることで、フォームが表示されるようになります。
フォームを埋め込むには次の２つの方法があります。
HubSpotのフォームエディタは、フォームを自由にカスタマイズし、外部ページに埋め込みを行えます。
スタイル設定は、フォームの視覚的な要素を調整するためのもので、フォームの色、テキストのサイズとフォント、ボタンのスタイル、バックグラウンド色などが調整できます。これらの設定を調整することで、フォームを自社のブランドやウェブサイトのデザインに合わせることができます。
具体的な設定の方法は、各項目をクリックし、ドロップダウンメニューから選択するか、値を直接入力するだけです。（※一部の設定ではオプションもあります。）
これでフォームのスタイル設定が完了し、このフォームを外部ページに埋め込む準備が整いました。
この方法は、ウェブサイトの既存のデザインやブランドイメージにフォームを自然に溶け込ませるためのものです。埋め込みフォームは基本的にはHubSpotのデフォルトスタイルで表示されますが、CSSを使用することでフォームの見た目を自由に調整することが可能です。
このコードにはフォームの基本的なスタイルが含まれていますが、それを上書きするためのCSSを外部スタイルシートに追加してください。具体的には、フォームの各要素に対応するセレクタにスタイルルールを設定します。例えば、テキストボックスの背景色を変更したい場合は、該当するセレクタに対して背景色を指定するCSSルールを追加します。
＜２-１＞HubSpotのフォームエディターから生成されたコードを、埋め込む予定のウェブページの適切な位置に追加。
この時点で、フォーム自体の表示は可能ですが、デザインがウェブサイトの全体的なスタイルと一致していない可能性があるので注意してください。
＜２-２＞カスタムCSSを使用してフォームの視覚的なスタイルを調整。
CSSはウェブページのデザイン要素を制御するための言語で、フォームの色、サイズ、レイアウトなどを変更することができます。このプロセスは、HTMLとCSSの基本的な知識を必要としますが、HubSpotフォームを完全にカスタマイズし、ウェブサイトのブランドイメージに一致させるための鍵となります。
HubSpotはユーザーフレンドリーなインターフェースを備えており、エディター内で簡単にフォーム設定を行うことができます。フォームのフィールドを追加したり、フィールドの順序を変更、必須フィールドの設定が可能です。また、フォームにはさまざまな種類のフィールドも追加できます。例えば、テキストボックス、ドロップダウンリスト、チェックボックス、ラジオボタンなど。
次に、HubSpotのフォームを外部ページに埋め込むためには、フォームの埋め込みコードを取得する必要があります。
＜３-１＞エディター内でフォームを設定した後、[共有]ボタンをクリック。
＜３-２＞表示される埋め込みコードをコピー。
＜３-３＞このコードをHTMLの<body>タグ内にペースト。
するとフォームを外部ページに埋め込むことができます。
しかし、この方法だけでは、フォームのスタイルが自分のウェブサイトのデザインと合わない場合があります。そのため、HubSpotではフォームエディター内でスタイル設定を行うことも可能です。フォームの色、フォント、ボーダーなどを自分のウェブサイトのデザインに合わせて調整してみましょう。
HubSpotのフォームを外部ページに埋め込んだ後、次に重要となるのがそのスタイルの調整です。ウェブサイトやブログのデザインに合わせて、フォームの外観を調整することで、訪問者が自然と情報を入力したくなるような仕組みを作ります。
HubSpotでは、フォームエディター内で基本的なスタイル設定を行うことが可能です。これには、フィールドのサイズや色、フォントのスタイルなど、基本的な要素の調整が含まれます。一方、より高度なスタイル調整を行いたい場合は、外部スタイルシート内のCSSを利用することで可能となります。ここでは、独自のコードを追加したり、カスタムCSSを使用したりすることで、フォームの見た目をよりイメージに近づけることができます。
スタイルシートとモジュールは、HubSpotフォームのスタイル調整において重要な役割を果たします。
しかし、スタイルシートやモジュールを使用する際は、HTMLとCSSの基本的な知識が必要となります。特に、CSSは見た目を制御するための言語であるため、その構文やプロパティを理解していないと、意図した通りのデザインにならない可能性あるので注意が必要です。また、HubSpotのフォームのスタイルを調整する際は、フォームのデザインがウェブサイトやブログの全体のデザインと一致するようにし、ユーザーフレンドリーなデザインを心掛けることが大切です。
HubSpotのフォームスタイルをさらにカスタマイズしたい場合は、外部エディタでCSSを作成し適用することが可能です。HubSpotのフォームの各要素にクラス名を追加し、そのクラス名に対応したスタイルをCSSで定義することで、詳細なスタイル調整が行えます。例えば、特定のフィールドの背景色を変更したり、ボタンの形状やフォントのスタイルを一新したりするなど。
しかし、CSSは間違った記述をすると、フォームが正しく表示されなくなることもありますので注意してください。また、CSSによるスタイル調整はあくまで補助的なものであり、基本的なスタイル調整はフォームエディタ内で行うことをお勧めします。具体的なCSSの記述方法や適用方法についてはこちらです。
一部のCMSでは、HTMLモードでページを編集する必要があります。
そうすることで、ウェブサイトのビジターはHubSpotのフォームを通じて直接貴社のデータベースに情報を提供でき、その結果、より効果的なリード管理と顧客関係の構築を可能とします。また、HubSpotのダッシュボードからは、フォームを通じて得た情報をリアルタイムで確認できます。
HubSpotのフォームを自社のウェブサイトや外部のCMSに適切に埋め込むには、これまでと少し方法が異なります。
（１）HubSpotアカウントにログイン後、[マーケティング]>[リードキャプチャ]>[フォーム]の順に進んでください。
（２）埋め込むフォームを選択し、[共有]>[埋め込みコード]をクリック。
（３）表示された埋め込みコードをコピーし、外部CMSの該当ページに貼り付けます。
フォームを正しく表示するためには、CMS側でもいくつかの設定が必要となる場合があります。フォームが正しく動作しない、またはデザインが崩れる可能性があるため、使用しているCMSの設定確認は必須です。
また、HubSpotのフォームはレスポンシブデザインに対応しているため、スマートフォンやタブレットからのアクセスにも適応することができます。しかし、これまたCMSのテーマやプラグインによっては、このレスポンシブデザインが崩れる場合もありますので
CMSにHubSpotのフォームを埋め込むことで、ウェブサイトのユーザー体験を向上させ、より効率的なリード生成を実現することが可能となります。また、スタイル調整を行うことでフォームを自社ブランドに合わせ、より一貫したビジュアル体験を提供できます。
HubSpotのフォームの設定、埋め込み、スタイル調整は一見複雑に思えるかもしれませんが、本記事の具体的な手順と説明を参考に進めていただければ、誰でも簡単に実施できます。ぜひHubSpotのフォームを活用してみてください。