概要 HubSpotのフォームのCSSを変更して、フォームを入力しやすくするための方法を紹介。無料版に対応。

20181125-HubSpotのフォームのスタイルCSSを変える-00

皆さん、HubSpot使っていますか?


ウェブのMA(Marketing Automation/マーケティング・オートメーション)でよく聞くツールのひとつがHubSpotです。

HubSpotの簡単な説明をすると、ベースにCRM(Customer Relationship Management/顧客とのやり取りを管理すること)としての機能がベースにあって、訪問客を惹き付け(アトラクト)、関係を築き(エンゲージ)、満足させる(ディライト)機能(※)があり、この流れを自動化も含め、より効果的に進めていくためのツールです。

もう少し知りたい方は以下のページをご覧ください。

インバウンドマーケティングとは? | ハブスポット

※ー罎付ける(アトラクト) 見込み客に転換する(コンバート) 8楜匆修垢襦淵ローズ) じ楜劼鯔足させる(ディライト)という定義もあります。


HubSpotのCRMは便利です。複数の営業担当がいる場合、お客様とのやりとりを自動で記録でき、コメントや売上情報なども残せるので、他の担当者がHubSpotのサイトで記録されたやり取りを見ることで引き継ぎが簡単に行えます。HubSpotのCRMはサインアップ(登録)すれば、無料ですぐに使えます。


さて、検索エンジンやSNSからウェブサイトへ訪問した方が、資料請求やお問い合わせをするときに必要となるのはフォームの機能です。HubSpotでは、資料請求やお問い合わせなどで使えるフォーム作成の機能を持っていて、フォームに入力された情報はCRMへそのまま記録することができます。

フォームのレイアウトはドラッグ&ドロップで簡単にできるので、複雑なプログラムがわからない方にもオススメです。


このフォームですが、標準のままだとフォームのスタイルの関係で、入力欄やエラー表示がわかりづらいのです。


HubSpotの有料版(HubSpot Marketing Starter以上)を契約していると、簡単に直せるようですが、まだそこまで本格導入するまでは…という方向けに、今回は無料版のままでも、フォームのスタイルの変更をできる方法を紹介します。

●HubSpot標準のフォームのスタイルの問題点

HubSpotの無料版で標準のスタイルのフォームは以下のような感じです。

20181125-HubSpotのフォームのスタイルCSSを変える-01

出典:お問い合わせ(ペーパーグッズのグラシン工房「そ・か・な」)



個人的には以下の問題点があると思います。

  1. 必須項目が「*」しか表示されておらず不親切。
  2. 入力に不備があり、エラーになっても、枠線が赤くなるだけでわかりづらい。
  3. 項目名(ラベル)が他の文字と同じ文字スタイルで区別が付きづらい
  4. それぞれの入力項目が近すぎる

これらを解消します。



●作業手順

HubSpotでフォームの作成を行い、外部ページに埋め込むコードを取得しておいてください。


こんな感じのコードですね。

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
  hbspt.forms.create({
    portalId: "XXXXXXXXX",
    formId: "XXXXXXXXX"
    }
});
</script>


そして、このフォームを埋め込むページにjQueryをロードしてください。

例えば、GoogleのサーバーからホストされているjQuery 3.3.1をロードする場合は、こんな感じのコードですね。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


なお、jQueryをロードしないと以下の説明で出てくるコードは動作しません。

そして、HubSpotのフォームのコードを以下のように変更します。(太字・背景が黄色の部分を追加)

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
  hbspt.forms.create({
    portalId: "XXXXXXXXX",
    formId: "XXXXXXXXX",
    onFormReady: function($form){
        $("iframe.hs-form-iframe").contents().find("head").append('<style>.hs-form-required {margin-left:1em; color:#cc0000;} .hs-form-required::after { content: "必須項目"; display: inline-block; font-size: 86%; }  .hs-form .error {background-color: #ffd8d8;} .hs-form fieldset {margin-bottom:1em;} .hs-form fieldset label span:first-child {font-weight:bold;}</style>');
    }
});
</script>


formId: "XXXXXXXXX"の後に「,」(カンマ)を入れて、onFormReadyというパラメーターを記述します。

そうすることで、HubSpotのフォームの準備ができたときに、onFormReadyに書かれたプログラムが動作します。


何をしているのかを説明すると、HubSpotのフォームはiframeで生成されるので、その中のheadタグにスタイルを追加しています。スタイルでは以下のことを設定しています。

  1. .hs-form-required {margin-left:1em; color:#cc0000;}
     →必須項目の「*」の左を1文字分空けて、文字カラーを落ち着いた赤にする(必須項目が多いときにうるさくなるので)
  2. .hs-form-required::after { content: "必須項目"; display: inline-block; font-size: 86%; }
     →「*」の右に「必須項目」という文字を入れ、わかりやすくする
  3. .hs-form .error {background-color: #ffd8d8;}
     →エラーがある入力項目の背景色を薄い赤色(ピンク)にして目立たせる
  4. .hs-form fieldset {margin-bottom:1em;}
     →それぞれの入力項目間を1文字分空け、区切りをハッキリさせる
  5. .hs-form fieldset label span:first-child {font-weight:bold;}
     →ラベルの文字を太字に変更し、区別できるようにする



●スタイル変更後の表示

スタイルを変更すると、全体の表示としては以下の画像のように変わります。

20181125-HubSpotのフォームのスタイルCSSを変える-02


アニメーションGIFだとこんな感じ。

20181125-HubSpotのフォームのスタイルCSSを変える-06


標準のスタイルでは入力内容にエラーがあった場合、以下の画像のようになります。

20181125-HubSpotのフォームのスタイルCSSを変える-03


スタイル変更後は以下の画像のようになります。

20181125-HubSpotのフォームのスタイルCSSを変える-04


ラジオボタンの項目で入力内容に不備があると以下の画像のように変わります。

20181125-HubSpotのフォームのスタイルCSSを変える-05


少しコードを追加するだけなので簡単でしたね。ぜひ試してみてください。それではよいHubSpotライフを。



●問題点

このスタイル(CSS)ではチェックボックスの項目を必須項目にしたときのエラーで背景色の色が変わりません。

また、この方法は、CSSを直に書いて追加するものなので、複雑なカスタマイズの場合は、記述が長くなってしまうところが問題です。

CSSファイルを作成して読み込むようにした方が管理しやすくなるように思えますが、その方法だと複数行テキストの項目(<textarea>)の行を大きくしたときに、フォームが最初に表示された状態でフォームの一部が欠けて表示されるのでおすすめできません。(iframe内の要素の高さの変更を検知していないので溢れている)フォームの要素をクリックすると、欠けて表示されていた部分も表示されるのですが、あまり気持ちの良いものではありませんね。



●注意点:同じページに複数のフォームを設置している場合は…

同じページ内のHubSpotのフォームすべてのスタイル(CSS)を変更するので、ひとつだけスタイルを変更したいときは、「function($form){…}」内のセレクターをID指定などで限定してください。



●なぜjQueryを読み込むのか?

onFormReadyのパラメーターのためにjQueryが必要です。

Takes the jQuery form object as the argument: onFormReady($form)

How to customize the form embed code

●こんな記事も読まれています



ブログ著者

笹川純一・jdash2000

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について


コメントをどうぞ


サイト内検索