HubSpotでは、HTMLやCSSの知識不要で簡単にフォームを作成することができます。無料版でもフォームを使用することができ、フォームに入力された内容は自動でHubSpotに取り込まれます。
この記事では、HubSpotで新規フォームを作る方法や、作成したフォームをサイトに埋め込む方法、無料版と有料版の違いを解説しています。HubSpotのフォームを活用していきたいと考えている方は是非ご覧ください。
HubSpotでフォームを新規作成する方法
さっそくHubSpotでフォームを新規作成する方法を説明します。
下記のステップで作業を進めます。
- フォームの種類を選択する
- フォームテンプレートを選択する
- フォーム項目を作成する
- フォーム送信後のアクションを編集する
- スタイルを編集する
1：フォームの種類を選択する
まずは、メニューから「マーケティング」を選択、「フォーム」をクリックします。
フォーム一覧画面の右上にオレンジ色のボタン「フォームを作成」があるので、そこをクリックします。
次の画面では、フォームの種類を選択します。
ポップアップのように出る種類など複数ありますが、今回は自社サイトのフォームページに設置するフォームを作成するために「埋め込みフォーム」を選択します。
2：フォームテンプレートを選択する
次の画面ではフォームのテンプレートを選択します。
だれでも始めやすいように、作りたいフォームのテンプレートがあればそこから始めることができます。
自分で項目をコントロールしたい場合は、「空白のテンプレート」を選択します。
3：フォーム項目を作成する
次の画面では、フォームの項目を作っていきます。
基本的には「既存のプロパティ」から、取得したい項目をドラッグアンドドロップで作成していきます。「既存のプロパティ」から選択した項目は、HubSpotのコンタクトに自動で取り込まれます。
別の項目を作成したい場合は、「新規作成」から作成します。チェックボックスやラジオボタン、自由回答形式など入れることができます。
また、項目の入力必須など設定する場合には、画面右のフォームプレビューで項目をクリックして鉛筆マークから編集します。入力必須や、記入例のテキストなど変更することができます。
4：フォーム送信後のアクションを編集する
続いて、フォーム送信後のアクションを編集していきます。
画面上部「オプション」をクリックして進めていきます。
まずはフォーム送信した後、ユーザーにどのような画面を表示するかを選択します。
・サンキューメッセージ：画像下で設定するメッセージのみ表示するようにします
・HubSpotページまたは外部URL：サンクスページなどへの遷移を設定します
・スケジュール設定ページ：社内のユーザーとの面談日程調整ページに遷移します（有料版のみ）
・条件に基づいて上記ページから自動で表示（有料版のみ）
5：スタイルを編集する
最後にフォームの見た目を整えます。「スタイルとプレビュー」から編集します。
ここではボタンの形や色、ラベルの色やフォントなどを調整できます。
最後に右上のオレンジボタン「更新」を押して完了です。
HubSpotのフォームをサイトに埋め込む方法
続いて、作成したフォームをサイトに埋め込む方法です。
まずはフォーム一覧画面から、埋め込みたいフォームにカーソルを合わせます。すると「アクション」と書いているボタンが出現するのでクリックします。
下記のようなメニューが出てきたら「共有」をクリックします。
ポップアップが出てくるので「埋め込みコード」の方をクリックします。するとHTMLコードが取得できるので、「コピー」をクリックします。
コピーしたHTMLを埋め込みたいサイトへペーストしたら完了です。
WordPressサイト等であれば「カスタムHTML」ブロックを作成して、そこへ埋め込むことで対応ができます。
HubSpotフォームの無料版と有料版の違い
HubSpotフォームでは、無料のプランでもフォームを作成できます。しかし、無料プランでは「HubSpot」のロゴが表示されるなどのいくつかの制限があります。
プランもいくつかあるため、比較して機能を確認してください。下記の図ではフォームに関する箇所のみピックアップして記載しています。Marketing Hubのプランです。
| 比較 | 無料 | Starter | Professional | Enterprise |
|---|---|---|---|---|
| 月額料金 | 0円 | 1,800円～ | 96,000円～ | 432,000円～ |
| HubSpotロゴ削除 | ✖ | ○ | ○ | ○ |
| GDPRオプション | ✖ | ○ | ○ | ○ |
| Eメール検証 | ✖ | ✖ | ○ | ○ |
| 依存フィールド | ✖ | ✖ | ○ | ○ |
| コードカスタム | ✖ | ✖ | ○ | ○ |
Sales HubなどMarketing Hub以外の課金では、無料プランとみなされてしまうため、フォームへ課金したい場合には必ずMarketing Hubに課金するように注意してください。
とりあえず始めてみたい場合には、無料プランで十分フォームは作成できます。ただしフォームにHubSpotのロゴが入ってしまうため、気にするようであればStarterプランで始めたほうが望ましいです。
HubSpotに外部フォームを読み込む方法
「すでにサイトにフォームがあり、全部HubSpotフォームに差し替えるのは面倒、、」というご相談をいただいたので、こちらで解説します。
実はすでにサイトにフォームが埋まっていれば、フォームの差し替えは不要です。（ただし、HTMLコード内の<form>タグに基づいて識別されます）
まずはHubSpotのトラッキング設定ができていない場合は、コードの設置から進めます。設定メニューの「トラッキングコードとアナリティクス」から「トラッキングコード」を選択し、コードをコピーしてサイトに設置します。（設置方法はGoogleタグマネージャーでも、直接でもOK）
続いて、フォームの設定を進めます。設定メニューの「フォーム」から「HubSopt以外のフォーム」を選択し、右側のボタンを押して「ON」にします。これで設定完了です。
これだけで、この設定以降にフォームが送信されたときから自動で情報が取り込まれるようになります。次回の送信以降なのですぐに連携されるわけではありません。不安であれば、テスト送信をすることで取り込まれるか確認することができます。
まとめ
本記事ではHubSpotでフォームを作成する方法から、埋め込む方法まで解説をしました。
無料版でも問題なくフォームは作成できるため、まずは無料版から始めてみることをオススメしています。ただし文中でも説明した通り、無料版ではHubSpotのロゴが入ってしまうので注意が必要です。
また、今まで別のフォームを活用していた方は、わざわざ新しいフォームをHubSpotで作成する必要はありません。設定さえできれば自動で連携してくれるため、特にサイトの変更は不要です。
【フォーム設定で不明な点があったり、HubSpotの導入にお悩みがある方へ】
HubSpotの導入支援を行っておりますので、弊社までお問い合わせください！
