記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

HubSpotのフォーム作成方法と2種類の設置方法|フォーム作成の注意点や種類を徹底解説

情報の確保や申し込みのための導線の役に立つフォームをウェブサイトに1から作成し、管理することは多くのリソースを割くことになってしまいます。HubSpotのフォーム作成機能では思い通りのフォームが専門的な知識を必要とせず作成する事ができます。この記事ではHubSpotのフォーム機能について紹介していきたいと思います。

ウェブサイトに訪れた際に何か連絡したいと感じた際に多くの人は問い合わせフォームなどの用意されているフォームを利用します。
フォームが設置してある事で問い合わせや相談、受注を行える可能性があります。
サイトには様々な種類のフォームが用意されており、どれもユーザーが管理人に対して何らかの問い合わせやメッセージなどを送信するために使用させているものです。
フォームを設置する際にはプログラミングなどの専門知識を要求されます。
HubSpotを使用すれば難しい専門知識を知らなくてもカスタマイズされたフォームを設置する事が可能になります。
今回はHubSpotでのフォームの作成方法と設置の仕方まで紹介していきたいと思います。

フォームの種類

フォームと一言で言っても用途によって呼び名が変わります。
今回は代表的なフォームを4つ紹介します。

お問い合わせフォーム

ユーザーがサイト管理者に対して問い合わせをする際に用いる入力画面です。
商品の資料請求や質問を投稿をする際に設置されます。
問い合わせには何らかの返答をする必要が多いため、多くのサイトでは返信に必要なメールアドレスや電話番号などのユーザーの連絡先を入力できる項目が用意されています。

アンケートフォーム

ユーザーが商品やサービスを使用した際の感想など、何らかのアンケートを行う際に利用される入力画面です。
アンケートに答えてもらうにはできるだけユーザーに負担のかからないような形式を選びましょう。
ユーザーに自由に文章を入力させるものよりも、チェックボックスにチェックを入れるだけで回答できる形式の方がアンケートに答えてくれるユーザー数が多くなり、ユーザーの総意が明確になりやすいでしょう。

メールフォーム

入力欄に記載した情報をメール送信するための入力画面です。
もしメールフォームがなければ、ユーザーがメールを送りたいと思った時に、メーラーを起動して、アドレスを入力してなどの工程が必要になってしまいます。
それらの手間を省き、ユーザーが気軽にメールを送信できるようにするためのフォーム画面です。

購入フォーム

ECサイトによく見られ、商品やサービスの購入際に使用するフォームです。
商品の個数やクレジットカード、ユーザーの住所などの重量な個人情報まで入力する事が多く、正確な情報入力と共に情報漏洩の保護を念頭においたフォーム作りが必要です。

使いやすいフォーム作りに心掛ける事

フォームと一言で言っても様々なフォームがある事が分かりました。
ただ、どの種類にも作成の際に気をつけることはユーザーが使いやすい作りになっているかという点です。
この点を蔑ろにしてしまうと、折角フォームを設置しても思ったような効果が得られないという可能性があります。
そのような状況にならないように気をつけるべき点を紹介していきます。

必要最低限の入力項目

入力項目の多さはユーザーがフォームを完遂する確率を低くしてしまいます。
一度作成したフォームを再度確認し、本当に必要な項目なのかを吟味しましょう。
必須項目以外に入力しなくてもアンケートは送信することのできる任意項目というものもあります。
必須項目では必要な情報が足らないのではと不安になり、任意項目を付け足してしまう事があるのですが、入力の際に必要な項目は最低限にとどめ、ユーザーの負担を減らすことでアクションが得られやすくなります。

注意事項を記載する

フォームを入力する際に、よくある疑問点を挙げると「名字と名前の間は開けるのか」「電話番号にハイフンは必要なのか」「半角か全角のどちらで入力するのが正解なのか」などがあります。
注意事項を記載しておく事でユーザーの気疲れを防ぐと共に最後まで入力し終わったのに再度修正をユーザーに求めることになってしまい離脱してしまうといったことも防げるようになります。

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

全角、半角の区別などの入力情報の整形が必要な場合はユーザーにやらせるのではなく、サイト側でデータを受け取ってから整形処理できるようにしましょう。
例えば、電話番号のような数字入力は通常、半角で入力しますが、丁目などの住所に含まれる数字については全角での記入を指定するサイトが多いです。
この場合はユーザーが全角と半角を使い分ける必要性がでてきてしまい、ユーザーにとって負担になる可能性があります。
全角や半角のどちらで入力しても、サイト側で変換できるような処理体制を整えておきましょう。

エラー表示を分かりやすく

通常は入力内容に不備がある場合、エラー表示となるように設計します。
しかし、ただ一文「入力内容に不備があります」などのメッセージを表示されても具体的にどの部分が誤りなのかの指示がなく、ユーザー自身が探すような羽目になってしまっては、ユーザーに負担になってしまい離脱してしまう可能性が高くなります。
離脱率を下げないために、どの項目がどのように入力すべきかまで表示させることを設計しましょう。

HubSpotを利用してフォームを作成する理由

フォームを作成する時にHubSpotは有効的だと言えるでしょう。
なぜそのような結論になっているかを紹介します。

自由に情報を集める事ができる

初回訪問者も有望リードに変換できるような、魅力的なカスタムのフォームをあっという間に作成できます。
回答してほしい質問をドラッグ&ドロップで配置するだけなので、技術的なスキルは必要ありません。
自由回答フィールド、ドロップダウンメニュー、ラジオボタン、チェックボックスなど、10種類ほどのフィールドタイプの中から選択できると共に、カスタムフィールドを作成することも可能です。ハブスポットソリューションで作成したランディングページにを追加したり、外部ウェブサイトに埋め込んだりできます。
無効な回答や信頼性の低いEメールドメインからの回答はブロックされます。収集した情報は、ハブスポットのコンタクトデータベースとCRMで同期できます。

ユーザーに合わせて質問をリアルタイムに変更

強力なスマートフォームを利用して、訪問者ごとに内容を自動で調整できます。
質問に優先順位を設定しておくと、以前回答した質問は表示されず、毎回新しい質問に回答してもらえるので、コンタクトをうんざりさせることなく、たくさんの情報を収集できます。
スマートフォームを使用すると、訪問者の所在地、使用デバイス、リファーラルソース、ペルソナなどに基いて、質問を動的に変更できます。
コンタクトの回答に応じて、次の質問をリアルタイムに調整していくため、たくさんの価値あるデータを収集できます。

フォームの入力と同時にEメールと通知を送信

フォームへの入力が終わると自動的にワークフローが実行されるので、時間を節約しながら、大量のリードをフォローアップできます。
コンタクトがフォームへの入力を完了すると、関連するリードナーチャリングのキャンペーンへの登録や、セールスチームへのアラート送信などの処理が自動で実行されるので、たいへん便利です。
コンタクトデータベースやマーケティングオートメーションのツールと連携すれば、シンプルなフォローアップを簡単に自動化して、本来の業務に専念できます。

HubSpotを利用したフォーム作成

HubSpotのフォームはHTMLなどの知識なしにドラッグアンドドロップで作成できることはフォームを変更するたびに専門業者に依頼する必要がなくなるので、改善の回転を早める事ができるようになり、多くの企業が導入する理由の一つです。
更にHubSpotで作成したフォームは、HubSpotを使用したサイトに導入できることは当たり前に行えますし、HubSpotを使用していないサイトにも専用コードを埋め込むことで簡単に導入できます。
実際に、HubSpotを利用したフォーム作成を行なっていきましょう。
HubSpotのアカウントで「マーケティング」>「フォーム」を選択し、右上にある「無料フォームを作成」を選択してください。

フォームのタイプを選択画面に移動し、6つのフォームタイプから選択します。

  • 埋め込みフォーム
  • ウェブサイトの一部として埋め込むことのできるフォームを作成します

  • スタンドアロンページ
  • スタンドアロンページでリンクを通じて、共有可能なフォームを作成します

  • ポップアップボックス
  • ページの中央にボックスとしてポップアップするフォームを追加します

  • ドロップダウンバナー
  • 画面上部からドロップダウンするフォームを追加します。

  • スライドインボックス(左)
  • 左側からスライドするフォームを追加します。

  • スライドインボックス(右)
  • 右側からスライドするフォームを追加します。

    自社のサイトにあったフォームタイプを選択してください。
    フォームのテンプレートを選択します。

    HubSpotがそれぞれの場面を想定し用意したテンプレートを使用しても良いですし、一から作成することも可能です。
    随時追加されていくのでHubSpotを導入しておく事で、さらなる快適さを享受できることが可能になります。
    テンプレートを選択する事で、同ページ内の右側にプレビューが表示されるので、必要な要件を満たしているかを確認しながら選択しましょう。
    現在あるテンプレートを紹介します。

  • 登録
  • 訪問者がサイト、サービス、製品、またはプログラムに登録するためのフォームをウェブサイトに追加できます。

  • お問い合わせ
  • 訪問者が問い合わせをしやすくなるようなお問い合わせフォームをウェブサイトに追加できます。

  • ニュースレター登録
  • 最新情報の受信を希望する新しいサブスクライバーを獲得するためのニュースレター用登録フォームを追加できます。

  • サポート
  • サポートフォームをウェブサイトに追加して、自動的にチケットを生成します。

  • eBookのダウンロード
  • 訪問者がeBookなどのリソースをダウンロードするためのフォームをウェブサイトに追加できます。

  • イベント登録
  • ワークショップ、カンファレンス、ウェビナー、イベント用の登録フォームをウェブサイトに追加できます。

    HubSpot【フォーム】

    HubSpotの「フォーム」というタブを選択します。
    フォームの本体を作成します。
    左のパネルで希望するフィールドを選択・編集をおこなうことができ、右のパネルは実際に作成されるフォームを表示しています。

    左のパネルからフィールドをドラッグアンドドロップで右のパネルに追加できたり、フィールドの移動もドラッグアンドドロップで行え、直感的に編集する事が可能です。
    表示オプションの編集は右側のプレビュー画面のフィールドをクリックすることで編集する事ができます。

    編集することのできる代表的な項目を紹介します。

  • このフィールドを必須にする
  • 必須の入力項目にするかを選択できます

  • このフィールドを非表示にする
  • 非表示のフィールドはフォームに表示されません。
    非表示のフィールドは、お客様にフォームでのその情報の記入を要求することなく値をプロパティーに渡すために使用できます。

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

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

  • プレースホルダーテキスト
  • ここに入力したテキストがフォームの入力例として表示されます。

  • 既定値
  • 既定値を入力すると、その値がフォームフィールドに入力されます。
    ユーザーが値を変更しない限り、この値が送信されます。

    HubSpot【フォローアップ】

    HubSpotの「フォローアップ」タブを選択します。
    フォローアップでできることは、フォームを入力し送信した後にユーザーが受け取るフォローアップメールを作成できます。
    これは、任意なので必要のない場合は、省略可能です。
    フォローアップメールで編集できる点は6つあります。

  • サブスクリプションタイプ
  • サブスクリプションタイプは、Eメールを通じてコンタクトとコミュニケーションするための法的根拠を表します。

  • 送信元ユーザー
  • ユーザーに表示される送信元です。

  • 送信者名
  • ユーザーに表示される送信者名です。

  • 件名
  • Eメールの件名です。

  • 本文
  • Eメールの本文です。

  • Eメールフッター
  • 一般的に署名と呼ばれる会社名や住所、電話番号などの情報を入力する事でEメール上に表示されます。

    カスタマイズできたら「保存」を選択します。
    プレビュー画面でカスタマイズした内容が確認可能です。

    HubSpot【オプション】

    HubSpotの「オプション」タブを選択します。
    オプションで設定できるのは8つあります。

  • 訪問者がこのフォームを送信した後のアクション
  • 訪問者がフォームを送信した後のアクションを「サンキューメッセージを表示」か「別ページにリダイレクト」から選択する事ができます。

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

  • 次の宛先に送信通知を送る
  • 通知を受け取るEメールアドレスを選択します。
    この設定はフォームが使用されているどのランディングページでも変更できます。
    ユーザーがこれらの通知を受信するには、設定でフォーム送信通知を有効にする必要があります。

  • フォーム及びエラーメッセージの言語
  • 頻繁に使用するフィールドのフィールドラベルや、訪問者がフォーム入力を間違えたときに表示されるエラーは、この言語で表示されます。

  • 新しいEメールアドレスで常にコンタクトを作成
  • フォームが既存のコンタクトレコードに一致しないEメールアドレスで送信された場合、新しいコンタクトを作成します。
    このオプションを有効にすると、プログレッシブフィールドは使用できなくなります

  • 常に既存のドメイン名の会社を作成
  • ドメインが既存の会社レコードの会社に一致するドメイン名を使用してフォームが送信されたときに新しい会社を作成します。
    この設定では、重複する会社レコードが作成される場合があります。

  • フォームをリセットするためのリンクを追加
  • フォームに事前入力されたコンテンツが削除され、送信で新規コンタクトが作成されます。

  • コンタクトフィールドに既知の値を事前入力する
  • コンタクトがサイトに戻ってきたときに、コンタクトフィールドに既知の情報を事前に入力するかどうかを管理します。

    HubSpot【スタイルとプレビュー】

    HubSpotの「スタイルとプレビュー」を選択します。
    スタイルとプレビューでできることはフォームのスタイル設定やプレビュー、テストができます。
    選んだ設定に応じて右側のパネルでプレビューが更新され、スタイルや機能を調整する事が可能です。

    選べるフォームのテーマは4つ、カスタマイズ可能な項目は入力画面の幅とテキストのフォントとサイズと色、ボタンの色と場所、ボタン文字の色とサイズです。
    テストの項目は特定のコンタクト目線でどのように見えているかを試せる機能です。
    確認できたら「更新」を選択し、「確認及び公開」が表示された際に警告を確認できます。
    問題がなければ公開を選択してください。

    フォームを追加

    公開できたらフォームを埋め込む作業を行いましょう。
    フォームを埋め込む場合はHubSpot内で使用する場合と外部サイトで使用する際で手順が変化します。

    HubSpot内でフォームを追加

    HubSpot内で作成したフォームを埋め込むことは簡単です。
    HubSpotのアカウントでランディングページまたはウェブサイトページに移動します。
    左側のパネルで「コンテンツ」>「フォーム」を選択し、フォームを選択という項目で作成した項目を選択することでフォームを埋め込む事ができます。

    その後、スタイルを変更することでフォームを調整できます。

    外部サイトにフォームを追加

    外部サイトにフォームを追加する方法は2つあります。
    1つはフォームコードを既存のページに埋め込む方法、もう1つはリンク可能なスタンドアロンフォームページを作成する方法です。
    どちらの方法でも、HubSpotでフォームに加えた変更が外部サイトで公開中のフォームに自動的に反映されます。

    フォームコードを既存のページに埋め込む方法

    フォームコードを埋め込むためには埋め込むためのフォームコードを取得する必要があります。
    HubSpotのメニューの「マーケティング」>「フォーム」を選択し、作成したフォームの一覧を表示させます。
    埋め込みたいフォームの編集を選択してください。

    フォームの編集画面に移動したら、画面右上の「埋め込み」を選択してください。

    フォームを埋め込むという画面が表示されます。
    リンクを共有と埋め込みコードという選択肢があるので埋め込みコードを選択します。

    外部に埋め込む用のコードが表示されるのでコピーし、外部ページのHTMLモジュールに貼り付けます。
    フォームの分析情報を追跡するには、HubSpotのフォームを配置する外部ページにHubSpotトラッキングコードがインストールされている必要があります。
    HubSpotでは、HubSpotトラッキングコードがインストールされていないフォームでもフォーム送信は収集されますが、そのフォームの分析情報は記録されません。

    スタンドアロンフォームページを作成する

    フォームはフォームページを介して共有できます。
    つまり、フォーム自体が専用のURL上のページとして存在します。
    スタンドアロンフォームページのリンクを取得する必要が出てきました。
    HubSpotのメニューの「マーケティング」>「フォーム」を選択し、作成したフォームの一覧を表示させます。
    埋め込みたいフォームの編集を選択してください。

    フォームの編集画面に移動したら、画面右上の「埋め込み」を選択してください。

    フォームを埋め込むという画面が表示されます。
    リンクを共有と埋め込みコードという選択肢があるのでリンクを共有を選択します。
    フォームを共有するためのリンクをコピーします。

    ブラウザーで、新しいウィンドウまたはタブを開き、フォームページのURLをアドレスバーに貼り付けて読み込みます。
    フォームページのURL自体を共有して、直接フォームにアクセスしてもらうこともできます。

    まとめ

    HubSpotのフォーム作成から設置の仕方まで紹介してきました。
    単純にフォームといってもいろんな要素が絡み合ってできていることが分かっていただけたと思います。
    HubSpotを利用することで連携やデータの送信も自動でおこない、データん仕分けも一貫して行なってくれますが、これらの機能を一から作成すると非常に大掛かりになってしまうことになってしまいます。
    まずは、無料のHubSpotを体験し、自社の課題を解決する可能性が高いと判断してから必要な機能を補完するためにアップグレードを行うのも良いかもしれません。
    無料で登録できるので、実際に触ってみましょう。

    最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
    以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

    この記事がお役に立ちましたら、"いいね!"をお願いします
    minwebの最新情報をお届けします

    minweb編集部(株)セルリア

    ”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
    企画し実装まで支援する伴走型Webコンサルティング会社です。

    こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

    Googleサーチコンソール使い倒し活用術  <AOHON>

    ダウンロード資料画像

    Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

    サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。