HubSpotの無料版のフォームのスタイルシート（CSS）を変更してフォーム入力をわかりやすくする

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

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

出典：お問い合わせ（ペーパーグッズのグラシン工房「そ･か･な」）

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

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;}
   　→ラベルの文字を太字に変更し、区別できるようにする

スタイル変更後の表示

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

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

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

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

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

少しコードを追加するだけなので簡単でしたね。ぜひ試してみてください。それではよい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