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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ハブスポットフォームでは、以下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コードを貼り付ければ、フォームの埋め込みは完了です。

ハブスポットフォームの他のおすすめツール

ハブスポットのフォームは無料で使用でき、一定のカスタマイズ性もあります。しかし、フォーム作成に特化されているツールではありません。

そこで、フォーム作成の専門ツールである「formrun」をご紹介します。
formrunは直感的な操作で難しい扱いは必要なく、カスタマイズやデザイン性が高いのが特徴です。デザイン性が高く、さまざまな場面ごとに合わせたテンプレートが豊富にあるので、最短30秒でフォームが作れます。また、セキュリティ対策も充実しているので安心して利用できるのも強みです。

無料トライアルもあるので、まずは手軽に使ってみるのをおすすめします。

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

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

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

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

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

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

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

formLab編集部

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

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