【HubSpot】ボタンが変わらない、色が効かない…🤔フォームの見た目が思い通りにならないときに読む記事 🎨

🌿 はじめに

「フォームのボタンだけ色が変わらない…」
「ページエディターでは青くしたのに、ページではなぜかピンクのまま…」
そんな風に、フォームの見た目だけが思い通りにならない😿ことってありませんか？

このモヤモヤ、実はフォームの種類やスタイルの適用順を知るとすっきり解決できるかもしれません。

この記事では、HubSpotのフォームにスタイルがどう適用されるのかを、
実際の表示やインスペクトを使いながら、やさしく解き明かしていきます🕵️‍♀️✨

🧩 HubSpotのフォームには２種類ある

現在 HubSpotでフォームを作るとき、
「フォームエディター（新）」と「旧フォームエディター」という2種類のフォームが用意されています。

2つのフォームは使い方や設定画面も少し異なりますが、
もっとも大きな違いは「マルチステップフォームが使えるかどうか」です。

新しいフォームでは、複数ステップで表示できるフォームが作れるようになったり、
ボタンの色や背景色などをフォームエディターで直接指定できるようになったりしています。

このあと紹介するスタイルの反映ルールにも、この「新旧の違い」が大きく関わってきます👀

• 📖 新しいフォームエディターに関するナレッジベース
• 📖 従来のフォームエディターに関するナレッジベース

🎨 新 vs 旧、スタイル設定はどう反映される？

🧁 旧フォーム（旧フォームエディター）のスタイルの入り方

まずは従来のフォームエディターについて、従来のフォームエディターは👇にも書いてあるように フォームエディターの［スタイルとプレビュー］で指定された内容は HubSpot ページ には反映されません。

👉 ここの設定は、外部ページに埋め込んだ時やスタンドアロンで表示したとき（https://share.hsforms.com で始まる共有ページ）に適用される！

🍰 新フォーム（フォームエディター）のスタイルの入り方

次に、新しいフォームエディターについて。新しいフォームエディターでは、従来のフォームエディターよりもスタイル設定が充実しています。

また、これらの設定は、HTMLの要素にインラインで反映されます。※次のセクションで詳しくみていきます🏃

👉 つまり、HubSpotページに埋め込んだ時にもフォームエディターのスタイル設定が干渉する可能性が出てくる ということ！

🔍 インスペクトしてみよう！どのスタイルが効いてる？

「スタイル設定したのに反映されない…」
そんなときに頼りになるのが、ブラウザのインスペクト（検証）ツールです。

このツールを使えば、実際にどのスタイルが適用されていて、どれが上書きされているのかを、
コードではなく“目で見て”確認することができます👀✨

ここでは、旧フォームと新フォームそれぞれのインスペクトの見え方を例に、
「勝っているスタイル」「負けているスタイル」の見つけ方を見ていきましょう！

🔖 インスペクトの使い方については前回の記事をみてね

🧁 旧フォーム（旧フォームエディター）の場合

旧フォームでは、フォームの見た目に直接スタイルを設定することはできません。（HubSpotページに限っては）
そのため、フォームに反映されるスタイルは「テーマ」や「ページエディター」など、他の場所からの設定によって決まります。

🍪 実際に見てみよう

テストページでは、ページエディター > フォーム で
①［モジュール］> ［背景］
と
② ［フィールド］ > ［背景］
を指定しているのに、②は反映されてて①は反映されていません😣

①［モジュール］> ［背景］
薄緑色にしたいのにグレーから変わらない…

② ［フィールド］ > ［背景］
こっちはベージュ色の設定が反映されている…

どちらも同じように設定しているのに… と思うかもしれませんが、まずはテストページをインスペクト🔎して確認してみましょう👇

🔗テストページ：https://23823306.hs-sites.com/page-with-old-form

① モジュールの背景は？

①のモジュールの背景をインスペクトしてみると、グレーの色は "theme-overrides.css" から来ていることがわかります

※ HubSpotページでは、xxx.min.css と表示されている場合でも xxx.css と同じと読み替えて大丈夫です🆗

"theme-overrides.css" にはテーマエディターで指定された値が反映されることが多いので、テーマエディターの設定を見に行くことにします 👀

テーマエディターの Form スタイルをみると。。。
❗グレーの背景色が指定されていることがわかります

まとめ：

テーマエディターの設定が優先されて表示される

② フィールドの背景は？

一方②のフィールド（入力欄）の背景をインスペクトしてみると、

• ページエディター側で設定した色が反映されてて（＆ !important がついてる） 
• "theme-overrides.css" のスタイル設定（白の背景色）が打ち消されている

ことがわかります

これについてテーマエディターを見てみると、［フィールド］の項目は［フォーム］（さっきの背景色）と違って🔄のマークがないため カスタマイズされていないことがわかります👀

テーマエディターで上書きされたスタイルがない ことから、ページエディター側の設定が反映されている と考えられます💡

まとめ：

テーマエディター側で上書きされているスタイルがなければ、ページエディターのスタイルが採用される

🎂 ポイント

旧フォームエディターの場合：ページで設定した色が効かないときは、
まずは「テーマ側ですでに指定されていないか？」をチェックしてみると良いかもしれません🕵️‍♀️✨

🍰 新フォーム（フォームエディター）の場合

新フォーム（スタイル付きフォーム）では、フォームの編集画面で見た目のスタイルを直接設定することができます。

そして、この設定はHTMLの各要素にインラインスタイル（style属性）として出力されるため、
旧フォームと違ってページ側にも反映される可能性があることに注意🌩️

🍪 実際に見てみよう

今回用意したテストページでは、以下の５つの要素についてみていこうと思います

1. フォームの背景色
2. 「お問い合わせ」の文字色
3. フィールドのラベル（Eメール など）の文字色
4. 進捗バーの色
5. 「次へ」ボタン の色

🔗テストページ：https://23823306.hs-sites.com/page-with-new-form

1. フォームの背景色

フォームの背景色が指定されているところを探して、インスペクトしてみると

#hs_cos_wrapper_main-module-6

に対して色が指定されていることがわかります

📖 ナレッジベースを参照すると ソース名がページURLで、スタイルが #hs_cos_wrapper_module_numberをターゲットとしている場合、スタイルはページエディターの[ スタイル ]タブで設定されている可能性 があるとのこと💭

👉今回はその通りで、ページエディターの［スタイル］で背景色が指定されているのが反映されていました

2.「お問い合わせ」の文字色

「お問い合わせ」の文字色 をインスペクトしてみると、element.style に対して文字色が指定されていることがわかります

📖 ナレッジベースを参照すると、

 element.style がインスペクターの宣言の横に表示されている場合、そのCSSはインラインで設定されています。インラインスタイルとは、ページのHTMLソースコード、またはテンプレートのインラインスタイルフィールドに直接追加されるスタイルです。

とのこと

👉 上記もヒントになりますが、
実はこれはフォームエディターの中にあるリッチテキストで色が指定されているのです。。！👀（これは結構digらないとみつからないかも💎⛏️）

3. フィールドのラベル（Eメール など）の文字色

フィールドラベルについては、#hs_cos_wrapper_main-module-6 の色指定が反映されているので、１と同じパターンですね👏

またフィールドラベルの色はフォームエディターで緑色を指定しているのですが、ページで指定している赤色が反映されています。

👉ページエディター側でスタイル設定されている場合は、フォームエディター側のスタイルよりも ページエディターのスタイル設定が優先されるようです

4. 進捗バーの色

進捗バーは新しいフォームならでは の項目ですね🌱

これについてもインスペクトしてみると、[data-hsfc id=Renderer] .hsfc-ProgressBar というクラス名でバーの背景色が指定されていることがわかります

👉 進捗バーの色はフォームエディター側でしか設定できないので、これはフォームエディターの設定からきていることになります。

また、[data-hsfc-id=Renderer] は新しいフォームエディターで指定されたスタイルに入るクラスのようです

5. 「次へ」ボタン の色

「次へ」ボタンの色についてもインスペクトしてみると、4 番と同様に が [data-hsfc-id=Renderer] いますね

一方で、.button に対する指定は打ち消されていることがわかります（ページ右上のボタンには反映されているみたい）

👉 実はこのページにはボタンの色をオレンジ色に指定するスタイルシートを添付しているのですが、新しいフォームエディターのスタイル指定はページ固有のスタイルシートよりも優先されることがあるようです💫

（ここの設定ではなく‥）

（ここの設定が反映されている）

🎂 ポイント

🔸新しいフォームは、今までのフォームと違ってフォームエディターのスタイル設定がHubSpotページにも影響する

🔸 ページエディターで設定したスタイルは、フォームエディターの設定よりも優先される

🔸 ただし、ページに添付されているスタイルシート（CSSファイル）よりは、フォームエディターの設定が強いことも。
　→ 特にテーマや外部CSSファイルで設定したスタイルは、フォームエディターに“負ける”ケースがあるので注意！

📝 まとめ

フォームのスタイルは、見えないところで“出どころの戦い”が起きていることも多いです。
今回の内容をふまえて、
「なんで効かないの？」と迷ったときには、フォームの種類や設定の場所を見直してみると、きっとヒントが見つかるはずです🕵️‍♀️✨