HubSpotのフォームの特徴と作成方法

ウェブサイトの管理人に何か連絡したいと思った時、どうすればよいでしょうか。多くのサイトには、「フォーム」と呼ばれる入力画面から連絡できるようになっています。サイトにはさまざまな種類のフォームが設置されていますが、どれもユーザーが管理人に対して何らかの問い合わせやメッセージなどを送信するために使用されるものです。

「form」は、「書式」や「伝票」といった意味の英単語です。そこから転じて、ウェブサイト一般においては、ユーザーが何らかの情報を入力する形式（フォーマット）という意味で使われるようになりました。要は、入力画面や入力欄ということです。

そんなウェブサイトのフォームについて、自社のウェブサイトに設置するにはどうすればよいのでしょうか。無料で利用できる人気のツール、「hubspot」での作成方法と合わせて見ていきましょう。

フォームの種類

多くの種類があるフォームですが、代表的なのは以下の用途に使われる4種類です。お問い合わせ、アンケート、メール、購入がおもなものですが、それぞれどのような特徴を持っているのでしょうか？

お問い合わせフォーム

これは文字通り、ユーザーがサイトの管理人に対して問い合わせをする時に用いる入力画面です。商品の資料請求や申し込みなどの窓口として通常設置されます。問い合わせには何らかの返答をする必要が多いため、多くのサイトでは、この入力画面内に電話番号やメールアドレスなどのユーザーの連絡先を記入できる欄が用意されています。

アンケートフォーム

これは、たとえばユーザーが商品やサービスなどを使用した感想など、何らかのアンケートを行う際に利用される入力画面です。アンケートと一口に言っても、チェックボックスに印を付けるだけの簡単なものから、自由に文章を記入するものまでさまざまな形式があります。サイト内に設置する場合、ユーザーが気軽に返答しやすい形式を選ぶことが大切です。

メールフォーム

入力欄に記載した情報をメール送信するための入力画面です。これがないと、ユーザーがメールを送りたいと思った時に、「メーラーを起動して、アドレスをコピペして、それから…」というように、メール送信だけでもかなりの手間をかけることになってしまいます。その手間を軽減し、ユーザーが気軽にメールを送信できるようにするための入力画面です。

購入フォーム

商品やサービスの購入の際に使用する入力画面です。ECサイトによく見られます。商品の個数やユーザーの個人情報などを入力することが多く、正確な情報の入力が要となります。そのため、ミスタイプなどの誤りを最小限に抑えるような仕組みで設置することが大切です。

ユーザーの使いやすいフォームとは

上記のように、同じような入力画面に見えても、目的ごとにさまざまな種類が存在しています。ただ、どの種類を選ぶにせよ、作成時の第一の注意点は同じです。それは、ユーザーの使いやすさということです。この視点をおろそかに作成してしまうと、せっかく設置したのに期待したほどのリアクションが得られないということにもなりかねないので注意してください。では、具体的にどのような点に気をつければよいのでしょうか？

少ない入力項目

入力項目の多さは、ユーザーに心理的負担を感じさせます。入力の必要な項目は最低限に留め、何よりユーザーが気軽に入力できることを優先しましょう。

任意項目は可能な限り設けない

ユーザーから広く意見や情報を得たい場合、必須項目では心許なくなってたくさんの任意項目を設置してしまうことがあります。しかし、先に述べたように、たくさん入力しなければならないとユーザーに感じさせては、それが負担となってそもそも入力してくれなくなるという事態に陥ってしまいがちです。それを防ぐには、任意に回答させる項目は可能な限り減らし、必須の項目だけにシンプルに絞り込むことを重視しましょう。

注意点は最初の方に記載

情報の入力時によくあるのが、たとえば、「氏名を記入する時に、名字と名前の間にスペースを入れるのか、詰めて記入するのか」、また、「電話番号の市外局番などの後のハイフンを記入するべきなのか」という迷いです。ユーザーが判断に迷う可能性のあることは、ページの最初の方に注意点として大きく掲げましょう。最初に疑問をなくしておけば、ユーザーは気軽に入力してくれるようになります。こうしたわずかな心がけが大きな差を生むものです。

サイト側で入力情報の整形処理を行う

たとえば全角と半角の区別など、入力情報の整形が必要な場合は、ユーザーにやらせるのではなく、サイト側でデータを受け取ってから整形処理できるようにしておきましょう。これもユーザーの面倒を減らして、気軽に入力してもらうための心遣いです。

住所の数字部分について全角を指定しない

電話番号のように、数字は通常、半角で入力しますが、丁目など住所に含まれる数字については全角での記入を指定するサイトが多いです。しかし、これは実際に入力するユーザーにとって意外と大きな負担になります。全角や半角のどちらで入力しても、サイト側で変換できるような処理体制を整えておきましょう。

エラー箇所の表示はわかりやすく

入力内容に不備がある場合、エラー表示となるように設計しますが、この際に、どこがエラーなのかをわかりやすく表示させることが大切です。ときどきどこが誤りなのかの指示がなく、ユーザー自ら一つずつ記入内容を確認しなければならないようなサイトがありますが、これはユーザーにとって親切ではありません。離脱率を下げるためにも、エラー箇所がすぐわかるようにそのことを表示させるようにすべきです。

hubspotのフォーム作成ツール

フォームについて理解できたら、実際に作成してみましょう。自分でどうやって作成すればよいのかわからないという場合は、無料で利用できる作成ツールがおすすめです。さまざまなツールがありますが、なかでも導入から運用後まで無料で利用できるhubspotがよく選ばれています。実際、HTMLなどの知識なしに、ドラッグ・アンド・ドロップで作成できる簡単なツールということで多くの企業に利用されている製品です。

また、hubspotのツールが優れているのは、hubspotを使用していないサイトに対しても、専用コードの埋め込みによって簡単に入力画面が作成できることです。ユーザーの使いやすさを重視することが何より優先させるべきことだとした上で述べましたが、hubspotのツールはその要求に応えるものと言えるでしょう。では、実際にどうやって作成すればよいのか、詳しい手順を確認しておきましょう。

hubspotのフォーム作成方法

hubspotアカウントで、「マーケティング」から「リードの獲得」へと進み、さらに「フォーム」にまで進みます。右上の作成ボタンをクリックしてから、左のパネルにある「通常フォーム」を選んでください。

事前にテンプレートを作成している場合は、それを使用して作成することが可能です。空白の状態から始める時は、左のパネルから空白のテンプレートを選んでください。「開始」ボタンをクリックすれば作成開始です。エディター上部にある編集アイコンをクリックして編集していきます。

フィールドの追加と編集

左のパネルの検索バーで検索、もしくは、プロパティグループの参照によって希望するフィールドを検索します。選んだフィールドを追加する時は、それを右側のプレビュー画面にドラッグ・アンド・ドロップするだけです。チケットを自動的に作成するスイッチをオンにしておくと、入力画面とコミュニケーション受信トレイが接続され、ユーザーの問い合わせに対応できるようになります。

表示オプションの編集は、右側のプレビュー画面のフィールドをクリックです。編集できる項目はプロパティのタイプによっても異なりますが、おもに以下のような項目が編集できます。

ラベル

公開時に表示されるフィールド名です。

ヘルプテキスト

テキストをラベルに追加することで、ユーザーが入力する際にヒントを与えることができます。

既定値

ユーザーで変更しない場合、この値がそのまま送信されます。

このフィールドを必須にする

このチェックボックスにチェックを入れておくと、必ずこのフィールドに入力してからではないと送信できないようになります。

このフィールドを非表示にする

これにチェックを入れておくと、文字通りこのフィールドが表示されなくなります。

フォローアップメールの作成

画面の上にある「フォローアップ」というタブをクリックすると、入力内容を送信した後にユーザーが受け取るフォローアップメールが作れます。これは任意ですので必要ない場合は、省略できます。

フォローアップメールを作成する場合、タブをクリックすると、右側のパネルで詳細設定のカスタマイズが可能になります。カスタマイズできる設定には、サブスクリプションタイプ、送信元ユーザー、件名欄、メール本文などです。カスタマイズできたら「保存」を押します。プレビュー画面でカスタマイズした内容が確認可能です。

フォームオプションのカスタマイズ

画面の上部にある「オプション」というタブをクリック、それから必要に合わせて設定をカスタマイズしてください。カスタマイズできる設定は以下のとおりです。

送信後のユーザーのアクション

サンキューメッセージをユーザーに表示するか、送信後にユーザーを別ページにリダイレクトさせるかを選べます。

フォローアップオプション

担当者にメール通知するという設定にしておけば、自動でその通知が担当者宛てに送信されるようになります。また、担当者かどうかに関係なく、指定の宛先にメール通知を送信することも可能です。ドロップダウンメニューから当該の項目を選び、送信したい個人やチームを選んでください。

メッセージの言語

入力が正しくない時に表示されるエラーメッセージの言語を選べます。

新しいアドレスのコンタクトを必ず作成

このオプションでは、あるアドレスを使って、すべてのメール送信に新規のコンタクトレコードを作れます。データベースにある既存のレコードにそのアドレスが一致する場合は、その詳細が更新されます。

既知の値をフィールドに事前入力

すでにサイトを訪問したことがあるユーザーの場合、かつ、hubspotがクッキーを保存していてトラッキングもできた場合に、このオプションによって、入力画面内にフィールドの既知の値が事前に入力されている状態になります。これにより、再度何かを送信する必要がある時などに、同じ内容を入力しなければならないユーザーの手間を省けるようになります。なお、このオプションは最初から有効になっていますので、無効にしたい場合のみオフを選んでください。

ユーザーのリンクを追加

このチェックボックスにチェックを入れておくと、ユーザーが事前にフォームに入力されているフィールドを削除することが可能です。また、送信時には新しいコンタクトが作成されます。

また、フィールドに自分ではないユーザーの情報がすでに入力されている時に、「お客様ではない場合」というボタンをユーザーがクリックすることも可能になります。

スタイルの設定とプレビュー

画面上部のタブから「スタイルとプレビュー」をクリックします。スタイルの設定やプレビュー、テストができるようになります。選んだ設定に応じて右側のパネルでプレビューが更新され、スタイルや機能を調整することが可能です。

なお、選べるフィールドのテーマは4つ、カスタマイズ可能なスタイルはフォント、色、入力画面の幅です。テストとは、（依存フィールドやプログレッシブプロファイリングがある場合）ユーザーにどのように見えているかを試せる機能です。

フォームの公開

画面右上の「公開」をクリックすれば完了です。hubspotのページで使用できます。

hubspot外部のサイトでもフォームの共有が可能

hubspotではない外部のサイトでも、コードを埋め込む方法と、スタンドアロンフォームページを作成する方法によって、フォームの共有が可能です。どちらの方法を選んでも、hubspotのツールで設定した変更が自動的に外部サイトにも適用されるようになっています。