<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=211808849452561&amp;ev=PageView&amp;noscript=1">

HubSpotの基本的な使い方から現場ベースのナレッジまで、HubSpotに特化して情報をご提供します。
どんどんコンテンツを追加していきますので、ご期待ください!

  1. Penseesトップ
  2. How to HubSpot
  3. フォームの必須文言をCSSだけで制御する
CMS Hub

フォームの必須文言をCSSだけで制御する

HubSpotのフォームのかゆいところは幾つかありますが、そのうちの1つに “必須の記号「*」の変更オプションがない” というものがあります。下記キャプチャの部分ですね。
必須の記号が「*」である様子のキャプチャ

「これを『必須』にしたい」という要望をよくいただきますので、CSSだけで完結する方法をご紹介します。といっても仕組みさえ思い付けば割とシンプルで、次のようなコードになります。

.hs-form-required {
  font-size: 0;
}

.hs-form-required::after {
  content: '必須';
  font-size: .8rem;
}

表示は次の通りです。
必須の記号を書き換えた様子のキャプチャ

ポイントはfont-size: 0;で、これがないと「*」は消えません。とはいえdisplay, visibility, opacityなどで消そうとしても子要素となる::afterも消えてしまうので、font-sizeで制御します。少しかゆいのは “必須” のfont-sizeemを使えないことですが、仕方ないですね。

MAIL NOTIFY

パンセへのご相談はこちら

HubSpotお役立ち情報 コツや使い方をご紹介します!

POST SEARCH

    RECOMMEND

    CATEGORY