Multi-Step Global CSS not supporting

Develop, Build & Integrate CMS Development
,
1

In my theme, when I try to add global CSS to a multi-step form, the styles are not being applied. Why is that?
Regards,
Jannatul

2

Hi @JFerdeous9,

Can you clarify what you mean by global CSS? Where do you include it, and have you verified if the CSS selectors correctly target the multi-step form?

3

Great questions, @GiantFocal :raising_hands: — Jaycee

4

I am basically developing a theme where I have set some global css for my theme hubspot form. Its work for my theme hubspot form but when I used hubspot by default form module the global css not working for that.

.hs-form [data-hsfc-id="Renderer"] .hsfc-TextInput,
.hs-form [data-hsfc-id="Renderer"] .hsfc-TextareaInput,
.hs-form [data-hsfc-id="Renderer"] .hsfc-DateInput,
.hs-form [data-hsfc-id="Renderer"] .hsfc-FileInput{
 background-color:{{field_background_color.color}};
 color:{{field_text_color.color}};
 font-weight: 400;
 font-size: {{ new_size }}{{ theme.forms.labels.font_style.font.size_unit }};
 padding: {{v_padding}}px {{h_padding}}px;
 width: 100%;
 display: block;
 border-radius: 8px;
 border: {{border_width}}px solid {{ border_color }};
 box-sizing: border-box;
}
5

HubSpot’s new forms does not use the .hs-form class but .hsfc-Form.

But also with new forms HubSpot is now using CSS variables which you can override in your :root CSS to avoid overriding any custom styling edits made directly in the forms.