HubSpotの使い方 フォーム作成

HubSpotでは、無料アカウントでも、お問い合わせフォームを作成することができます。
フォーム単独ページだけでなく、公開中のホームページへ埋め込むことも可能です。
今回は無料アカウント範囲でも可能な範囲で、作成フローをまとめました。

新規フォーム作成

まずはHubSpot管理画面より、「マーケティング」内「フォーム」を選択します。

001_フォーム作成

「無料フォームを作成」をクリックします。

002_フォーム作成

フォームのタイプを選択します。
ホームページなどに埋め込んで使用する「埋め込みフォーム」、単独ページとして作成する場合は「スタンドアロンページ」での作成が多くなるかと思います。
その他ページの中心にポップアップで目立つよう配置したり、上部や下部からシュッと表示させることも可能です。
これらはCTAとしての実装も想定した作りとなっています。
今回は「埋め込みフォーム」で作成します。

003_フォーム作成

フォームのテンプレートを選択します。
「空白のテンプレート」では、Eメール入力欄のみ必須項目として組み込まれ、その他項目については自由に設定することが可能です。
ユーザー登録用項目をまとめた「登録」、ニュースレター購読用の項目をまとめた「ニュースレター登録」、イベントやウェビナー参加用の「イベント登録」など、
予め項目をまとめたテンプレートを事前に選択すれば作成も容易になります。

004_フォーム作成


ここでは「お問い合わせ」を選択します。
「開始」をクリックします。

005_フォーム作成


「お問い合わせ」フォームで使用される項目が予めセットされました。
ここから、必要な項目の追加や変更、設定などを行っていきます。

006_フォーム作成

画面左、「既存のプロパティー」タブでは、すでに作成・設定済みプロパティーから
選択することが可能です。
未作成の場合は「新規作成」タブに移動し、新たにプロパティーを作成することも可能です。
ただし、無料版の場合、フォームに紐づけて作成できるプロパティー(カスタムプロパティー)は最大10件までです。

007_フォーム作成

「既存のプロパティー」タブに戻ります。
「よく使用するプロパティー」では、とくに使用頻度の高いプロパティーが予め表示されます。
「他のフォーム要素」では、フォームを利用しているのが人かボットかを判断し、スパムメールを監視する「CAPTCHA」設定、EU 一般データ保護規則(GDPR)による個人情報取得同意項目の追加が可能です。
いずれもお問い合わせフォームにはほぼ必須になるので、設定しておきましょう。

008_フォーム作成

「コンタクトのプロパティー」では、現在登録済みのコンタクトに関わるプロパティーが表示されています。
こちらから必要なプロパティーをフォームに組み込むことが可能です。

009_フォーム作成

あるいは、チケット機能を実装することも可能です。
「チケットのプロパティー」から関連する項目を追加します。
(自動チケット作成を有効化する必要があります)

010_フォーム作成

フォームのタイトルは、画面上部を編集することで可能です。

011_フォーム作成


フォーム項目を編集する場合、該当箇所を選択すると自動的に編集画面が表示されます。
また、項目を移動したり、2列に表示したい場合は、指定の場所へドラッグ&ドロップすることも可能です。

012_フォーム作成

プロパティー名、フィールドタイプは作成時から変更できません。
ラベル、ヘルプテキスト、プレースホルダーテキスト、既定値、文字数(最小・最大)、その他項目によるオプションが設定可能です。


013_フォーム作成

一方、プロパティを新規作成する場合は、ラベルやIDを設定します。
今回は「部署」という項目を作成するので、「新規作成」タブの「単行テキスト」を選択します。
すると作成画面が表示されます。


014_フォーム作成

それぞれ入力欄に記入します。
「ラベル」はわかりやすい名称が可能ですが、内部名(ID)は半角英数で作成します。
入力後、「次へ」で進みます。

015_フォーム作成

内容に問題なければ、「作成」で完了です。

016_フォーム作成

その他設定が必要な場合は、編集画面にてそれぞれ設定します。

017_フォーム作成

各項目が設定できたら、「フォローアップ」へ進みます。

019_フォーム作成

ここではお問い合わせフォームの入力内容が送信されたあとのフォローアップEメールが作成できます。
「フォローアップEメールを作成」をクリックします。

020_フォーム作成

Eメールの設定を行います。
「送信元ユーザー」では、フォローアップEメール送信者となりますので、contact@hogehoge.comなど専用メールアドレスを設定する必要があります。
「Eメールフッター」も変更可能ですが、これは受信トレイなどで共通利用されるフッター情報のため、慎重に更新してください。

021_フォーム作成

フォローアップEメールが作成できました。
続いて「オプション」に進みます。

022_フォーム作成

フォームのオプションを設定します。
フォーム送信後に表示する内容、フォーム内容を担当者に通知するか、フォームとエラーメッセージの言語などを設定可能です。

023_フォーム作成

フォーム送信後のアクションとしては、HubSpot内の別のページにリダイレクトするか、外部リンク(例えばhttps://www.hogehoge.com/form/conplete.htmlなど)に設定することも可能です。

025_フォーム作成

最後は「スタイルとプレビュー」です。
ここではフォームのデザインやテストも行うことができます。
「入力オプション」では、各項目のタイプや送信ボタンのスタイルが選択できます。
なお、無料版では「未加工のHTMLフォームとして設定」することはできません。
またフォーム内にはHubSpotのロゴが表示されます。

026_フォーム作成

「スタイル」の項目では、コンテンツの幅やテキストスタイル、メッセージスタイル、ボタンスタイルが設定可能です。

027_フォーム作成

設定が完了したら、右上「更新」ボタンをクリックるとフォームが公開状態となり、利用可能です。
外部サイトに埋め込むコードや、フォームへのリンクURLが発行されます。

029_フォーム作成030_フォーム作成

以上でフォームが作成されました。
作成できるフォーム数に制限はありませんので、メーリングリスト受付用、ユーザー登録用など、適宜最適なフォームを作成・実装することが可能です。