ハブスポットのフォーム機能の特徴と使い方｜CSSとカスタマイズ性

ハブスポットは、マーケティングオートメーションの代表的なツールです。ハブスポットは多様な機能があり、フォーム作成機能も実装しています。

しかし、「初めてハブスポットでフォームを作成するから、手順やカスタマイズの方法がわからない…」と戸惑っていませんか？

この記事では、ハブスポットフォームの特徴と機能、ハブスポットフォームの作成手順を解説します。

▼ビジネスで使うなら「formrun」がおすすめ。
formrunは、非エンジニアでも簡単にフォームを作成できます。120種類以上のデザイン性の高いテンプレートから自社にぴったりのものを選び、ドラッグ&ドロップ操作で必要な項目を設定するだけです。セキュリティ対策も万全なので、ビジネスでも安心してご利用いただけます。メールアドレスがあれば、すぐに無料でフォーム作成を始められます。ぜひフォームを作成して、使用感を試してみてください。

▼ ビジネス用フォーム作成ツール「formrun」のテンプレート一覧はこちらから
>> 「formrun」のフォームテンプレートを確認する
▼ formrunをもっと詳しく知りたい方はこちら
>> formrun公式サイト

ハブスポットフォームの機能一覧

HubSpotのフォームの主な機能と料金は以下の通りです。

フォーム機能は基本的に無料で作成・使用できるので、本記事のやり方で実装できるようになりましょう。

ハブスポットフォームの特徴

ハブスポットフォームは、「HubSpot Marketing Hub」に実装されているフォーム機能です。

以下よりハブスポットフォームの特徴を解説します。

また、ハブスポットは多機能なため、他にも多くの機能が実装可能です。以下からハブスポットの機能を詳しく確認できます。
>>HubSpot（ハブスポット）とは？機能・効果を解説【まずは知ろう】

無料で基本機能が利用できる

HubSpotはフォームの作成に加えて、ランディングページやEメールマーケティングなどの多様な機能が無料で利用できます。

無料プランでのフォーム作成は制限が設けられていますが、以下のようにフォーム作成に必要な操作は可能です。

• ビジネスに必要な情報を収集できるテンプレートの使用
• フォームの簡易的なカスタマイズ
• 作成したフォームの埋め込み
• ユーザーが入力したフォーム内容の保存

フォーム作成などのツール導入を検討しているのであれば、まずはHubSpotの無料版でフォームを作成してみて実際にどのようなフォームが作れるのか確認してみましょう。

CSSやHTMLなしでフォームを簡単に作成できる

HubSpotのフォーム作成ツールは、ドラッグ&ドロップのビジュアルエディターを採用しており、プログラミングの知識がなくても直感的に操作できます。デザインテンプレートも用意されており、外部サイトへの埋め込みも数クリックで完了するほど簡単です。

入力フィールドを最大1000個作成できる

HubSpotのフォーム作成で入力できる項目は1000個まで作成できます。自社の状況や目的に合った入力フォームの作成が可能です。作成可能な入力フォームの主な項目種類は、以下のとおりです。

• 単行テキスト
• 複数行テキスト
• 1つのチェックボックス
• 複数のチェックボックス
• ドロップダウン選択
• ラジオボタン
• 日付入力
• 数値
• ファイル
• リッチテキスト
• ヘッダーテキスト
• 画像

以上のような項目を入力フォームで設定すれば、必要な情報をユーザーから収集できます。

目的別にフォームタイプを選べる

ハブスポットフォームでは、以下6つのフォームタイプから目的に応じて選択できます。

・埋め込みタイプ
・スタンドアロン（単体）ページ
・ポップアップボックス
・ドロップダウンバナー
・スライドインボックス（左）
・スライドインボックス（右）

さらに、テンプレートとして、支払いやニュースレターの登録、イベント登録などCV先も豊富に用意いただけます。

CRMとして広範囲な機能を使用できる

HubSpotとの連携が完了しておくと、フォームから収集した情報は自動でHubSpot CRMに保存され、コンタクト情報の一元管理が可能です。収集したデータを活用して内部配信やフォローアップメールの自動送信なども設定できます。顧客管理の効率化と生産性の向上が期待できます。

ハブスポットのフォームのメリット・デメリット

マーケティングオートメーションの代表的なツールであるハブスポットには、多くのメリットがあります。しかし、もちろんデメリットもあるため、導入後に後悔しないよう事前に確認しておきましょう。

ハブスポットのメリット

HubSpotフォームの最大の魅力は、専門知識がなくても高品質なフォームが完成することです。マウス操作だけで直感的に作成でき、HTMLやCSSの知識は不要です。

また、フォームに入力された情報は自動でCRMに保存され、カスタマーデータの一元管理が可能です。さらに、お礼メールの自動送信や営業担当への通知など、フォローアップも自動化できます。

実際の活用例として、問い合わせフォームからの情報を基に顧客ごとに最適化されたメールを自動配信したり、商談につながる顧客を自動で抽出できます。また、営業までの一連の流れも効率化可能です。

ハブスポットのデメリット

無料プランでは作成できるフォーム数が1000個までに制限され、高度な機能（条件分岐や段階的表示など）は有料プランではしか使えません。

また、デザインのカスタマイズ性は比較的シンプルで、細かいデザインの調整には限界があります。外部サイトへの埋め込み時にはHubSpotのトラッキングコードが必要なため、実装にいくつかの手間がかかることもデメリットです。

ただし、これらの対処は基本的な機能に影響するものではなく、多くのユーザーにとって十分な機能が無料プランで利用できます。

デザイン性の高いフォームを作成したいならば、formrunがおすすめです。120種類以上のテンプレートがあり、色やフォントのデザインも調整可能です。また、外部サイトへの埋め込みも簡単！フォーム作成後に発行可能なHTML要素をコピー＆ペーストで貼り付けるだけで埋め込みが完了します。
formrunをもっと詳しく知りたい方は下記公式サイトをご覧ください。

ハブスポットのフォーム作成手順

ハブスポットでのフォーム作成手順を、以下で実際のスクリーンショットを用いて解説します。

フォームを作成

まず、「マーケティング」から「フォーム」を選択。

次に、右側の「無料フォームを作成」をクリックしてください。

その後、6つのフォームタイプから目的とするフォームの用途に合ったタイプを選択してください。選択が完了したら、右側の「次へ」をクリックします。

次にテンプレートを選択します。テンプレートは、主に以下がすぐに実装可能です。

・支払い
・登録
・お問い合わせ
・ニュースレター登録
・eBookのダウンロード
・イベント登録

今回は「空白のテンプレート」を使用しました。

テンプレートを入れたら、すぐに画面上部でフォーム名を変えましょう。

名前を変えたら一旦完了です。

フォームフィールドの追加と編集

次にフォームフィールドの追加や編集を行います。
名前を変更した場所にある「プロパティー」をクリックしたまま、右側に移動させると、プロパティを移動できます。

必要な項目プロパティーをすべて右側に移動しましょう。

プロパティーまで完了できれば、基本的な操作は問題ありません。

次はフォームのカスタマイズを解説します。

フォームをカスタマイズ

フォームのカスタマイズは、主に以下3つの項目があります。

・入力オプション
・スタイル
・HTMLによるカスタマイズ

それぞれのカスタマイズの内容を以下で解説します。

入力オプション

「入力オプション」では、以下4項目のラベルデザインのカスタマイズが可能です。

・既定
・線形
・丸角
・鋭角

ラベルの形を変更すれば、より自社フォームのトーンに合うデザインを選択できます。

スタイル

「スタイル」では、以下4つの項目をカスタマイズできます。

・全般：幅を変更
・テキスト：フォント・ラベルの色・サイズを変更
・サンキューメッセージ：サンキューメッセージのカラーとサイズを変更
・ボタン：ボタンのカラー・位置・文字色・サイズを変更

カラーはカラーコードで指定できるため、自社のブランディングに合わせたデザインを実装可能です。

HTMLフォームとして設定

CSSやJavascriptを使用して、独自デザインのフォームをカスタマイズできます。専門知識が必要ですが、HTML・CSS・JavaScriptを書けるのであれば、自社のブランディングを損なわず、自由度の高いフォーム作成が可能です。
なお、HTMLフォームの機能を追加するためには「Marketing Hub Professional」のプランへの加入が必要です。

サンクスページの設定

画面上部の「オプション」から、フォーム送信後に表示するサンクスページの設定ができます。

サンクスページで表示する文言や画像がカスタマイズ可能です。

「スケジュール設定ページ」と「条件に基づいてスケジュール設定ページ、HubSpotページ、または外部URLにリダイレクト」は「Sales Hub Enterprise」プランにアップグレードすると利用可能です。

外部URLのサンクスページに遷移させたい場合

別途サンクスページを作成している場合は、「HubSpotページまたは外部URL」から遷移させるページのURLを指定できます。

外部リンクを追加」から、遷移させたいURLを設定して「追加」をクリックしてください。

追加できたら設定完了です。

顧客ステータスを分類して管理しやすくする方法

「送信に基づいてライフサイクルステージをカスタマイズ」を設定すれば、顧客がセールスまたはマーケティングのプロセスでどの段階にあるのかを分類できます。

例えば、以下のようなステータスに分類可能です。

・登録読者
・リード
・商談
・顧客

顧客のステータスを分類できるため、セールスやマーケティングを実施する際に最適な打ち手が顧客ごとにできるようになります。

プレビュー後にフォームを公開

フォームの編集やカスタマイズが完了したら、「スタイルとプレビュー」からフォームとサンクスページを確認できます。

パソコンやモバイルなど媒体ごとの表示状況も切り替えられるため、実際にユーザーが各媒体でどのように見えているのかを簡単に確認できます。

プレビューで問題がなければ、画面右上の「更新」をクリック、最後に「公開」を選択して完了です。

ハブスポットフォームの埋め込み方法

ハブスポットで作成したフォームの埋め込み方法には、主に以下2つがあり　

ます。

・WordPressに埋め込む場合
・HTMLで埋め込む場合

それぞれの埋め込み方を以下で解説します。

WordPressに埋め込む場合

WordPressにハブスポットのフォームを埋め込む場合は、WordPress内のプラグインを利用すると簡単です。

WordPressの管理画面で「プラグイン」から「新規追加」を選択します。「HubSpot-CRM」と検索してプラグインをインストールして有効化してください。

HubSpotプラグインを選択すると、ガイドが表示されるのでガイドに従って操作すればWordPressとの連携は完了です。連携完了後は、WordPress画面左側から、「コンタクト」や「フォーム」などのハブスポットの機能に直接アクセスし、埋め込みコードを取得してHTMLで埋め込んでください。

HTMLで埋め込む場合

HTMLでフォームを埋め込む場合は、「マーケティング」から「フォーム」を選択し、「アクション」、「共有」を選択してください。

「埋め込みコード」を選択して、表示されるHTMLコードをコピーします。

最後に埋め込みたいサイトページに、コピーしたHTMLコードを貼り付ければ、フォームの埋め込みは完了です。

HubSpotで資料ダウンロードできるフォームの作成方法

ホワイトペーパーなどの資料ダウンロードができるフォームを作成するには、まずHubSpotページの「セールス」の「ドキュメント」から資料ダウンロードしてもらうコンテンツをアップロードします。

右上の「ドキュメントをアップロード」をクリックしてください。

アップロードするコンテンツファイルを、自分のコンピューターまたはGoogleドライブやDropboxなどから選択します。

コンテンツをアップロードすると画像のように、アップロードしたコンテンツが表示されます。

次に、「アクション」という項目から「リンクを作成」を選択してください。

「リンクを作成」では、任意のメールアドレスを設定して「リンクを作成」をクリックすると、リンクが発行されます。

任意のメールアドレスでお客様のメールアドレスを入力してリンクを発行すると、URLが開かれた際にコンタクトページで開封閲覧が表示可能です。

フォーム作成時の「オプション」から「誰かがこのフォームを送信した後のアクション」で画像のように設定すれば、資料URLをユーザーがフォーム入力後に閲覧できます。

また、フォーム作成では「eBookのダウンロード」のテンプレートを利用するのがおすすめです。

HubSpotと連携できるフォーム作成ツールformrunもおすすめ

フォーム作成でお悩みであればformrunの導入もおすすめです。HubSpotとformrunを連携することで、HusSpot標準のフォームでは実現が難しい、高度な機能を備えたフォームを誰でも簡単に作成でき、生産性の向上や入力完了率の向上などが見込めます。

formrunの特徴は以下のとおりです。

formrunには幅広い用途のフォームテンプレートが40種類以上用意されており、デザイン性の高いフォームをドラッグ&ドロップの簡単操作で作成できます。

さらに、リアルタイムエラーや半角自動変換などのEFO機能を搭載。ユーザーがストレスを感じることなく入力できるフォームを作成できるため、フォームの入力完了率の向上に貢献します。

フォームでは、氏名や住所、メールアドレスといった個人情報を取り扱うため、セキュリティが重要です。formrunは、情報セキュリティマネジメントについての国際規格「ISO 27001 (ISMS)」の認証取得や24時間365日サーバー監視体制などセキュリティ対策も万全です。

無料使用もできるため、コストをかけずにフォームを作成したい方や、使用感を試してから本格導入を検討したい方におすすめのツールです。

デザイン性の高いフォーム作成が得意な「formrun」とHubSpotは連携が可能です。フォームに入力された情報から顧客やレコードを新規作成することも、既存顧客やレコードを上書き更新することもでき、顧客情報の紐づけや更新作業を大幅に削減できます。

デザイン性の高いフォーム作成が得意なformrunと、データベースを元にしたマーケティングオートメーションツールのHubSpotを連携して、自社のマーケティング活動をより効率的かつ効果的に進めましょう。

ハブスポットやformrunでより成果の高いフォーム作成をしよう

ハブスポットのフォームは、マーケティングオートメーションツールの「HubSpot」に実装されている機能の一つで、無料からフォーム作成ができます。

編集や埋め込みが簡単で、フォームタイプも6つありテンプレートが充実しているのが特徴です。

もっとも大きな強みは、多機能なHubSpotの他機能と合わせて使えるため、フォームで取得した顧客情報を活用して、効率的かつ効果的なマーケティングを実施できことです。

ただし、フォーム作成に特化したツールではないため、「もっとデザイン性やカスタマイズ性の高いフォーム作成ツールが良い」方はぜひ「formrun」をお試しください。

直感的な操作感なのにデザイン性とカスタマイズ性が高く、目的に合わせた多様なテンプレートが大量にあるので、最短30秒でフォーム作成が可能です。まさに初心者だけど良いデザインのフォームを作りたいという方に最適です。

無料で作成できるので、ぜひこの機会に「formrun」をお試しください。

formLab編集部

formrunやフォーム作成や顧客管理に関する情報を発信しております。

EFO（エントリーフォーム最適化）や問い合わせ対応など、
フォームに関するお悩みを解決します。